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

Have you tried by setting Layout = null in partial view ?

vijay
– vijay

2013-04-03 08:47:02 +00:00
Commented Apr 3, 2013 at 8:47 — vijay
– vijay, Commented Apr 3, 2013 at 8:47
how do you set layout = null?

kralco626
– kralco626

2013-04-03 16:39:04 +00:00
Commented Apr 3, 2013 at 16:39 — kralco626
– kralco626, Commented Apr 3, 2013 at 16:39
@{ ViewBag.Title = "Page2"; Layout = nulll; }

JoshYates1980
– JoshYates1980

2014-10-12 15:39:36 +00:00
Commented Oct 12, 2014 at 15:39 — JoshYates1980
– JoshYates1980, Commented Oct 12, 2014 at 15:39

Dmitry Efimenko · Accepted Answer · 2013-01-25 21:12:00Z

16

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

answered Jan 25, 2013 at 21:12

Dmitry Efimenko

11.2k7 gold badges65 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

kralco626 Over a year ago

Is this jquery file not included in the full jquery library? I'm including 1.8.2, do I need to get this file seperatly?

Dmitry Efimenko Over a year ago

it's not included. You can download it from Microsoft though.

kralco626 Over a year ago

OK i have it downloaded and included. I can sucessfully use a jquery function, but the it's still not loading the page1 and page2 inside the div... ideas?

Dmitry Efimenko Over a year ago

is there any run time errors? If you don't see any, you should try using Fiddler to see response in details

kralco626 Over a year ago

There is an error showing up "Sys is not defined" I don't have a variable called sys though...

Eric Eijkelenboom · Accepted Answer · 2013-04-03 12:05:14Z

13

+50

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.

answered Apr 3, 2013 at 12:05

Eric Eijkelenboom

7,0212 gold badges27 silver badges29 bronze badges

2 Comments

kralco626 Over a year ago

ya, so the past day or two I have been messing around with this test project testing a few POC with MVC and now I go back and try this feature and it works. I have no idea what I did to make it work. I sware it didn't work before... :/ But thanks for your help! Hopefully someone else can get value out of this post too

JoshYates1980 Over a year ago

works for me. This is great for passing parameters without displaying in URL!

Dave Alperovich · Accepted Answer · 2013-01-26 06:32:51Z

4

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

  });

});

edited Jan 26, 2013 at 6:32

answered Jan 25, 2013 at 21:01

Dave Alperovich

32.6k8 gold badges82 silver badges101 bronze badges

Comments

Schanckopotamus · Accepted Answer · 2013-01-25 23:30:02Z

1

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

answered Jan 25, 2013 at 23:30

Schanckopotamus

7912 gold badges6 silver badges20 bronze badges

1 Comment

kralco626 Over a year ago

this produces the same result. The page shows up on a new page rather than in the result div.

Vincent Finn · Accepted Answer · 2013-04-30 15:42:29Z

0

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

answered Apr 30, 2013 at 15:42

Vincent Finn

12 bronze badges

Comments

Robert · Accepted Answer · 2013-07-22 15:28:29Z

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.

david · Accepted Answer · 2013-11-10 20:33:14Z

0

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.

answered Nov 10, 2013 at 20:33

david

11 bronze badge

Collectives™ on Stack Overflow

using Ajax for partial view loading in .NET MVC4

7 Answers 7

5 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related