使用 Ajax 和 MVC 3，如何将值从一个局部视图传递到同一页面上的另一个局部视图？答案

【问题标题】：With Ajax and MVC 3, how can I pass values from one partial View to another partial View on the same page?使用 Ajax 和 MVC 3，如何将值从一个局部视图传递到同一页面上的另一个局部视图？
【发布时间】：2012-07-23 14:50:11
【问题描述】：

我有一个项目，其中有一个任务视图。它包含以下代码：

@{
    ViewBag.Title = "Tasks";
}         

<div>
<div>@Html.Action("TaskList", "Dispatch", new { hidAccId = "3", hidUserId = "0" })</div>
<div>@Html.Action("TaskDetail", "Dispatch")</div>  
</div>

所以，当任务视图被渲染时，它实际上调用了另外两个局部视图。

第一个部分视图基本上给了我一个任务表.. 很少的信息。我有它，所以当我选择一行数据时，它会突出显示并给我一个行 ID。

我的第二个局部视图（位于同一页面上的第一个视图下方）显示了详细的任务。

这个想法是从第一个局部视图中获取选定的行 ID，并将其提供给第二个局部视图的表单。使用 Ajax 提交表单并检索新选择的 Task 详细信息。

我该如何做到这一点？我希望能够在不破坏第一个局部视图的情况下通过刷新第二个视图来做到这一点。

非常感谢您的帮助，

【问题讨论】：

标签： jquery ajax asp.net-mvc-3

【解决方案1】：

给带有“TaskDetail”的div-view一个唯一的id。

<div id="taskDetailsDiv">@Html.Action("TaskDetail", "Dispatch")</div>

在TaskListView中添加代码以附加javascript函数以更新详细信息视图：

<% foreach (TaskListRow row in ViewData.Model)
//make tablerows and add this for data that will trigger an update of details view
<a href="javascript:DisplayEditView(" + row.uniqueId + ")">Edit</a>
%>

//Add this at the bottom of the list view
<script language="javascript" type="text/javascript">
function DisplayEditView(uniqueRowId){
var url = '@(Url.Action("TaskDetail", "Dispatch"))';
url += "\?id" + uniqueRowId;
$.get(url, function(data){
$("taskDetailsDiv").html(data.toString);
}
}
</script>

这将使用 jquery 和 ajax 来检索和显示数据，而无需刷新页面。

【讨论】：

感谢您的快速回复，两者都试过了，对我来说都很好用。感谢帮助

【解决方案2】：

说你的TaskList局部视图如下：

<table>
    <tr>
        <th>
            TaskCol1
        </th>
        <th>
            TaskCol2
        </th>
        <th>
            TaskCol3
        </th>
        <th>
            TaskCol4
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.TaskCol1)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TaskCol2)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TaskCol3)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TaskCol4)
        </td>
        <td>
            @Html.HiddenFor(modelItem => item.TaskId)
        </td>
    </tr>
}

</table>

而您的 TaskDetail 部分视图：

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Task</legend>

        @Html.HiddenFor(model => model.TaskId)

        <div class="editor-label">
            @Html.LabelFor(model => model.TaskCol1)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.TaskCol1)
            @Html.ValidationMessageFor(model => model.TaskCol1)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.TaskCol2)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.TaskCol2)
            @Html.ValidationMessageFor(model => model.TaskCol2)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.TaskCol3)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.TaskCol3)
            @Html.ValidationMessageFor(model => model.TaskCol3)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.TaskCol4)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.TaskCol4)
            @Html.ValidationMessageFor(model => model.TaskCol4)
        </div>
    </fieldset>
}

您可以通过ajax处理调用服务器端方法的表格行的点击事件：

$(function () {
    $("tr").click(function () {
        var itemId = $("input[type='hidden']", this).val();

        $.getJSON("/Home/GetDetails", { id: itemId }, function (data) {
            $("#TaskId").val(data.TaskId);
            $("#TaskCol1").val(data.TaskCol1);
            $("#TaskCol2").val(data.TaskCol2);
            $("#TaskCol3").val(data.TaskCol3);
            $("#TaskCol4").val(data.TaskCol4);
        });
    });
});

最后，你的控制器必须有以下方法：

public ActionResult GetDetails(int id)
{
    TaskEntities entities = new TaskEntities();

    var item =
        (from t in entities.Tasks
        where t.TaskId == id
        select t).FirstOrDefault();

    return Json(item, JsonRequestBehavior.AllowGet);
}

【讨论】：