脚本和部分视图的问题 [英] Problem with Script and partial View
问题描述
你好
我正在尝试创建一个视图：
Master-使用ASP.NET MVC详细说明 [ ^ ]
一切顺利，直到我开始做Ajax解决方案的一部分
我的控制器工作正常，因为我收到ID和部分视图员工的详细信息显示但是它假设出现在名为EmployeeDetails的潜水中，而不是我重定向到Employee / EmployeeDetails / id
我注意到控制台中的Firebug我收到警告：
[12：09：17.597]不推荐使用getPreventDefault（）。请改用defaultPrevented。 @ http：//localhost/Scripts/jquery-2.0.3.js：4923
任何人都会看到我可能犯的任何错误我在查看代码但什么都没有; /
部分视图应该显示在与解决方案相同的页面中但是没有它只是将我重定向到新页面任何css风格适用于其局部视图
< section id =EmployeemasterListclass =float-left>
< table>
@foreach（Model.Employee中的var项目）
{
< tr>
< td>
< div>
< h1> @ item.FullName< / h1>
< ul>
< li> @ item.Shift.Name< / li>
< li> @ item.City< / li>
< li> @ Html.ActionLink（详情，员工详细信息，
新{id = item.EmployeeID}，
新{@class =员工详情}） < /锂>
< / ul>
< / div>
< / td>
< / tr>
}
< / table>
< / section>
< div id =EmployeeDetails>< / div>
@section scripts {
< script>
$（function（）{
$（'。employee-details'）。on（'click'，function（e）{
$ .get（$（this）.prop（ 'href'），function（response）{
$（'＃EmployeeDetails'）。html（respnse）
}）;
e.defaultPrevented（）;
}）;
}）;
< / script>
}
那是Controller的一部分我在这里使用它是一个错误
public ActionResult EmployeeDetails（ int？id = null ）
{
员工雇员= db.Employees.Find（id）;
if （employee == null ）
{
return HttpNotFound（）;
}
返回 PartialView（ _EmployeeDetails，员工）;
}
这是部分视图的开始和结束我还添加了脚本最后，如果改变了一些东西，但结果与它或没有它是相同的我通过脚手架系统生成的视图作为局部视图
@model NEMS.Models.Employee
< div>
< h4>员工< / h4>
< hr />
< dl class =dl-horizontal>
< dt>
@ Html.DisplayNameFor（model => model.Gender.Name）
< / dt>
< dd>
@ Html.DisplayFor（model => model.Gender.Name）
< / dd>
< dt>
@ Html.DisplayNameFor（model => model.Shift.Name）
< / dt>
< dd>
@ Html.DisplayFor（model => model.Shift.Name）
< / dd>
...
< dt>
@ Html.DisplayNameFor（model => model.Photo）
< / dt>
< dd>
< img width =150height =150src =@ Url.Action（GetImage，Employee，new {Model.EmployeeID}）/>
< / dd>
< dt>
@ Html.DisplayNameFor（model => model.ImageMimeType）
< / dt>
< dd>
@ Html.DisplayFor（model => model.ImageMimeType）
< / dd>
< / dl>
< / div>
@section scripts {
< script>
$（function（）{
$（'。employee-details'）。on（'click'，function（e）{
$ .post（$（this）.prop（ 'href'），function（response）{
$（'＃EmployeeDetails'）。html（respnse）
}）;
e.defaultPrevented（）;
}）;
}）;
< / script>
}
我接受Sampath Lokuge的建议，我读了几篇关于实施Part的文章使用Ajax查看
我更改代码：
@model NEMS_Project。 Models.EmployeeMasterDetailesModel
@ {
ViewBag.Title =Index;
}
< script src =〜/ Scripts / jquery-2.0.3.js>< / script>
< script src =〜/ Scripts / jquery.unobtrusive-ajax.min.js>< / script>
< h2>员工< / h2>
< p>
@ Html.ActionLink（新建，创建）
< / p>
< section id =EmployeemasterListclass =float-left>
< table>
@foreach（Model.Employee中的var项目）
{
< tr>
< td>
< div>
< h1> @ item.FullName< / h1>
< ul>
< li> @ item.Shift.Name< / li>
< li> @ item.City< / li>
< li> @ Ajax.ActionLink（详细信息，EmployeeDetails，新{id = item.EmployeeID}，新AjaxOptions {InsertionMode = InsertionMode.Replace，UpdateTargetId =EmployeeDetiles}）< / li> ;
< / ul>
< / div>
< / td>
< / tr>
}
< / table>
< / section>
< div id =EmployeeDetails>< / div>
@section scripts {
< script type =text / javascript>
$ .ajax（{
url：'Employee / EmployeeDetails'，
contentType：'application / html; charset = utf-8'，
type：'GET'，
数据类型：'html'
}）
.success（函数（结果）{
$（'＃EmployeeDetails'）。html（result）;
}）
.error（函数（xhr，status）{
alert（status）;
}）
< / script>
}
现在加载我正在接收的索引和警报窗口在没有发生任何事情之后出现错误; /
我想我尝试了所有东西，但我没有得到任何东西：（
（function（）{
（'。employee-details'）。on（'click'，function（e）{
获得（
Hello
I'm trying to Create a View from :
Master-Details using ASP.NET MVC[^]
And everything was going well till i start doing Ajax part of the Solution
My controller is working OK as I receveing ID and the partial View with the details of the employee showing up but it suppose to show up in the dive called "EmployeeDetails" instead I'm redirect to Employee/EmployeeDetails/id
I notice on Firebug in console I get warning :
[12:09:17.597] Use of getPreventDefault() is deprecated. Use defaultPrevented instead. @ http://localhost/Scripts/jquery-2.0.3.js:4923
Any one see any mistakes I may done I'm Looking in the code but nothing ;/
the Partial View should show up in the same page as one the solution but no its just redirect me to new page without any css style apply as its just partial view
<section id="EmployeemasterList" class="float-left">
<table>
@foreach (var item in Model.Employee)
{
<tr>
<td>
<div>
<h1>@item.FullName</h1>
<ul>
<li>@item.Shift.Name</li>
<li>@item.City</li>
<li>@Html.ActionLink("Details", "EmployeeDetails",
new { id = item.EmployeeID },
new { @class = "employee-details"})</li>
</ul>
</div>
</td>
</tr>
}
</table>
</section>
<div id="EmployeeDetails"></div>
@section scripts {
<script>
$(function () {
$('.employee-details').on('click', function (e) {
$.get($(this).prop('href'), function (response) {
$('#EmployeeDetails').html(respnse)
});
e.defaultPrevented();
});
});
</script>
}
And that's The part of Controller I use in case its a mistake here
public ActionResult EmployeeDetails(int? id = null)
{
Employee employee = db.Employees.Find(id);
if (employee == null)
{
return HttpNotFound();
}
return PartialView("_EmployeeDetails", employee);
}
That's the start and end of the partial view i also add the script at end in case that change something but the result with it or without it is the same the view I generate by scaffolding system as partial view
@model NEMS.Models.Employee
<div>
<h4>Employee</h4>
<hr />
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.Gender.Name)
</dt>
<dd>
@Html.DisplayFor(model => model.Gender.Name)
</dd>
<dt>
@Html.DisplayNameFor(model => model.Shift.Name)
</dt>
<dd>
@Html.DisplayFor(model => model.Shift.Name)
</dd>
...
<dt>
@Html.DisplayNameFor(model => model.Photo)
</dt>
<dd>
<img width="150" height="150" src="@Url.Action("GetImage", "Employee", new { Model.EmployeeID })" />
</dd>
<dt>
@Html.DisplayNameFor(model => model.ImageMimeType)
</dt>
<dd>
@Html.DisplayFor(model => model.ImageMimeType)
</dd>
</dl>
</div>
@section scripts {
<script>
$(function () {
$('.employee-details').on('click', function (e) {
$.post($(this).prop('href'), function (response) {
$('#EmployeeDetails').html(respnse)
});
e.defaultPrevented();
});
});
</script>
}
I take Advice of Sampath Lokuge and i Read few Articles about implementing Part View using Ajax
I Change the Code :
@model NEMS_Project.Models.EmployeeMasterDetailesModel
@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-2.0.3.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<h2>Employee</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<section id="EmployeemasterList" class="float-left">
<table>
@foreach (var item in Model.Employee)
{
<tr>
<td>
<div>
<h1>@item.FullName</h1>
<ul>
<li>@item.Shift.Name</li>
<li>@item.City</li>
<li>@Ajax.ActionLink("Details", "EmployeeDetails", new { id = item.EmployeeID}, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "EmployeeDetiles" })</li>
</ul>
</div>
</td>
</tr>
}
</table>
</section>
<div id="EmployeeDetails"></div>
@section scripts {
<script type="text/javascript">
$.ajax({
url: 'Employee/EmployeeDetails',
contentType: 'application/html; charset=utf-8',
type: 'GET',
datatype: 'html'
})
.success(function (result) {
$('#EmployeeDetails').html(result);
})
.error(function(xhr, status){
alert(status);
})
</script>
}
Now on Loading of the Index I'm receiving and Alert Window with an Error after that nothing happening ;/
I think i try Everything and I'm getting no ware with that :(
(function () {
('.employee-details').on('click', function (e) {
.get(
这篇关于脚本和部分视图的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
