jQuery ajax命令後重新加載部分頁面

Question

我對JQuery和Asp.net MVC 3（C＃）都很新，所以我很抱歉，如果這是微不足道的。我有一個MVC部分視圖（Index.cshtml），它有一個任務列表。這些任務包含在我有列表樣式佈局的個人div中。我有一個名爲「添加任務」的按鈕，打開一個對話框。該對話框將通過AJAX Json調用將添加的任務保存到數據庫中。

這是我遇到麻煩的地方 - 對話框關閉後，我想用剛剛添加的任務重新加載任務列表。我找到了整個頁面被重新加載的例子，並且我找到了控制器應該返回一個渲染視圖的例子。我的問題是，對話框正在打開我想重新加載的部分。有沒有辦法完成我想要做的事情。

Index.cshtml

@model IEnumerable<TaskManagementApplication.Models.Project> 

@{ 
    ViewBag.Title = "Index"; 
} 



<h2>Index</h2> 

<div id="ProjectAccordionWrapper"> 
    @foreach (var item in Model) 
    { 
     <div class="ProjectWrapper"> 
      <h3>@item.Name</h3> 
      <div class="column"> 
       <button class="createTaskButton" id="@item.ProjectID">Create New Task</button> 
        @foreach(var task in item.Tasks) { 
         var buttonClass = "taskID" + task.TaskID; 
          <div class="portlet"> 
          <div class="portlet-header">@task.TaskName</div> 
          <div class="portlet-content">@task.TaskDescription</div> 
          <button class="editTaskButton" id="@task.TaskID">Edit Task</button> 
          </div> 
        } 
      </div> 
     </div> 
    } 
</div> 

<div id="dialog-form" title="Create new user"> 
    <p class="validateTips">All form fields are required.</p> 

    <form> 
    <fieldset> 
    <label for="TaskName">Task Name</label> 
    <input type="text" name="TaskName" id="name" class="text ui-widget-content ui-corner-all" /> 
    <label for="TaskDescription">Task Description</label> 
    <input type="text" name="TaskDescription" id="description" value="" class="text ui-widget-content ui-corner-all" /> 
    <input type="hidden" name="TaskID" id="ID" /> 
    <input type="hidden" name="ProjectID" id="ProjectID" /> 
    </fieldset> 
    </form> 
</div> 

部分的Javascript

function GetTask(id) { 
    if (id.length > 0) { 
     $.ajax({ 
      url: '/Project/GetTaskFromID', 
      type: "POST", 
      data: { "id": id }, 
      success: PopulateDialogFields, 
      error: HandleError 
     }); 
    } 
} 

function PopulateDialogFields(data) { 
    $("#name").val(data.TaskName); 
    $("#description").val(data.TaskDescription); 
    $("#ID").val(data.TaskID); 
} 

function HandleError(data) { 
    alert(data.error); 
    var foo = data; 
} 

function SaveTask() { 
    var taskName = $("#name").val(); 
    var taskDescription = $("#description").val(); 
    var id = $("#ID").val(); 
    var projectID = $("#ProjectID").val(); 
    if (id.length > 0) { 
     $.ajax({ 
      url: '/Project/SaveTask', 
      type: "POST", 
      data: { "taskName": taskName, "taskDescription": taskDescription, "taskID": id } 
     }); 
    } 
    else { 
     $.ajax({ 
      url: '/Project/SaveTask', 
      type: "POST", 
      data: { "taskName": taskName, "taskDescription": taskDescription, "projectID": projectID } 
     }); 

    } 
} 

$("#dialog-form").dialog({ 
    autoOpen: false, 
    height: 300, 
    width: 350, 
    modal: true, 
    buttons: { 
     "OK": function() { 
       SaveTask(); 
       $(this).dialog("close"); 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
    }, 
    close: function() { 
     allFields.val("").removeClass("ui-state-error"); 
     window.location.reload(true); 
    }, 
    open: function() { 
     var id = $(this).data("id"); 
     var projectID = $(this).data("projectID"); 
     $("#ProjectID").val(projectID); 
     var button = $("#" + id); 
     GetTask(id); 
    } 
}); 

$(".editTaskButton") 
    .button() 
    .click(function() { 
     $("#dialog-form").data('id', this.id).dialog("open"); 
    }); 

$(".createTaskButton") 
    .button() 
    .click(function() { 
     $("#dialog-form").data('projectID', this.id).dialog("open"); 
    }); 

Answer 1

我是比較新的jQuery和ASP.NET MVC爲好，但是，這裏就是第一個浮現在腦海。

爲了維護頁面的AJAX-y方面，我建議你創建一個處理POST的方法，該方法返回一個格式爲TaskManagementApplication.Models.Project的JSON格式的集合。該方法可以選擇返回過濾結果。

的標記應該是這樣的，

<div id="ProjectAccordionWrapper"> 
    <div id="ProjectWrapperTemplate" class="ProjectWrapper" style="display: none;"> 
     <h3 id="itemName"></h3> 
     <div class="column"> 
      <button class="createTaskButton" id="itemProjectID">Create New Task</button> 
      <div id="portletTemplate" class="portlet"> 
       <div class="portlet-header" id="taskName"></div> 
       <div class="portlet-content" id="taskDescription"></div> 
       <button class="editTaskButton" id="taskID">Edit Task</button> 
      </div> 
     </div> 
    </div> 
</div> 

接下來，你將有jQuery的克隆ProjectWrapperTemplate元素，並設置所有相應的字段。

$(function() { 
    $.ajax({ 
     url: '/Project/GetTasks', 
     type: "POST", 
     data: { } 
    }).done(function (data) { 
     data.forEach(function (element) { 
      AppendProjectWrapper(element); 
     }); 
    }); 

    function AppendProjectWrapper(data) { 
     var projectAccordionWrapper = $('#ProjectAccordionWrapper'); 

     var projectWrapper = $('#ProjectWrapperTemplate').clone(true, true); 
     projectWrapper.id = nothing; // remove the id, so as to not have duplicates 
     projectWrapper.style.display = nothing; // remove the style "display: none" 

     var itemName = projectWrapper.children('#itemName'); // h3 
     itemName.id = nothing; 
     itemName.text(data.ItemName); 

     var itemProjectID = projectWrapper.children('#itemProjectID'); // button Create New Task 
     itemProjectID.id = data.ItemProjectID; 

     var portletTemplate = projectWrapper.children('#portletTemplate'); // div 
     data.Tasks.forEach(function (element) { 
      var portlet = portletTemplate.clone(); 
      portlet.id = nothing; 

      var taskName = portlet.children('#taskName'); 
      taskName.id = nothing; 
      taskName.text(element.TaskName); 

      var taskDescription = portlet.children('#taskDescription'); 
      taskDescription.id = nothing; 
      taskDescription.text(element.TaskDescription); 

      var editTaskButton = portlet.children('#taskID'); 
      editTaskButton.id = element.TaskID; 

      portlet.appendTo(projectWrapper); 
     }); 
     portletTemplate.remove(); // remove the portlet template element 

     projectWrapper.appendTo(projectAccordionWrapper); 
    } 
} 

最後，有'/Project/SaveTask'返回JSON格式的當前保存的任務TaskManagementApplication.Models.Project。

$.ajax({ 
    url: '/Project/SaveTask', 
    type: "POST", 
    data: { "taskName": taskName, "taskDescription": taskDescription, "taskID": id } 
}).done(function (data) { 
    AppendProjectWrapper(data); 
}); 

爲'/Project/GetTasks'返回數據應如下所示：從'/Project/SaveTask'

[ 
    { 
     ItemName: '@item.Name', 
     ItemProjectID: '@item.ProjectID', 
     Tasks: [ 
      TaskName: '@task.TaskName', 
      TaskDescription: '@task.TaskDescription', 
      TaskID: '@task.TaskID' 
     ] 
    } 
] 

返回數據應遵循的格式相同，不同之處或最外面的陣列。

請注意，很多此代碼未經測試。

Answer 2

將列表重構爲另一個動作+視圖可能是最容易的。然後，您可以在原始Index.cshtml視圖中以及通過jQuery中的​​方法調用此方法。因此，假設這樣的：

項目控制器

[HttpGet] 
[ChildActionOnly] 
public ActionResult Tasks(int id) 
{ 
    // create the appropriate model object as an IEnumerable of your Task type 

    return View(model); 
} 

Tasks.cshtml

@foreach(var task in Model) { 
    var buttonClass = "taskID" + task.TaskID; 
     <div class="portlet"> 
     <div class="portlet-header">@task.TaskName</div> 
     <div class="portlet-content">@task.TaskDescription</div> 
     <button class="editTaskButton" id="@task.TaskID">Edit Task</button> 
     </div> 
} 

你會調整指數。CSHTML像這樣：

@model IEnumerable<TaskManagementApplication.Models.Project> 

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 
<div id="ProjectAccordionWrapper"> 
    @foreach (var item in Model) 
    { 
     <div class="ProjectWrapper"> 
      <h3>@item.Name</h3> 
      <div class="column"> 
       <button class="createTaskButton" id="@item.ProjectID">Create New Task</button> 
       <div id="tasks-@item.ProjectID"> 
        @Html.Action("Tasks", "Project", new { id = item.ProjectID }) 
       </div> 
      </div> 
     </div> 
    } 
</div> 

    //... the rest of the view 

最後，

// this should happen inside the callback of your .ajax() method 
$('#tasks-'+projectID).load('/project/tasks/'+ projectID);