using Ajax for partial view loading in .NET MVC4

Question

I\'m trying to follow the post here, which may very well be wrong, to learn a little more about partial view loading in MVC. I know the basics of MVC but want to do more of

Answer 1

I typically load partials like this using JQuery

$( document ).ready(function() {

  $("#lnkPage1").click(function( event ) {

    $('#mainDiv').load('Test/Pag1');

  });

  $("#lnkPage2").click(function( event ) {

    $('#mainDiv').load('Test/Pag2');

  });

});

Answer 2

@using (Ajax.BeginForm("AjaxViewCall", "Home", new AjaxOptions { UpdateTargetId = "result" }))   
{
    <p>
        <input type="submit" value="Ajax Form Action" />
    </p>
}

<div id="result></div>

On the button click it should call the Action that returns a PartialView. You dont need the '#' in your Ajax.BeginForm call.

Answer 3

I copied your code into a brand new MVC4 project and it works fine.

See screenshot of the solution:

Hope this will give you a hint on what could be wrong.

Answer 4

load json data or table partial view. not full format view.

success:function(data){
    alert(data);
    debugger;
    ('#div_id').data(data);
}

here, returned data is json data or data like

data

. use alert to check the data.

Answer 5

I got this exact same issue; loading the partial view as the whole page rather than in the defined div.

I was incorrectly presuming that my _Layout.cshtml was including the jquery.unobtrusive-ajax.js file as I didn't understand what the Bundles thingy(?) was doing. I thought it was being added by Bundles.

In my _Layout.cshtml View it defines @RenderSection("scripts", required: false) Which in English is; it's optional to include a section in your view called @scripts. So no error is thrown if you don't include it (@section scripts) but the symptom is that the Ajax just renders in a new page if you don't.

To fix it: put the following in your view (I put it below the ...ViewBag.Title; })

@section scripts{
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
}

Sorry if my explanation is a bit rudimentary, I'm a bit new to this. Hoping this helps someone.

Answer 6

Only issue I had with original example was the \lib\ in script src path. Default MVC 4 Web app will put js files in "Scripts", not "Scripts\Lib". Your screen shot example is correct.

<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" 

Also in the original example - putting in ViewBag.Title will cause this to not work:

@{
    ViewBag.Title = "Some Title";
}