CODEWITHSUNDEEP
asp.netajaxasp.net-mvcasp.net-mvc-4asp.net-ajax
Mansoor
Mansoor

Reputation: 1284

Error in rendering partial view in asp.net mvc ajax

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>

Upvotes: 1

Views: 583

Answers (1)

James P
James P

Reputation: 2256

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>

Upvotes: 2

Related Questions