CODEWITHSUNDEEP
jqueryasp.netajaxasp.net-mvcasp.net-mvc-4
kralco626
kralco626

Reputation: 8624

using Ajax for partial view loading in .NET MVC4

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

Upvotes: 16

Views: 43607

Answers (7)

david
david

Reputation: 1

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.

Upvotes: 0

Julian Rosebury
Julian Rosebury

Reputation: 61

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.

Upvotes: 0

Vincent Finn
Vincent Finn

Reputation: 1

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";
}

Upvotes: 0

Eric Eijkelenboom
Eric Eijkelenboom

Reputation: 7021

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

See screenshot of the solution:

Brand new MVC4 project with Ajax.ActionLink

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

Upvotes: 13

Dave Alperovich
Dave Alperovich

Reputation: 32490

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

  });

});

Upvotes: 4

Schanckopotamus
Schanckopotamus

Reputation: 791

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

Upvotes: 1

Dmitry Efimenko
Dmitry Efimenko

Reputation: 11203

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

Upvotes: 16

Related Questions