Instead of rending the partial view on the page, it loads on a new page. Here is my code:
CONTROLLER:
public ViewResult Index()
{
ViewBag.Batch = 0;
return View();
}
public PartialViewResult ViewMore(int batch)
{
ViewBag.Batch = batch;
var artist = db.Artists.ToList().OrderBy(x => x.Name).Skip(10 * batch).Take(10);
return PartialView("_ViewMoreArtist", artist);
}
VIEW (Index)
#Ajax.ActionLink("View More...",
"ViewMore", new { batch = ViewBag.Batch + 1}, new AjaxOptions
{
UpdateTargetId = "viewMore",
InsertionMode = InsertionMode.InsertAfter,
HttpMethod = "GET"
//,LoadingElementId = "progress"
})
<div id="viewMore"></div>
VIEWS - (_ViewMoreArtist)
#model IEnumerable
#foreach (var artist in Model)
{
#Html.ActionLink(artist.Name, "Browse", new { id = artist.ArtistId })
<br />
}
VIEWS - (_Layout)
<!DOCTYPE html> <html> <head>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript">/script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> </head> <body>
<div id="main">
#RenderBody()
</div>
</body> </html>
NOTES: I already added the jquery.unobtrusive-ajax.js on the _Layout... What I am trying to do here is using the sample MVCMusicStore project, I added page to view artist with 10 results and an option to view more result...
Things to verify:
The file jquery-1.4.4.min.js exists in the Scripts folder
The file jquery.unobtrusive-ajax.js exists in the Scripts folder.
You don't have any javascript errors in the debug console of your browser (FireBug recommended)
You have unobtrusive javascript ajax enabled in your web.config:
<appSettings>
...
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
Things to try:
Use a more recent version of jquery (at least 1.5), I am not sure that jquery.unobtrusive-ajax.js is compatible with jQuery 1.4.4.
Do you have _ViewMoreArtist.cshtml page ? In the code above I cant see it.
Here is a good blog which has a solution
Mostly the javascript files are outdated.
http://weblogs.asp.net/owscott/archive/2010/11/17/mvc-3-ajax-redirecting-instead-of-updating-div.aspx?CommentPosted=true#commentmessage
Related
In my index view I have several Ajax.ActionLinks displayed as shown in the code below. I am trying to render a partial view into DIV section when one of those links is clicked. Right now, it is rendering the partial as its own page. What am I doing incorrectly?
View
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
...Other HTML
<article class="border c-two" style="background-image: url('/Content/images/Fancy.jpg')">
<div style="opacity: 0;" class="fdw-background">
<h4 style="color:#fff;">Fancy Schmancy</h4>
<p class="fdw-port">
#Ajax.ActionLink("Go Now", "GotoStore", "Simulation", new { id = 1 }, new AjaxOptions { UpdateTargetId = "Rest", InsertionMode = InsertionMode.InsertAfter, HttpMethod = "GET" })<span class="vg-icon">→</span>
</p>
</div>
</article>
...other HTML
<div id="Rest"></div>
Controller
public PartialViewResult GotoStore(int id)
{
Store store = db.Stores.Find(id);
return PartialView(store);
}
I was able to get it working. The problem was where I added in the script source.
This:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
Needs to be placed inside your layout file towards the bottom like this:
#Scripts.Render("~/bundles/jquery")
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
#RenderSection("scripts", required: false)
I am trying to use Ajax.Actionlink to render a partial view. But it only redirects me to the partial view. I also added: <add key="UnobtrusiveJavaScriptEnabled" value="true" /> to webconfig. Anyone?
My layout.cshtml Scripts.render and script is in head tag. Ajax.actionlink and div is in body
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/Scripts/jqueries")
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
#Ajax.ActionLink("Ajax Click", "Document","Home", new AjaxOptions { UpdateTargetId = "result", InsertionMode = InsertionMode.Replace })
<div id="result">
</div>
Home controller:
public PartialViewResult Document()
{
return PartialView("Document", om);
}
My Document.cshtml
#model mymodel
#foreach (var item in Model)
{
<li>#Html.ActionLink(item.something, "Controller", "Action")</li>
}
Your jquery and unobtrusive-ajax should be at the bottom of the page, like this
</footer>
#Scripts.Render("~/bundles/jquery")
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
#RenderSection("scripts", required: false)
</body>
</html>
Information why can be found here
http://developer.yahoo.com/performance/rules.html/
Placing this at the wrong place, WILL result in errors
I am using Html Editor in MVC3 view to store article info as:
#using (Html.BeginForm())
{
...
#Html.TextAreaFor(model => model.OtherInformation, new { #id = "OtherInformation" })
...
}
<link href="#Url.Content("~/Content/jquery.cleditor.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery.cleditor.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.cleditor.xhtml.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$("#OtherInformation").cleditor();
</script>
and in controller I have written the code to save article as:
[ValidateInput(false)]
[HttpPost]
public ActionResult Create(Article article)
{
if (ModelState.IsValid)
{
article.EntryDate = DateTime.Now;
new ArticleService().SaveOrUpdateArticle(article);
return RedirectToAction("ArticleIndex");
}
return View(article);
}
This all works fine in IE,but when I run the same in Chrome then "OtherInformation" always go Null.
This problem was fixed in version 1.4.0.
I got a jquery reference in my _Layout.cshtml . It does not look like this is working in my Index.cshtml page though: the /Home/GetSquareRoot is not hit? (it works when I uncomment the jquery reference in the index.cshtml though)
ViewStart.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
Index.cshtml
#{
ViewBag.Title = "Home Page";
}
<h2>#ViewBag.Message</h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
http://asp.net/mvc</a>.
</p>
#*<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>*#
<script type="text/javascript">
function calculateSquareRoot(numberToCalculate) {
$.ajax({
type: 'GET',
url: '/Home/GetSquareRoot',
data: { number: numberToCalculate },
success: function (data) { alert(data.result); }
});
}
</script>
<button type="button" onclick="calculateSquareRoot(9);">
Calculate Square</button>
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
#RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
homecontroller
public JsonResult GetSquareRoot(long number)
{
var square = Math.Sqrt(number);
return Json(new { result = square }, JsonRequestBehavior.AllowGet);
}
It works when you have the jQuery reference commented out, because your _Layout.cshtml file has the reference as well (just stating the facts, I realise you probably know this).
This also means that you have your routing set up correctly and that there is nothing wrong with the URL '/Home/GetSquareRoot'
The code looks fine, the only unknown that I can see is that ../../Scripts/ actually goes to the same place as ~/Scripts/ (will depend on what the URL of your page looks like).
I would use Google Chrome to check for script errors on your page: go to your page, right click and 'inspect element' on the page, then check that you don't have any script errors (bottom right of the inspector will have a red circle if you do).
If you have script errors that could be stopping the AJAX call from running.
When referring to hard-coded content URLs in your application, it's always a good idea to use Url.Content.
So instead of this:
<script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
use this:
<script src="#Url.Content("~/Scripts/jquery-1.5.1-vsdoc.js")" type="text/javascript"></script>
This way the correct URL to the jQuery script file will always be used, no matter what the URL of the page is.
Try out this one...
public JsonResult GetSquareRoot(long? number)
{
var square = Math.Sqrt(number);
return Json(new { result = square }, JsonRequestBehavior.AllowGet);
}
in my ASP. Net MVC 3.0 Project.
I have Telerik Grid.
with in the grid cell I am loading content from partial view with a Ajax Form in it.
(for each Cell in one column of the grid)
when i submit that form.
Ajax form is opening new page instead of updating the target ID.
I am loading the required scripts
<script src="#Url.Content("~/Scripts/jquery-1.6.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
These scripts are loaded on master page (_Layout.cshtml)
My Web.config
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
I have used the Ajax forms at most of the places in this project.
It works perfect at all those places.
Any clue if i can submit ajax form from a telerik grid
More Details
Controller
public JsonResult AddRemoveThisLocation(int LocationID, FormCollection collection, string button)
{
return Json(new
{
success = _success,
message = _message
}, JsonRequestBehavior.AllowGet);
}
}
Partial View loaded in to the Telerik Grid using .loadContentfrom() method
#using(Ajax.BeginForm("AddRemoveThisLocation", "Controller", new { LocationID = Model.AddressID }, new AjaxOptions {
OnBegin="ValidateNumbers",
HttpMethod = "POST",
OnSuccess = "ShowSignUpStatus"} ))
{
#Html.TextBoxFor(model => model.Phone, new { id="phone"+Model.AddressID, name="Phone" })
<input type="submit" value="Add" class="button" name="button" id="#(Model.AddressID)" />
}
I had similar problem. adn the solution is confirm no repeated jQuery References
and check if these are loadin correctly.
<script src="#Url.Content("~/Scripts/jquery-1.6.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
That should fix your problem.
Try this:
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult AddRemoveThisLocation(int LocationID, FormCollection collection, string button)
{
return Json(new
{
success = _success,
message = _message
}, JsonRequestBehavior.AllowGet);
}
}