回答!MVC4 Ajax.ActionLink Breaks
好吧,我感到非常新
MVC4
和我仍然在
Ajax
的学习阶段,所以我真的可以使用一些帮助,这一个....我在它的工作越多,混乱就愈大。 :(这里我们去吧!
我有一个小应用程序,我正在使用作为练习。我主要关注的是“雇员”页面,其中包含一张表格,显示我组成的员工列表。员工新来查看他们关于部分,也有展示他们的工作位置和起始日期,然后两个列(一个用于编辑和一个用于删除)的关于和编辑环节的工作现在我试图做的是得到Ajax
删除链接拉起一个模块(我建立)模块d isplay a PartialView
。在PartialView
内部是一个小表,其中包含所选雇员的信息和带有两个按钮的Ajax
表格(删除和取消)。删除按钮从列表中删除选定的员工,关闭和模块,并用新的员工替换旧的员工列表。取消按钮只需关闭模块。除了当我点击一个链接删除另一个员工(不刷新页面)之外,几乎所有的工作都是有效的,我必须点击链接两次(或者在某些情况下,什么都不会发生)。我现在一直在这件事上做了一件事。这是一团糟,我认为我没有以最好的方式做到这一点。我粘贴了我认为是相关的代码(这仍然相当多)。如果您需要更多提供可能的答案,请让我知道〜谢谢。
注意:我已经尝试过使用.click()
以外的方法,但都没有以我想要的方式工作。所以除非你知道更好的方法来执行这些方法,不要担心试图建议这些方法。只是为了节省你所有的时间。
EmployeesController:删除
[HttpGet]
public ActionResult Delete(int id = 0)
{
var model = db.Employees.ToList().Where(m => m.ID == id);
if (model == null)
{
return HttpNotFound();
}
return PartialView("_Delete", model);
}
[HttpPost, ActionName("Delete")]
public PartialViewResult DeleteConfirmed(int id = 0)
{
Employee update = db.Employees.Find(id);
db.Employees.Remove(update);
db.SaveChanges();
return PartialView("_Employees", db.Employees.ToList());
}
脚本文件:模块
$(function() {
var openModule = function() {
$("div[id = 'moduleBG']").attr("style", "display: inline");
var width = $("div[id = 'body']").width();
$("div[id = 'delete']").attr("style", "width: " + width + "px");
};
var closeModule = function() {
$("div[id = 'moduleBG']").attr("style", "display: none");
return false;
};
var ajaxSubmit = function() {
$("div[id = 'moduleBG']").attr("style", "display: none");
};
$("a[name = 'module']").on("click", openModule);
$("input[id = 'cancelBtn']").click(closeModule);
$("input[id = 'deleteBtn']").click(ajaxSubmit);
});
管窥:_delete
@model IEnumerable<SiPrac.Models.Employee>
<div id="delete">
<div class="alertHeader">Are you sure you want to delete this?</div>
<table class="emp" style="display: inline-block">
<tr>
<th>@Html.DisplayNameFor(model => model.EmployeeName)</th>
<th>@Html.DisplayNameFor(model => model.Title)</th>
<th>@Html.DisplayNameFor(model => model.DateStarted)</th>
</tr>
@foreach (var item in Model)
{
string[] name = item.EmployeeName.Split(' ');
string first = name[0];
string last = name[1].Substring(0, 1);
string full = first + " " + last + ".";
<tr>
<td>@full</td>
<td>@Html.DisplayFor(modelItem => item.Title)</td>
<td>@String.Format("{0: MM/dd/yyyy}", item.DateStarted)</td>
</tr>
}
</table>
@foreach (var item in Model)
{
using (Ajax.BeginForm("Delete", "Delete", new { id = item.ID },
new AjaxOptions()
{
HttpMethod="post",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "empData",
Url = Url.Action("Delete")
}, new { @id = "submitForm", @method = "post" }))
{
<p>
<input id="deleteBtn" class="btn" type="submit" value="Delete" />
<input id="cancelBtn" class="btn" type="button" value="Cancel" />
</p>
}
}
</div>
@Scripts.Render("~/bundles/Module")
管窥:_Employees(这ActionLink
不到foreach
)
@model IEnumerable<SiPrac.Models.Employee>
<div id="empList">
<table class="emp">
<tr>
<th>@Html.DisplayNameFor(model => model.EmployeeName)</th>
<th>@Html.DisplayNameFor(model => model.Title)</th>
<th>@Html.DisplayNameFor(model => model.DateStarted)</th>
</tr>
@foreach (var item in Model)
{
// Code to shorten name to just First Name and Last Initial
// Cleans up the table to display nicely
string[] name = item.EmployeeName.Split(' ');
string first = name[0];
string last = name[1].Substring(0, 1);
string full = first + " " + last + ".";
<tr>
<td>@Html.ActionLink(full, "About", new { item.ID }, new { id = "empName" + item.ID, @class = "normLink" })</td>
<td>@item.Title</td>
<td>@String.Format("{0: MM/dd/yyyy}", item.DateStarted)</td>
<td>@Html.ActionLink("Edit", "Edit", new { id = item.ID }, new { @class = "normLink", @style = "width: inherit" })</td>
<td>@Ajax.ActionLink("Delete", "Delete", new { id = item.ID },
new AjaxOptions()
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "moduleBG"
}, new { @class = "normLink", @style = "width: inherit", @name = "module", @method = "get" })
</td>
</tr>
}
</table>
<div id="create">
<div class="createLink">
@Html.ActionLink("Add New Employee", "Create", null, new { @style = "width: inherit" })
</div>
<div class="clear"></div>
</div>
</div>
@Scripts.Render("~/bundles/Module")