Reputation: 33978
I am trying to do a simple example of ajax with mvc but its not working correctly I am based on wrox, professional asp.net mvc 3 book, chapter 8, and plural sight ajax video.
I will paste the code of the relevant code files here, I think it might be a problem with the scripts but I am not really sure.
_layout.csthml (Script partial view and non mandatory section at the end)
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
@Html.Partial("_css")
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>Eva 1.0</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
@if(Request.IsAuthenticated) {
<li> @Html.ActionLink("DashBoard", "Index", "Home")</li>
<li> @Html.ActionLink("Positions", "Index", "Position") </li>
<li> @Html.ActionLink("Prospects", "Position", "UserPositionPosition") </li>
<li> @Html.ActionLink("Prospect History", "Position", "UserPositionPosition") </li>
<li> @Html.ActionLink("Technical Interview", "Position", "UserPositionPosition") </li>
<li> @Html.ActionLink("Manager Interview", "Position", "UserPositionPosition") </li>
<li> @Html.ActionLink("Current Employees", "Position", "UserPositionPosition") </li>
<li> @Html.ActionLink("Current Employees History", "Position", "UserPositionPosition") </li>
}
@* else
{
<li> @Html.ActionLink("Log On", "LogOn", "Account") </li>
}*@
</ul>
</nav>
</header>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
</div>
@Html.Partial("_scripts")
@RenderSection("scripts", false)
</body>
</html>
_scripts.cshtml
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js" type="text/javascript"></script>
Index.cshtml (Where I am trying to achieve the ajax effect)
@model ICollection<Data.Model.Position>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts{
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<div id="dailydeal">
@Ajax.ActionLink("Click here to see today's special!", "Create",
"Position",
new AjaxOptions{
UpdateTargetId="dailydeal",
InsertionMode=InsertionMode.Replace,
HttpMethod="POST",
LoadingElementDuration=5000,
LoadingElementId="progress"
})
</div>
<div id="progress">
Loading...
</div>
<table>
<tr>
<th>
name
</th>
<th>
yearsExperienceRequired
</th>
<th>
Actions
</th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.name)
</td>
<td>
@Html.DisplayFor(modelItem => item.yearsExperienceRequired)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.PositionID }) |
@Html.ActionLink("Details", "Details", new { id = item.PositionID }) |
@Html.ActionLink("Delete", "Delete", new { id = item.PositionID })
</td>
</tr>
}
</table>
_Create.cshtml (Partial view with the create form)
@{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Create<h2>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>Position</legend>
<div class="editor-label">
@Html.LabelFor(model => model.name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.name)
@Html.ValidationMessageFor(model => model.name)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.yearsExperienceRequired)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.yearsExperienceRequired)
@Html.ValidationMessageFor(model => model.yearsExperienceRequired)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
Position Controller method
/// <summary>
/// Create form of the position
/// </summary>
/// <returns></returns>
public PartialViewResult Create()
{
Thread.Sleep(2000);
return PartialView("_Create");
}
Upvotes: 4
Views: 4144
Reputation: 444
Having the same problem, I updated the Microsoft.jQuery.Unobtrusive.Ajax package using NuGet as found in this helpfull post from mezoid
unobtrusive-ajax-form-for-partial-view
Now, the validation works perfectly within my partial view!
Upvotes: 1
Reputation: 7887
UpdateTargetId="dailydeal"
Where is that div? That div needs to exist to be updated.
http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.updatetargetid.aspx
Upvotes: 1
Reputation: 1038710
For Ajax.*
helpers (such as Ajax.ActionLink) to work make sure that you have referenced the jquery.unobtrusive-ajax.js
script:
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
Then use FireBug or Chrome Developer Tools to inspect the AJAX request and see any possible reasons why it might be failing.
Upvotes: 6