C# jQuery ajax命令后重新加载部分页面

我对JQuery和Asp.NETMVC3（C#）都很陌生，所以如果这是一件小事，我很抱歉。我有一个MVC局部视图（Index.cshtml），它有一个任务列表。这些任务包含在列表样式布局中的indivudal 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>

---

我对jQuery和ASP.NETMVC也比较陌生，不过，首先想到的是

为了维护页面的AJAX-y特性，我建议您创建一个方法来处理返回JSON格式的

TaskManagementApplication.Models.Project

集的POST。此方法可以选择性地返回筛选结果

标记将如下所示

创建新任务
编辑任务

接下来，您将让jQuery克隆

ProjectWrapperTemplate

元素，并设置所有相应的字段

$（函数（）{
$.ajax({
url:“/Project/GetTasks”，
类型：“POST”，
数据：{}
}).完成（功能（数据）{
data.forEach（函数（元素）{
附件（元素）；
});
});
函数AppendProjectWrapper（数据）{
var projectAccordionWrapper=$（“#projectAccordionWrapper”）；
var projectWrapper=$（'#ProjectWrapperTemplate'）.clone（true，true）；
projectWrapper.id=nothing；//删除id，以避免重复
projectWrapper.style.display=nothing；//删除样式“display:none”
var itemName=projectWrapper.children（'#itemName'）；//h3
itemName.id=无；
itemName.text（data.itemName）；
var itemProjectID=projectWrapper.children（'#itemProjectID'）；//按钮创建新任务
itemProjectID.id=data.itemProjectID；
var portletTemplate=projectWrapper.children（'#portletTemplate'）；//div
data.Tasks.forEach（函数（元素）{
var portlet=portletTemplate.clone（）；
portlet.id=无；
var taskName=portlet.children（'#taskName'）；
taskName.id=无；
taskName.text（元素.taskName）；
var taskscription=portlet.children（'#taskscription'）；
taskscription.id=无；
taskDescription.text（元素.taskDescription）；
var editTaskButton=portlet.children（'#taskID'）；
editTaskButton.id=element.TaskID；
appendTo（projectWrapper）；
});
portletTemplate.remove（）；//删除portlet模板元素
projectWrapper.appendTo（projectAccordionWrapper）；
}
}

最后，让

'/Project/SaveTask'

返回当前保存任务的JSON格式的

TaskManagementApplication.Models.Project

$.ajax({
url:“/Project/SaveTask”，
类型：“POST”，
数据：{“taskName”：taskName，“taskscription”：taskscription，“taskID”：id}
}).完成（功能（数据）{
附件（数据）；
});

'/Project/GetTasks'

的返回数据应如下所示：

[
{
ItemName:“@item.Name”，
ItemProjectID:“@item.ProjectID”，
任务：[
TaskName:“@task.TaskName”，
TaskDescription:“@task.TaskDescription”，
TaskID:'@task.TaskID'
]
}
]

来自

'/Project/SaveTask'

的返回数据应采用相同的格式，但最外层的数组除外

---

请注意，这段代码中有很多未经测试。

将列表重构为另一个action+视图可能是最容易的。然后，您可以在原始的

Index.cshtml

视图中调用它，也可以通过jQuery中的

.load（）

方法调用它。因此，假设：

项目控制员

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

---

你的意思是想在调用SaveTask后刷新任务列表吗？是的，这是正确的。我很抱歉。读了这么多教程，我的头脑有点模糊。你能在ProjectController中发布SaveTask操作吗？还有，索引操作非常感谢你所做的一切。今晚我将试一试。我将深入研究上面的代码，看看我能做些什么o、 非常感谢您的回复。

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

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