Error in rendering partial view in asp.net mvc ajax

Question

In asp.net ajax, the partial view response replaces the html and only the partial view is rendered. In the below snippet, when I click the ActionLink "Steps", the partial view is returned and replaces the Details.cshtml.

What I need is this partial view should replace only the "main-content-div" div.

Please help out. Thanks

View: Details.cshtml

<div class="main-body">

<table>
    <tr>
        <td class="left-sidebar extended">

            @Ajax.ActionLink("Steps", "Steps", new { id = ViewBag.Id }, new AjaxOptions { AllowCache = false, UpdateTargetId = "main-content-div", InsertionMode=InsertionMode.Replace })
        </td>
        <td class="main-wrapper">

            <div class="main-content" id="main-content-div">
                This is the default stuff which I'll be replacing...
            </div>
        </td>
        <td class="right-sidebar"></td>
    </tr>

</table>

Action Method:

[HttpGet]
    public PartialViewResult Steps(string id)
    {
        //reading model from db
        return PartialView("~/Views/Author/Exercise/_StepsPartial.cshtml", Model);
    }

Partial View:

@model IEnumerable<Model>
<div>
    <div>
        <input type="text" />
    </div>
</div>

Probably because you do not have the correct scripts loaded, or they are in the wring order. — user3559349

James P James P · Accepted Answer · 2015-02-07T23:45:28

You need to add jquery.unobtrusive-ajax.min.js to your project for this to work.

Go to the Nuget Console Package Manager console and type:

Install-Package Microsoft.jQuery.Unobtrusive.Ajax

You then just need to add a reference at the top of your _Layout.cshtml or View to the relevant script:

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

Error in rendering partial view in asp.net mvc ajax

1 Answers