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

Derbie很容易。

首先，您需要使用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标记。

您可能还想看一下：How to use 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调用它。（在按钮上单击）

MVC4：刷新按钮点击的部分视图

2 个答案: