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);