Menu
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");
}
509
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.
109
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
