Question

我正在为DNN创建一个MVC模块，并尝试将表单作为部分视图返回，以允许用户输入动态数量的对象，但是，当我对操作路线进行AJAX调用时，该函数返回PartialView和将其附加到页面上后，我将收到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识别我的控制器是否存在某种问题，但是我没有理由期待。我真的很沮丧。

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注入标头和其他所有内容。

DNN MVC模块PartialView返回整个页面

2 个答案: