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

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

我该如何做到这一点？我希望能够在不刷新第一部分视图的情况下完成此操作。

非常感谢您的帮助，

Answer 1

给与 “TaskDetail” - 视图的唯一ID的DIV。

<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

说你的任务列表局部视图如下：

<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> 
} 

您可以处理表行的Click事件中主叫通过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); 
}