0

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

@{
    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 详细信息。

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

非常感谢您的帮助，

4

2 回答 2

0

为具有“TaskDetail”的 div 提供一个唯一的 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 来检索和显示数据，而无需刷新页面。

于 2012-07-23T06:19:37.303 回答
0

假设您的 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);
}
于 2012-07-23T06:50:11.467 回答