DNN MVC Module PartialView 返回整个页面答案

【问题标题】：DNN MVC Module PartialView returns entire pageDNN MVC Module PartialView 返回整个页面
【发布时间】：2019-02-04 20:23:36
【问题描述】：

我正在为 DNN 创建一个 MVC 模块并尝试将表单作为局部视图返回，以允许用户输入动态数量的对象，但是当我对返回 PartialView 的操作路由进行 AJAX 调用时将其附加到页面，我将收到包含在我的 DNN 皮肤布局中的整个页面的 HTML。

我按照示例从 DNN 的 official samples repo 和 this general MVC guide 渲染部分视图。我确保从我的 ActionResult 返回一个 PartialView 并在我的部分视图 Razor 模板中将 Layout 设置为 null。

我的行动：

 public PartialViewResult BlankEducationForm()
        {
            return PartialView(new Education());
        }

我的部分观点：

@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<Chris.Modules.ResumeTest2.Models.Education>

@{
    Layout = null;
}

@using System.Text.RegularExpressions
@using DotNetNuke.Web.Mvc.Helpers

<div class="education-editor">
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="inputEmail4">School Name:</label>
            @Html.TextBoxFor(m => m.SchoolName, new { @class = "form-control", @placeholder = "Degree" })
        </div>
        <div class="form-group col-md-6">
            <label for="inputPassword4">Degree(s) Earned:</label>
            @Html.TextBoxFor(m => m.Degree, new { @class = "form-control", @placeholder = "Degree" })
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-4">
            <label for="inputEmail4">Start Year:</label>
            @Html.TextBoxFor(m => m.StartYear, new { @class = "form-control", @placeholder = "Start Year" })
        </div>
        <div class="form-group col-md-4">
            <label for="inputPassword4">End Year:</label>
            @Html.TextBoxFor(m => m.EndYear, new { @class = "form-control", @placeholder = "End Year" })
        </div>
        <div class="form-group col-md-4">
            <label for="inputPassword4">Display Order:</label>
            @Html.TextBoxFor(m => m.Order, new { @class = "form-control", @placeholder = "Order" })
        </div>
    </div>


</div>

通过 AJAX 调用调用它的父视图：

@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<Chris.Modules.ResumeTest2.Models.Resume>

@using System.Text.RegularExpressions
@using DotNetNuke.Web.Mvc.Helpers


<div id="Items-@Dnn.ModuleContext.ModuleId">
    <div id="resume-container">
        <form method="post" action="@Url.Action("Create", "Resume")">
            <h1>General Information</h1>  
            <div class="form-group">
                <label for="exampleInputPassword1">Resumé Name:</label>
                @Html.TextBoxFor(m => m.ResumeName, new { @class = "form-control", @placeholder = "Resume Name" })
            </div>

            <div class="form-row">
                <div class="form-group col-md-4">
                    <label for="inputEmail4">First Name:</label>
                    @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control", @placeholder = "First Name" })
                </div>
                <div class="form-group col-md-4">
                    <label for="inputPassword4">Last Name:</label>
                    @Html.TextBoxFor(m => m.LastName, new { @class = "form-control", @placeholder = "Last Name" })
                </div>
                <div class="form-group col-md-4">
                    <label for="inputPassword4">Middle Name:</label>
                    @Html.TextBoxFor(m => m.MiddleName, new { @class = "form-control", @placeholder = "Middle Name" })
                </div>
            </div>

            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="inputEmail4">Address 1</label>
                    @Html.TextBoxFor(m => m.Address1, new { @class = "form-control", @placeholder = "Address 1" })
                </div>
                <div class="form-group col-md-6">
                    <label for="inputPassword4">Address 2</label>
                    @Html.TextBoxFor(m => m.Address2, new { @class = "form-control", @placeholder = "Address 2" })
                </div>
            </div>

            <div class="form-row">
                <div class="form-group col-md-4">
                    <label for="inputEmail4">City:</label>
                    @Html.TextBoxFor(m => m.City, new { @class = "form-control", @placeholder = "City" })
                </div>
                <div class="form-group col-md-4">
                    <label for="inputPassword4">State:</label>
                    @Html.TextBoxFor(m => m.State, new { @class = "form-control", @placeholder = "State" })
                </div>
                <div class="form-group col-md-4">
                    <label for="inputPassword4">ZIP:</label>
                    @Html.TextBoxFor(m => m.Zip, new { @class = "form-control", @placeholder = "ZIP" })
                </div>
            </div>

            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="inputEmail4">Phone Number:</label>
                    @Html.TextBoxFor(m => m.Phone, new { @class = "form-control", @placeholder = "Phone" })
                </div>
                <div class="form-group col-md-6">
                    <label for="inputPassword4">E-Mail:</label>
                    @Html.TextBoxFor(m => m.Email, new { @class = "form-control", @placeholder = "E-mail" })
                </div>
            </div>
            <h1>Education</h1>  
            <div id="education-forms"></div>
            @Html.ActionLink("Add another...", "BlankEducationForm", "Resume", null, new { id = "addItem" })
            @Html.HiddenFor(m => m.ResumeId)
            <button type="submit" class="dnnPrimaryAction">Create</button>
        </form>
    </div>
    <script>
        $('#addItem').click(function () {
            $.ajax({
                url: this.href,
                cache: false,
                success: function (html) {
                    $('#education-forms').append(html);
                }
            });
            return false;
        });
    </script>
</div>

它确实从请求中插入了 HTML，其中包括表单，但由于某种原因，它认为我想要整个页面。我不确定 DNN 识别我的控制器是否存在某种问题，但我没有理由期待一个。我真的很难过。

【问题讨论】：

标签： c# asp.net-mvc dotnetnuke

【解决方案1】：

在你的 ajax 调用的成功函数中，而不是使用：

success: function (html) {
  $('#education-forms').append(html);
}

请尝试以下方法：

success: function (html) {
  $('#education-forms').html(html);
}

/// 更新以跟进评论

您的局部视图的 .cshtml 是什么？例如，如果它被称为 _MyPartialView.cshtml，请尝试以下操作之一（如果需要 .cshtml，我不记得了）：

public PartialViewResult BlankEducationForm()
{
    return PartialView("_MyPartialView", new Education());
    return PartialView("_MyPartialView.cshtml", new Education());
}

【讨论】：

没有区别，实际返回的 HTML 是针对整个页面的。
扩展名不应该是必需的，但我已经尝试了包括视图名称和省略它。两种方式都会返回视图，因为它对应于操作名称，但是在所有情况下，它都包含在整个页面布局中。我最后的猜测是，这是由于我缺少 RouteConfig，但即使在示例中包含一个规范后，我也遇到了同样的问题。

【解决方案2】：

你需要像这样设置你的 RouteConfig.cs

public class RouteConfig : IMvcRouteMapper {
    public void RegisterRoutes(DotNetNuke.Web.Mvc.Routing.IMapRoute mapRouteManager) {
        mapRouteManager.MapRoute("ModuleNameHere", "ControllerNameHere", "{controller}/{action}", new[]
        {"ControllerNamespaceHere.Controllers"});
    }
}

那么你需要在你的ajax调用中使用这样的url

'/DesktopModules/MVC/ModuleName/ControllerName/ActionName';

这可以防止 dnn 注入标头和其他所有内容。

【讨论】：