【发布时间】：2011-10-18 15:00:12
【问题描述】：
我正在尝试使用 mvc 做一个简单的 ajax 示例，但它无法正常工作 我基于 wrox，专业的 asp.net mvc 3 书，第 8 章，以及复数视觉 ajax 视频。
我将相关代码文件的代码贴在这里，我认为可能是脚本有问题但我不确定。
_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");
}
【问题讨论】：
-
您在页面上引用了哪些 javascript 项目？
-
它呈现部分视图但它替换了整个页面，我期望的行为是它在 div 中显示部分视图。因为该页面有一个包含数据和 div 的网格，所以我希望最终结果显示网格以及创建表单。
-
@MitchelSellers 我在布局引用的单独文件中有以下内容。 跨度>
-
@MitchelSellers，我已经编辑了问题并包含了我认为相关的所有文件，我仍然无法使其工作，我在位置控制器中放置了一个断点并执行该方法，但是我是没有 AJAX 效果，它应该显示 LOADING div 2 秒，但这没有发生。