为什么局部视图不在同一页面中呈现？ (ASP.NET MVC 4)答案

【问题标题】：Why partial view not rendering in the same page? (ASP.NET MVC 4)为什么局部视图不在同一页面中呈现？ (ASP.NET MVC 4)
【发布时间】：2015-04-24 06:46:40
【问题描述】：

我遇到了部分视图显示的问题。

    //This is Controller Action 
//_AcademicInfo is the Partial view name
public PartialViewResult GetAcademicInfo(int empId)
        {
            var acad = _academicService.GetAcademinByEmp(empId);
            return PartialView("_AcademicInfo", acad);
        }

<!--Parent/caller page cshtml code-->

@Ajax.ActionLink(
            "Academic Details",
            "GetAcademicInfo",
            "Employee", new {empId = Model.Id},
            new AjaxOptions {UpdateTargetId = "AcademicDetails", InsertionMode = InsertionMode.InsertAfter}
            )

 <!--This is partial view cshtml-->
@model IEnumerable<Hik.PhoneBook.Data.Entities.Academic>

<div id="result">

    <table>
        <tr>
            <th>Degree Name</th>
            <th>Passing Year</th>
            <th>CGPA</th>
            <th>Institute</th>
        </tr>


        @foreach (var acad in Model)
        {
            <tr>
                <td>@Html.DisplayFor(m => acad.DegreeName)</td>
                <td>@Html.DisplayFor(m => acad.PassingYear)</td>
                <td>@Html.DisplayFor(m => acad.CGPA)</td>
                <td>@Html.DisplayFor(m => acad.Institute)</td>
            </tr>
        }

    </table>

</div>

因为，我需要通过单击链接来获取部分视图，而不是像@Html.Partial("_AcademicInfo", Model.Academic) 那样直接渲染。这就是我使用 Ajax.ActionLink 的原因。每当我单击“学术详细信息”链接时，它都会执行准确的结果。但不幸的是，它没有显示在同一页面中。它会出现在另一个页面中。（其 MVC 4）

我需要更改哪些内容才能在同一页面中呈现部分视图？

【问题讨论】：

那是因为你没有包含相关的脚本 - 你需要包含jquery.unobtrusive-ajax.js
是的，我已经使用了 @section scripts { }
那么您可能有重复的或其他乱序的脚本（jquery 必须是第一个）。编辑您的问题以在视图中显示所有脚本
@sharmoon 您还需要提供更完整的“父”视图示例，或者包含呈现的 HTML。
@StephenMuecke 是的，你纠正了。我的“jquery.unobtrusive-ajax.js”是在主 jQuery 加载之前设置的。但我不能将你的答案标记为正确答案，因为除了你的答案之外没有“正确/正确”标志。

标签： asp.net-mvc

【解决方案1】：

如果您重定向到新页面而不是停留在同一页面上，则意味着jquery.unobtrusive-ajax.js 未加载，@Ajax.ActionLink() 回退到正常链接。

你有一个

不包括脚本
脚本顺序错误（jquery{version}.js 必须来首先）
您有重复的脚本

【讨论】：

【解决方案2】：

也许你可以使用 jquery 的 .load() 函数？像这样。

$("divId").load('@url.action("getacademicInfo")', {empId : 4});

https://api.jquery.com/load/

【讨论】：

【解决方案3】：

尝试使用 JQuery Ajax 将部分视图加载到按钮/链接单击页面上的 Div 中。

var jsondata = { Id: iddata };

$.ajax({
    url: "/Controllername/GetAcademicInfo",
    method: "POST",
    dataType: "html",
    data: jsondata,
    success: function (response) {
        $("#divId").html(response);

    }

});

请注意，这只是一个示例代码，用于为您提供一个想法。

希望有帮助！

【讨论】：

OP 返回的是部分视图，而不是 json，所以它需要是dataType: "html",