Question

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

@{
    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提交表单并检索新选择的任务详细信息。

我如何做到这一点？我希望能够在不破坏第二部分视图的情况下完成第二部分视图。

非常感谢你的帮助，

Answer 1

给div添加“TaskDetail” - 查看唯一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来检索和显示数据，而无需刷新页面。

Answer 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处理调用服务器端方法的表行的click事件：

$(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);
}

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

2 个答案: