MVC - Html.Action To Retrieve Element Using Javascript, Then Pass It As Parameter To Controller, Then Return A PartialView

View - My view has a modal that has an @Html.Action that calls the PartialViewResult in Controller. Notice the @Html.Action('RetrieveItemPrice', new { item_Id = 1 }) still has pred

Solution 1:

Assuming you have many items with different item_Id and you want to show the modal dialog when this item is clicked. You should be listen to the click event on the element, make an ajax call and get the response (partial view result) and use that to build your modal dialog content.

Assuming your main view has code like this

<table>
@foreach (var item in Model.Items)
{
  <tr>
      <td>@item.itemname</td>
      <td><a href="@Url.Action("RetrieveItemPrice",new { item_Id = itemId})" 
                                                      class="modal-link" >@item.itemname</a>
       </td>
  </tr> 
} 
</table>
<!-- The below code is for the modal dialog -->
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
  <a href="#close" title="Close" class="modal-close-btn">X</a>
  <div class="modal-content">
      <div class="modal-body"></div>
</div>

This will generate links with css class modal-link for each item in the table. The href value of the links will be like YourControllerName/RetrieveItemPrice?item_id=123(123 will be replaced with actual itemid) Now listen to the click event on these, make an ajax call to the href attribute value of these links and use the response for populating the modal dialog content.

$(function () {

     $('body').on('click', '.modal-link', function (e) {
         e.preventDefault();

         $("#modal-container").remove();
         $.get($(this).attr("href"), function (data) {
                 $('<div id="modal-container" class="modal fade">
                        <div class="modal-content" id="modalbody">' 
                                               + data + '</div></div>').modal();
         });
    });
});

This code will replace the entire content of the modal with the partial view result coming from the RetrieveItemPrice action method. That means you need to include the necessary markup needed for the modal header and footer(with buttons) in the _ViewItemPrice partial view.

Solution 2:

A#1: the code calling @Html.Action is executed on server-side, at that phase the html document has not been sent to client-side so you don't have to look for a way to retrieve element value. You can pass it directly to the call, instead, because the model used for rendering the view (including the element) should be accessible to the code in the modal.

If you place the modal markups right inside the view, you definitely can get @Model.ItemId, for example. If you place the modal in a partial view, you can pass item id via ViewBag:

@Html.Partial("Modal", null, new ViewDataDictionary{{"ItemId", Model.ItemId}})

then use it in the modal markups:

@Html.Action("RetrieveItemPrice", new { item_Id = ViewBag.ItemId })

A#2: you should try if [ChildActionOnly] makes the action RetrieveItemPrice works.