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 the ajax stuff I used to do before I started using MVC.

The goal is to have the partial view load INSIDE the div. Its just loading the partial view as the whole page, rather than inside of the Div.

Code is as follows:

Controller:

namespace LDP.WebUI.Controllers
{
    public class TestController : Controller
    {
        //
        // GET: /Test/

        public ActionResult Index()
        {
            return View();
        }
        public PartialViewResult Page1()
        {
            return PartialView("Page1");
        }
        public PartialViewResult Page2()
        {
            return PartialView("Page2");
        }
    }
}

Main View (Index): (I also tried "mainDiv" without the pound sign, wasen't sure which was right)

<script src="@Url.Content("~/Scripts/libs/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/libs/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#hideme').click(function () {
            $(this).hide();
        });
    });
</script>
<div>
@Ajax.ActionLink("Parial Page1", "Page1", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})
@Ajax.ActionLink("Parial Page2", "Page2", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})
<div id ='mainDiv'>

</div>
<button id ="hideme">Hide Me</button>
</div>

Partial View 1 (Page1.cshtml)

@{
    ViewBag.Title = "Page1";
}

<h2>Page1</h2>

Partial View 2 (Page2.cshtml)

@{
    ViewBag.Title = "Page2";
}

<h2>Page2</h2>

Update: I created a brand new MVC 4 project. This comes, by default, with Jquery 1.7.1 and the unobtrusive-ajax library from microsoft. It still loads the partial view in a new page...

Update: Not sure if this helps, but the following does achieve the result I want... But still doesn't solve the problem as to why this solution doesn't work

<button>load about</button>
<script type="text/javascript">
    $("button").click(function () {
        $("#mainDiv").load("Test/Page2");
    });

</script>
    enter code here

Solution 1

1. ditch # in UpdateTargetId = "#mainDiv"
2. make sure you have jquery.unobtrusive-ajax.min.js script referenced on your page.

Solution 2

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.

Solution 3

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');

  });

});

Solution 4

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

View more solutions