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 predefined item_Id.

Q#1: How do I create a function that will get an element's value and put it in the item_Id parameter before sending it to the Controller? Could this be inserted in the @Html.Action?

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <div id="pvPrice" class="" style="border: 0px solid green; ">
                    @Html.Action("RetrieveItemPrice", new { item_Id = 1 })
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<table id="dbTable">
    <thead>
        <tr>
            <th class="hidden">
                @Html.DisplayNameFor(model => model.itemId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.itemName)
            </th>
        </tr>
    </thead>
    <tbody id="dbBody">
        @foreach (var item in Model.Items)
        {
            <tr>
                <td class="hidden">
                    @Html.DisplayFor(modelItem => item.itemid)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.itemname)
                </td>
            </tr>
        }
    </tbody>
</table>

Controller

public PartialViewResult RetrieveItemPrice(string item_Id)
{
    var prices = from ip in _odb.ITEM_PRICE_MSTR
                 join i in _odb.ITEM_MSTR on i.ITM_ID equals i.ITM_ID
                 select new ItemModel
                 {
                     itemid = i.ITM_ID,
                     itemname = i.ITM_DESC,
                     itemprice = ip.ITM_PRICE,
                     defaultflag = ip.DEFAULT_FL,
                     startdate = DbFunctions.TruncateTime(ip.START_DT),
                     enddate = DbFunctions.TruncateTime(ip.END_DT),
                     createddt = i.CREA_DT
                 };

    prices = prices.Where(i => i.itemid.ToLower().Contains(item_Id.ToLower()));
    prices = prices.OrderByDescending(i => i.itemprice);

    var vm = new ItemViewModel();
    vm.Items = prices.ToPagedList(pageNumber, pageSize);

    return PartialView("_ViewItemPrice", vm);
}

Q#2: When I return a PartialView in Controller using PartialViewResult, who's going to receive and display it in the View? I ran the code, but nothing is being displayed. I think I still lack codes in View to receive the returned PartialView in Controller

回答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.

回答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.

来源：https://stackoverflow.com/questions/39864930/mvc-html-action-to-retrieve-element-using-javascript-then-pass-it-as-paramete