Partial View returning shared layout page as well

Question

In my ASP MVC3 view I use the following Ajax call to retrieve a partial view and append the partial to a specific 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;
    });

This Ajax calls a very simple ViewResult controller method that is supposed to return the partial view.

Controller

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

This is all the code in the partial. When I created it in VS 2010 (I've done this twice now just to make sure) I checked the "Partial View" checkbox, which greys out the "Use Shared Layout" option.

Partial View

@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>

For whatever reason, when I put an alert on the html object returned in this line of the Ajax success function

success: function (html) {

I see that the html object returns all the HTML from the shared layout, so it is essentially returning a whole page instead of the partial view. Here is a screen shot of what it looks like once the Ajax call is complete.

enter image description here

technicallyjosh technicallyjosh · Accepted Answer · 2013-05-23T19:08:01

I think you are having one small "easy to miss" syntax issue :D

You have:

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

You should have:

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

Hope this helps!

Partial View returning shared layout page as well

1 Answers