使用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); 
}