DNN MVC 模塊 PartialView 返回整個頁面

Question

我正在為 DNN 創建一個 MVC 模塊，並試圖返回一個表單作為局部視圖以允許從用戶輸入動態數量的對象，但是當我對我的操作路由進行 AJAX 調用時返回 PartialView 並將其附加到頁面，我正在接收包含在我的 DNN 皮膚布局中的整個頁面的 HTML。

我遵循了從 DNN 的官方示例存儲庫和這個通用 MVC 指南中呈現部分視圖的示例。 我已經確保從我的 ActionResult 返回一個 PartialView 並在我的部分視圖 Razor 模板中將布局設置為 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 識別我的控制器是否存在某種問題，但我沒有理由期待它。 我真的很難過。

Answer 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());
}

Answer 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 注入標頭和其他所有內容。