Partial View returning the full view instead of partial view contents

I had an odd result trying to return an ASP.NET MVC partial view from a controller after a POST request. The setup was simple.  I had a view that contained a partial view with a grid. Nothing fancy in the view:

@model IEnumerable<Models.Code>

<h2>Code Maintenance</h2>

@{     Html.RenderPartial("~/Views/_CodeTable.cshtml", Model); }

The partial view contained a table:

@model IEnumerable<Models.Code>

<table class="table table-striped table-bordered">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Code)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Code)
            </td>
            <td><a onclick="loadCode(this, '@item.Code')"></a></td>
        </tr>
    }
</table>

When the page loaded initially, everything was fine. But when I tried to update the partial view using some jQuery code, the I would get HTML results like so:

<h2>Code Maintenance</h2>

<h2>Code Maintenance</h2>

<table>
 <tr><td>1</td></tr>
 <tr><td>2</td></tr>
 <tr><td>3</td></tr>
</table>

There was also global code in the _layout.cshtml being returned as part of the partial view, though I am not showing that here. So basically, the partial view wasn’t being treated like a partial view, and was instead being treated like a view, and the “Code Maintenance” title, along with my _layout.cshtml code, was being displayed twice when it should have only been shown once.

The problem in this case was my controller. I was returning a view instead of a partial view. Here is wrong code:

        [HttpPost]
        public ActionResult Code(Code model) {
            List<Code> results = new List<Code>();
            ...
            return View(results);
        }

And here is the corrected code:

     [HttpPost]
     public ActionResult Code(Code model) {
         List<Code> results = new List<Code>();
         ...
         return PartialView("_table", results);
     }

In case you are curious, here is how I loaded the code in jQuery:

function updateCode(id) {

    var data = { id: id };

    $.ajax({
        url: uri + 'MyController/UpdateCode',
        type: 'POST',
        cache: false,
        async: false,
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function (partialViewResult) {
            $("#results").html(partialViewResult);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('Error saving the code');
        }
    });
}
Advertisements
  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: