阿贾克斯与asp.net mvc的局部视图无法正常工作 [英] Ajax with asp.net mvc Partial view is not working correctly
本文介绍了阿贾克斯与asp.net mvc的局部视图无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图做AJAX一个简单的例子与MVC，但其无法正常工作
我根据Wrox的，专业的asp.net mvc的3本书，第8章，复数视线阿贾克斯的视频。
我将粘贴相关code文件的code在这里，我想可能是用脚本问题，但我真的不知道。
_layout.csthml（脚本局部视图和非强制性节末）
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8/＆GT;
＆LT;标题＆GT; @ ViewBag.Title＆LT; /标题＆GT;
@ Html.Partial（_ CSS）＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV CLASS =页＆GT;
＆LT;报头GT;
＆LT; DIV ID =标题＆GT;
＆LT; H1＆GT;伊娃1.0 LT; / H1＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =logindisplay＆GT;
@ Html.Partial（_ LogOnPartial）
＆LT; / DIV＆GT; ＆LT;＆导航GT;
＆LT; UL ID =菜单＆GT;
@if（Request.IsAuthenticated）{
＆LT;立GT; @ Html.ActionLink（仪表板，索引，家庭）＆LT; /李＆GT;
＆LT;立GT; @ Html.ActionLink（位置，索引，位置）＆LT; /李＆GT;
＆LT;立GT; @ Html.ActionLink（展望，位置，UserPositionPosition）＆LT; /李＆GT;
＆LT;立GT; @ Html.ActionLink（展望史，位置，UserPositionPosition）＆LT; /李＆GT;
＆LT;立GT; @ Html.ActionLink（技术访谈，位置，UserPositionPosition）＆LT; /李＆GT;
＆LT;立GT; @ Html.ActionLink（经理访谈，位置，UserPositionPosition）＆LT; /李＆GT;
＆LT;立GT; @ Html.ActionLink（现有员工，位置，UserPositionPosition）＆LT; /李＆GT;
＆LT;立GT; @ Html.ActionLink（现有员工史，位置，UserPositionPosition）＆LT; /李＆GT;
}
@ *其他
{
＆LT;立GT; @ Html.ActionLink（登录，登录，帐户）LT; /李＆GT;
} * @
＆LT; / UL＆GT;
＆LT; / NAV＆GT;
＆LT; /头＆GT;
＆lt;节ID =主＆GT;
@RenderBody（）
＆LT; /节＆gt;
＆LT;页脚GT＆;
＆LT; /页脚＆GT;
＆LT; / DIV＆GT;
@ Html.Partial（_脚本）
@RenderSection（脚本，FALSE）
＆LT; /身体GT;
＆LT; / HTML＆GT;
_scripts.cshtml＆LT;脚本SRC =http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
Index.cshtml（这里我想实现AJAX效果）
@model的ICollection＆LT; Data.Model.Position＆GT;@ {
ViewBag.Title =指数;
布局=〜/查看/共享/ _Layout.cshtml
}@section脚本{
＆LT;脚本SRC =http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
}＆LT; H2＆GT;指数＆LT; / H＆GT;＆所述p为H.;
@ Html.ActionLink（新建，创建）＆所述; / P＆GT;
＆LT; DIV ID =dailydeal＆GT;
@ Ajax.ActionLink（点击此处查看今天的特别！，创建，
位置，
新AjaxOptions {
UpdateTargetId =dailydeal
InsertionMode = InsertionMode.Replace，
列举HTTPMethod =POST
LoadingElementDuration = 5000，
LoadingElementId =进步
}）
＆LT; / DIV＆GT;＆LT; DIV ID =进步＆GT;
载入中...
＆LT; / DIV＆GT;
＆LT;表＆gt;
＆所述; TR＆GT;
＆LT;第i个
名称
＆LT; /第i
＆LT;第i个
yearsExperienceRequired
＆LT; /第i
＆LT;第i个
操作
＆LT; /第i
＆LT; / TR＆GT;@foreach（以型号VAR项）{
＆所述; TR＆GT;
＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.name）
＆LT; / TD＆GT;
＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.yearsExperienceRequired）
＆LT; / TD＆GT;
＆所述; TD＆GT;
@ Html.ActionLink（编辑，编辑，新{ID = item.PositionID}）|
@ Html.ActionLink（详细信息，详细信息，新{ID = item.PositionID}）|
@ Html.ActionLink（删除，删除，新{ID = item.PositionID}）
＆LT; / TD＆GT;
＆LT; / TR＆GT;
}＆LT; /表＆gt;
_Create.cshtml（与创建表单局部视图）@ {
ViewBag.Title =创建;
布局=〜/查看/共享/ _Layout.cshtml
}＆LT; H2＆GT;创建＆LT; H2＆GT;@using（Html.BeginForm（））{
@ Html.ValidationSummary（真）
＆LT;＆字段集GT;
＆LT;传奇＆GT;＆位置LT; /传说＆GT; ＆LT; DIV CLASS =编辑标记＆GT;
@ Html.LabelFor（型号=＆GT; model.name）
＆LT; / DIV＆GT;
＆LT; DIV CLASS =主编场＆GT;
@ Html.EditorFor（型号=＆GT; model.name）
@ Html.ValidationMessageFor（型号=＆GT; model.name）
＆LT; / DIV＆GT; ＆LT; DIV CLASS =编辑标记＆GT;
@ Html.LabelFor（型号=＆GT; model.yearsExperienceRequired）
＆LT; / DIV＆GT;
＆LT; DIV CLASS =主编场＆GT;
@ Html.EditorFor（型号=＆GT; model.yearsExperienceRequired）
@ Html.ValidationMessageFor（型号=＆GT; model.yearsExperienceRequired）
＆LT; / DIV＆GT; ＆所述p为H.;
＆LT;输入类型=提交值=创建/＆GT;
＆所述; / P＆GT;
＆LT; /字段集＆GT;
}＆LT; DIV＆GT;
@ Html.ActionLink（返回目录，索引）
＆LT; / DIV＆GT;
位置控制器方法
///＆LT;总结＆gt;
///创建位置的形式
///＆LT; /总结＆gt;
///＆LT;＆回报GT;＆LT; /回报＆GT;
公共PartialViewResult的Create（）
{
Thread.sleep代码（2000）;
返回PartialView（_创建）;
}
解决方案
有关阿贾克斯。* 佣工（如Ajax.ActionLink）工作确保您已引用在 jquery.unobtrusive-ajax.js 脚本：
＆LT;脚本的src =@ Url.Content（〜/脚本/ jquery.unobtrusive-ajax.js）TYPE =文/ JavaScript的＆GT;＆LT; /脚本＆GT;
然后使用Firebug或Chrome开发人员工具来检查AJAX请求，看看它为什么可能失败的可能原因。
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");
}
解决方案
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.
这篇关于阿贾克斯与asp.net mvc的局部视图无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
