部分视图不会在当前视图中加载答案

【问题标题】：Partial view doesn't load inside current view部分视图不会在当前视图中加载
【发布时间】：2015-08-03 07:05:22
【问题描述】：

所以我有这样的部分观点：

@model QueryQuestionManager.Models.Domain.Answer
<script src="~/Scripts/DynamicList.js"></script>

<div class="editorRow">
@using (Html.BeginCollectionItem("Answers"))
{
    <div>
        @Html.LabelFor(x => x.AnswerText)
        @Html.EditorFor(x => x.AnswerText)
    </div>
    <a href="#" class="deleteRow">delete</a>
}

</div>

当有人点击链接时，我想在我的主视图中加载这个局部视图：

@model QueryQuestionManager.Models.Domain.Question

@{
ViewBag.Title = "Create";
}

<script src="~/Scripts/DynamicList.js"></script>

<br />
        @using (Html.BeginForm(new { @class = "form", role = "form" }))
        {

            <div class="form-group">
                <div class="editor-label">
                    @Html.LabelFor(m => m.QuestionText)
                </div>

                <div class="form-control">
                    @Html.TextBoxFor(m => m.QuestionText)
                    @Html.ValidationMessageFor(m => m.QuestionText)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(m => m.Category)
                </div>

                <div class="form-control">
                    @Html.TextBoxFor(m => m.Category)
                    @Html.ValidationMessageFor(m => m.Category)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(m => m.Answers)
                </div>

                <br />
                <div id="editorRows">
                    @foreach (var item in Model.Answers)
                    {
                        @Html.Partial("EditorRow", item);
                    }
                </div>
                @Html.ActionLink("Add another...", "BlankEditorRow",     "Question", new { id = "addItem" })

                <br />

                <input type="submit" value="Save" class="btn btn-success" />
            </div>
        }

<br />
<div>
@Html.ActionLink("Back to List", "Index", "Home")
</div>

这是控制器的动作结果

public ActionResult BlankEditorRow()
{
    return PartialView("EditorRow", new Answer());
}

然后我有一个用于动态添加和删除部分视图的 javascript 文件。

$('#addItem').click(function () {
$.ajax({
    url: this.href,
    cache: false,
    success: function (html) {
        $('#editorRows').append(html);
    }
});
return false;
});

$('a.deleteRow').live('click', function () {
    $(this).parents('div.editorRow:first').remove();
    return false;
});

但由于某种原因，我的部分视图没有加载到我当前的视图中，它只打开部分视图。

我是不是忘记了什么？

【问题讨论】：

您是否在视图中包含了 unobtrusive-ajax 脚本？通常，当您的局部视图最终出现在“新页面”上时，这意味着请求成功，但缺少 ajax 处理程序，因此它只是将局部视图返回到空白的新页面。编辑：只是想提一下，您可以通过使用 mvc Ajax.ActionLink(...) 帮助程序来缩小问题范围，而不是依赖于正确编码 jquery ajax 方法。

标签： asp.net-mvc razor view partial-views

【解决方案1】：

我认为您不想要该操作链接。我相信您的 jQuery 单击处理程序具有正确的方法，但是您的操作链接正在链接到您的新 URL（问题/BlankEditorRow），而您不希望这样。相反，您只需要获取此 html，然后照常插入，但无需将主页导航到该 URL。

【讨论】：

【解决方案2】：

使用锚标记和隐藏字段代替 ActionLink。

<a id="addItem" href="#" />
<input type="hidden" id="partialViewAction" value="@Url.Action("BlankEditorRow","ControllerName")"

现在在您的 ajax 调用中，不要使用锚的 href 属性，而是使用隐藏字段的值。

url: $('#partialViewAction').val()

【讨论】：