MVC4：刷新按鈕點擊的部分視圖

Question

我想做一些簡單的事情。 我有一個產品列表（帶有名稱屬性），每個產品旁邊都有一個“詳細信息”按鈕。 當我點擊按鈕時，我希望產品的詳細信息顯示在列表旁邊（意外，我知道^^）。

到目前為止我做了什么：

顯示產品列表 - 為每個產品顯示的名稱和按鈕：

@foreach (var product in item.Value) {
        <div>id : @product.product.PRODUCT_ID , name : @product.product.PRODUCT_NAME @Html.ActionLink("Details", "ProductDetails", new { id = product.product.PRODUCT_ID }, null)</div> 
    }

在另一頁中顯示產品的詳細信息：

@model IEnumerable<MyService.PRODUCT>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.EPC_NUMBER)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PRODUCT_NAME)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.MANUFACTURING_DATE)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.EPC_NUMBER)
        </td>      
        <td>
            @Html.DisplayFor(modelItem => item.PRODUCT_NAME)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.MANUFACTURING_DATE)
        </td>
    </tr>
}
</table>

我現在要做的是：在同一個視圖中查看2。 當我單擊詳細信息按鈕時，將使用product.id作為參數調用我的控制器的功能，然后顯示產品的詳細信息。 怎么做我想要的？ 謝謝 ！

Answer 1

德比很容易。

首先，您需要使用MyService.PRODUCT模型為Details部分執行View或PartialView。

更改

@Html.ActionLink("Details", "ProductDetails", new { id = product.product.PRODUCT_ID }, null)

至

@Ajax.ActionLink("Details", "ProductDetails", new { id = product.product.PRODUCT_ID }, new AjaxOptions {UpdateTargetId = "myDisplayID"})

在產品列表下添加新Div

<div id="myDisplayID"></div>

該鏈接將使用MVC框中的Jquery文件進行Ajax調用。 它將轉到ProductDetails控制器的動作詳細信息，它返回已設置的部分視圖，並將返回HTML呈現為指定的Div標記。

您可能還想看看這個： 如何使用Ajax.ActionLink？

此外，您可能需要添加以下腳本：

<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

Answer 2

我認為你最好的選擇是為這些物品制作一個動作結果。 （將從db重新加載數據）然后使用ajax調用它。 （點擊按鈕）