3
Je suis en train de faire un exemple simple d'ajax avec mvc mais son ne fonctionne pas correctement Je suis basé sur wrox, professionnel asp.net mvc 3 livre, chapitre 8, et plusieurs ajax vidéo de vue.Ajax avec asp.net mvc Vue partielle ne fonctionne pas correctement
Je vais coller le code des fichiers de code pertinents ici, je pense que cela pourrait être un problème avec les scripts, mais je ne suis pas vraiment sûr.
_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");
}
Quels éléments javascript avez-vous référencés sur la page? –
Comment ça ne marche pas? – Buildstarted
Il rend la vue partielle, mais il remplace la page entière, le comportement que je m'attendais à ce qu'il montre cette vue partielle dans le div. Parce que cette page a une grille avec des données et le div, alors le résultat final je m'attendrais à montrer la grille et aussi le formulaire Créer. –