AJAX 调用局部视图答案

【问题标题】：AJAX to call a partial viewAJAX 调用局部视图
【发布时间】：2014-06-30 17:14:53
【问题描述】：

当用户单击按钮时，我在 Web 窗体中的旧项目会显示一个面板。我目前的项目是在 C# MVC 中重建这个功能。

此视图将使用 Javascript 和 AJAX 按需显示部分视图。代码在调试器中正常流动，但不调用局部视图。

我已经使用 SOF 帖子来设置 JS，以便正确显示包含部分视图的 div。我在 AJAX 或其他地方缺少什么？（也许我需要装饰目标动作？也许我需要在局部视图中做一些事情？）

视图的相关部分：

<script type="text/javascript">

//Show the Add Project section.
function NewProject() {
    //1. Reset the Add Project partial view.
    //2. Show the Add Project partial view.
    //3. Put focus into the project title field.
    //4. Hide the button.
    $("#divNewProject").show();
    $.ajax({
        url: "/Organization/AddProject/"
    }).done(function () {
        $("#divNewProject").html(data);
        $("#ProjectTitle").focus();
        $("#ProjectTitle").scrollIntoView();
    });
    $("#divAddProject").hide();
}
</script>

...

<div id="divAddProject">
    @* Button to add a project, showing/hiding a partial view *@
    <button type="button" name="btnAddProject" id="btnAddProject" value="Add" onclick="NewProject()" class="btn">
        <span class="wizard-step-text">Add New Project</span>
    </button>
</div>
<div id="divNewProject" hidden="hidden">
    This is a test. It should start out hidden and later be shown.
</div>

【问题讨论】：

标签： c# javascript ajax asp.net-mvc

【解决方案1】：

你可以这样做：

function NewProject() {

$("#divNewProject").show();
    $.ajax({
        url: '@Url.Action("AddProject","Organization")',
        success : function(data)
        {

        $("#divNewProject").html(data);
        $("#ProjectTitle").focus();
        $("#ProjectTitle").scrollIntoView();
        $("#divAddProject").hide();

        }
    });


}

【讨论】：

将代码放在成功部分是否确保代码仅在操作完成时执行？
OP 正在附加响应数据，它将在成功的回拨功能中可用
我在成功回调中移动了$("#divNewProject").show(); 和$("#divAddProject").hide(); 行。 TXVM。
@CodeswithHammer 是的，它确保代码仅在 ajax 调用成功完成时执行，如果服务器端发生任何错误，它将调用我尚未添加的错误回调函数，您也可以添加它, error:function(){ }
好主意。我为error: function 添加了一个占位符以供将来实施。

【解决方案2】：

done里面的函数应该有“数据”作为参数。

$.ajax({
    url: "/Organization/AddProject/"
}).done(function (data) {
    $("#divNewProject").html(data);
    $("#ProjectTitle").focus();
    $("#ProjectTitle").scrollIntoView();
});

【讨论】：

【解决方案3】：

调试时，在done 函数内设置断点。它应该会命中，您会看到您尚未定义 data 变量。

应该是：

}).done(function(data) {
    // Do something with data
})

【讨论】：