部分视图也返回共享布局页面

时间:2013-05-23 18:53:26

标签: ajax asp.net-mvc asp.net-mvc-3 jquery partial-views

在我的ASP MVC3视图中,我使用以下Ajax调用来检索局部视图并将部分视图附加到特定的fieldset

的Ajax

    $("#addItem").click(function () {
        alert("here");
        $.ajax({
            url: '@Url.Action("BlankDropDownItem", "DropDownValues")',
            dataType: 'html',
            cache: false,
            success: function (html) {
                alert(html);
                $("#items").append(html); 
            }
        });
        return false;
    });

这个Ajax调用一个非常简单的ViewResult控制器方法,它应该返回局部视图。

控制器

    public ViewResult BlankDropDownItem()
    {
        return View("DropDownItemPartial", new DropDownValues());
    }

这是部分中的所有代码。当我在VS 2010中创建它时(我现在已经完成了两次以确保这一点)我选中了“部分视图”复选框,该复选框灰显了“使用共享布局”选项。

部分视图

@model Monet.Models.DropDownValues
<div class="editor-label">
     @Html.LabelFor(model => model.AllowedValue)
</div>
<div class="label-field">
    @Html.EditorFor(model => model.AllowedValue)
    @Html.ValidationMessageFor(model => model.AllowedValue)
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.DisplayValue)
</div>
<div class="label-field">
    @Html.EditorFor(model => model.DisplayValue)
    @Html.ValidationMessageFor(model => model.DisplayValue)
</div>

无论出于何种原因,当我在Ajax alert函数的这一行中返回的html对象上放置success

success: function (html) {

我看到html对象返回共享布局中的所有HTML,因此它基本上返回整个页面而不是局部视图。以下是Ajax调用完成后的外观屏幕截图。

enter image description here

1 个答案:

答案 0 :(得分:5)

我认为你有一个小的“容易错过”的语法问题:D

你有:

public ActionResult BlankDropDownItem()
{
    return View("DropDownItemPartial", new DropDownValues());
}

您应该:

public ActionResult BlankDropDownItem()
{
    return PartialView("DropDownItemPartial", new DropDownValues());
}

希望这有帮助!