I'm trying to play around with MVC4 and ajax but I'm having problems with the simple sample I followed. Instead of just updating the partial view within the main view, it seems to be overwriting the main view with the "partial" view's content.
Here is what I did:
1. Added the following to in the Index.cshtml (from Views\Home):
<p>
@Ajax.ActionLink("Click here to see latest review.", "LatestReview",
new AjaxOptions
{
UpdateTargetId = "latestReview",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET",
LoadingElementId = "progress"
})
</p>
<div id="latestReview">
</div>
<div id="progress">
<img src="@Url.Content("~/Images/loading.gif")" alt="Loading..." />
</div>
2. I created a view in the Shared Folder i.e. _Review.cshtml with the following basic code:
I think that's it! Sorry I've lost the url in question that had the instructions, but basically when I run this, it simply overwrites the entire page with the _Review.cshtml which is suppose to be only replacing the "Review" div on the main page. Also I've
noticed that I used a progress animated gif in the sample and this also doesn't work. It just waits for 2 seconds and eventually overwrites my main page with the _Review.cshtml
Are the JavaScript files needed for MVC Ajax included? If not, it will still work as if you dind't have ajax, which explains the behavior you describe.
The problem is back and I have not idea what I've done to break it. I still have the reference mentioned above but now my partial view is once again overwritting the whole page instead of just inserting this view into a specific div.
I'm not 100% if it is related, but I've been playing around with the jquery datepicker and maybe introducing render.script in some other place may have changed the overall behaviour of my layout.
Now some code did change, but I've been cutting/copy/pasting all over the place and no luck I'm afraid.
My index view page lists all the records and it has a ajax link associated with each entry. I had a couple of @Script.Render at the top of the page, but I've had to disable them as they now generate errors. I believe this is related to having it already defined somewhere else and I assume this is referring to the _layout.cshtml. Below are the 2 Scripts.Render that are commented out in my index.cshtml.
Any one got any ideas as to why this is no longer working? I've tried to restore my code the way it was before include the jquery datepicker, but I must be missing something as even after I've changed it, it still no longer works. It either throws errors
or overwrite the whole page rather than just the section in the div.
tfierens
Member
6 Points
30 Posts
MVC4 and Ajax - Partial view replacing full page
Nov 14, 2012 02:43 AM|LINK
Hi,
I'm trying to play around with MVC4 and ajax but I'm having problems with the simple sample I followed. Instead of just updating the partial view within the main view, it seems to be overwriting the main view with the "partial" view's content.
Here is what I did:
1. Added the following to in the Index.cshtml (from Views\Home):
<p> @Ajax.ActionLink("Click here to see latest review.", "LatestReview", new AjaxOptions { UpdateTargetId = "latestReview", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", LoadingElementId = "progress" }) </p> <div id="latestReview"> </div> <div id="progress"> <img src="@Url.Content("~/Images/loading.gif")" alt="Loading..." /> </div>2. I created a view in the Shared Folder i.e. _Review.cshtml with the following basic code:
@model CarWebTest.Core.Models.CarObject <h2>_Review</h2> <div id="_Review" class="_Review"> <h4>@Model.Description</h4> <span>@Model.Brand</span> </div>3. In the application's controller, I added the following:
public PartialViewResult LatestReview() { Thread.Sleep(2000); ... ... return PartialView("_Review", carObjects.FirstOrDefault()); }I think that's it! Sorry I've lost the url in question that had the instructions, but basically when I run this, it simply overwrites the entire page with the _Review.cshtml which is suppose to be only replacing the "Review" div on the main page. Also I've noticed that I used a progress animated gif in the sample and this also doesn't work. It just waits for 2 seconds and eventually overwrites my main page with the _Review.cshtml
Any ideas what I'm doing wrong?
Thanks.
BrockAllen
All-Star
27564 Points
4912 Posts
MVP
Re: MVC4 and Ajax - Partial view replacing full page
Nov 14, 2012 03:29 AM|LINK
Are the JavaScript files needed for MVC Ajax included? If not, it will still work as if you dind't have ajax, which explains the behavior you describe.
DevelopMentor | http://www.develop.com
thinktecture | http://www.thinktecture.com/
abdu292
Participant
1553 Points
371 Posts
Re: MVC4 and Ajax - Partial view replacing full page
Nov 14, 2012 05:43 AM|LINK
Check if you have another element in the main page which has the same id as latestReview
With best regards,
vietlongkg
Member
78 Points
26 Posts
Re: MVC4 and Ajax - Partial view replacing full page
Nov 14, 2012 08:15 AM|LINK
Hi, tfierens,
Your code is not wrong here, try to reference the
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>to the <head> tag of your Layout page or at the end of your .cshtml page and your code will work. The Ajax.ActionLink need this to work properly.
tfierens
Member
6 Points
30 Posts
Re: MVC4 and Ajax - Partial view replacing full page
Feb 02, 2013 03:17 AM|LINK
Hi,
The problem is back and I have not idea what I've done to break it. I still have the reference mentioned above but now my partial view is once again overwritting the whole page instead of just inserting this view into a specific div.
I'm not 100% if it is related, but I've been playing around with the jquery datepicker and maybe introducing render.script in some other place may have changed the overall behaviour of my layout.
Now some code did change, but I've been cutting/copy/pasting all over the place and no luck I'm afraid.
The _layout.cshtml page looks like this:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>@ViewBag.Title - My ASP.NET MVC Application</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery.unobtrusive-ajax") </head> <body> <header> . . . </div> </div> </footer> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") @Styles.Render("~/Content/themes/base/css") @RenderSection("scripts", required: false) </body> </html>My index view page lists all the records and it has a ajax link associated with each entry. I had a couple of @Script.Render at the top of the page, but I've had to disable them as they now generate errors. I believe this is related to having it already defined somewhere else and I assume this is referring to the _layout.cshtml. Below are the 2 Scripts.Render that are commented out in my index.cshtml.
@*@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryval")*@Here is the the ajax link associated with each entry:
@Ajax.ActionLink("Details", "Details", new { CompanyId = item.CompanyId }, new AjaxOptions { UpdateTargetId = "CompanyDetails", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" })and further down the page I have the following:
Any one got any ideas as to why this is no longer working? I've tried to restore my code the way it was before include the jquery datepicker, but I must be missing something as even after I've changed it, it still no longer works. It either throws errors or overwrite the whole page rather than just the section in the div.
Thanks.