回答!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")