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

Question

我对 JQuery 和 Asp.net MVC 3 (C#) 都很陌生，所以如果这是微不足道的，我深表歉意。我有一个包含任务列表的 MVC 部分视图 (Index.cshtml)。这些任务包含在我在列表样式布局中的单个 div 中。我有一个名为“添加任务”的按钮，可以打开一个对话框。此对话框将通过对控制器的 AJAX Json 调用将添加的任务保存到数据库中。

这就是我遇到问题的地方 - 对话框关闭后，我希望任务列表与我刚刚添加的任务一起重新加载。我找到了重新加载整个页面的示例，并且我找到了控制器应该返回渲染视图的示例。我的问题是对话框是从我要重新加载的部分打开的。有没有办法完成我想做的事情。

索引.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");
  });

score 0 · Accepted Answer

将列表重构为另一个动作+视图可能是最简单的。然后，您可以在原始Index.cshtml视图中调用它，也可以通过.load()jQuery 中的方法调用它。所以，假设这样：

项目控制器

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

    return View(model);
}

任务.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>   
}

您可以像这样调整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>
                <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);

score 0 · Accepted Answer

我对 jQuery 和 ASP.NET MVC 也比较陌生，但是，这是我首先想到的。

为了维护页面的 AJAX-y 方面，我建议您创建一个方法来处理返回 JSON 格式的TaskManagementApplication.Models.Project. 此方法可以选择返回过滤结果。

标记看起来像这样，

<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'应如下所示：

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

来自的返回数据'/Project/SaveTask'应该遵循相同的格式，除了最外层的数组。

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

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

2 回答 2

Related

Reference