[英]Ajax.Beginform works only once
我有一個部分的筆記視圖,我正在嘗試進行內聯編輯,保存按鈕只運行一次,但它在第一次提交后停止工作。 這是我的查看代碼:
<h4>Notes</h4>
<table class="table">
@foreach (var note in Model)
{
<tr>
<td style="width:150px;">@Html.DisplayFor(modelItem => note.CreatedOn)</td>
@if (ViewData["ShowNoteType"] == null || ((bool)ViewData["ShowNoteType"] == true))
{
<td style="width:120px;">@Html.DisplayFor(modelItem => note.NoteType)</td>
}
<td class="readOnlyProperty" data-note-id=@note.NoteID>@Html.DisplayFor(modelItem => note.LoggedBy)</td>
<td class="readOnlyProperty" data-note-id= @note.NoteID>@Html.DisplayFor(modelItem => note.Text)</td>
@using (Ajax.BeginForm("Edit", new { id = note.NoteID }, new AjaxOptions { HttpMethod = "POST", Url = "/Notes/Edit", UpdateTargetId = "noteslist", OnComplete = "OnNotesListReloaded" }, new { @role = "form", @class = "form-inline" }))
{
@Html.AntiForgeryToken()
<td class="editableProperty" style="display:none;" data-note-id=@note.NoteID>
<div class="form-group">
@Html.EnumDropDownListFor(modelItem => note.LoggedBy, htmlAttributes: new { @class = "form-control" })
</div>
</td>
<td class="editableProperty" style="display:none;" data-note-id=@note.NoteID>
<div class="form-group">
@Html.EditorFor(modelItem => note.Text, new { htmlAttributes = new { @class = "form-control" } })
</div>
</td>
@Html.HiddenFor(modelItem => note.NoteID)
@Html.HiddenFor(modelItem => note.CandidateID)
@Html.HiddenFor(modelItem => note.JobID)
@Html.HiddenFor(modelItem => note.ContactID)
<td class="editableProperty" style="display:none;" data-note-id=@note.NoteID>
<button type="submit" class="btn btn-default btn-sm save-note" title="Save">
<span class="glyphicon glyphicon-save" aria-hidden="true" />
</button>
</td>
}
<td><a class="btn btn-default edit-note" data-note-id=@note.NoteID ><span class="glyphicon glyphicon-edit" aria-hidden="true" /></a></td>
<td class="deletebutton" data-note-id=@note.NoteID>
@using (Ajax.BeginForm("Delete", new { id = note.NoteID }, new AjaxOptions { HttpMethod = "POST", Url = "/Notes/Delete", UpdateTargetId = "noteslist", OnComplete = "OnNotesListReloaded" }, new { @role = "form", @class = "form-inline" }))
{
@Html.AntiForgeryToken()
<input type="hidden" name="id" value="@note.NoteID" />
<input type="hidden" name="CandidateID" value="@ViewData["CandidateID"]" />
<input type="hidden" name="JobID" value="@ViewData["JobID"]" />
<input type="hidden" name="ContactID" value="@ViewData["ContactID"]" />
<button type="submit" class="btn btn-default btn-sm" title="Delete Note">
<span class="glyphicon glyphicon-trash" aria-hidden="true" />
</button>
}
</td>
</tr>
}
</table>
@section Scripts {
@Scripts.Render("~/bundles/custom")
}
保存按鈕只能完美運行一次。 我必須將dropdownlist和editorfor放在單獨的<td>
而不是將整個Ajax表單放在<td>
以便在編輯時將它們對齊。 當我把整個Ajax.Beginform放在<td>
它工作得很完美,但它根本不對齊。 所以任何人都可以幫助我使保存按鈕工作,字段對齊請
這是我的jquery代碼:
var OnNotesListReloaded = function () {
$(".edit-note").click(function (event) {
var elem = $(this).attr("data-note-id");
$(".edit-note[data-note-id=" + elem + "]").hide();
$(".readOnlyProperty[data-note-id=" + elem + "]").hide();
$(".editableProperty[data-note-id=" + elem + "]").show();
$(".deletebutton[data-note-id=" + elem + "]").hide();
});
}
$(document).ready(function () {
OnNotesListReloaded();
});
您可以使用其他方法來執行此操作。 讓我們從UI開始行動。
步驟1:僅在“For循環”的一側創建一個表單並將操作設置為“/ Notes / EditDelete”,不要擔心我們將在下一步中創建一個操作。
第2步:現在使用按鈕使用名稱中的操作,您也可以傳遞id以及正在編輯或刪除的記錄。
<input type="submit" value="Edit" name="action:Edit" class="btn btn-sm btn-default" />
<input type="submit" value="Delete" name="action:Delete" class="btn btn-sm btn-danger" />
第3步:現在創建動作過濾器
[AttributeUsage(AttributeTargets.Method, AllowMultiple = false, Inherited = true)]
public class MultipleActionsAttribute : ActionNameSelectorAttribute
{
public string Name { get; set; }
public string Argument { get; set; }
public override bool IsValidName(ControllerContext controllerContext, string actionName, MethodInfo methodInfo)
{
var isValidName = false;
var keyValue = string.Format("{0}:{1}", Name, Argument);
var value = controllerContext.Controller.ValueProvider.GetValue(keyValue);
if (value != null)
{
controllerContext.Controller.ControllerContext.RouteData.Values[Name] = Argument;
isValidName = true;
}
return isValidName;
}
}
第4步:在您的操作上方使用此過濾器:
[HttpPost]
[MultipleActions(Name = "action", Argument = "Edit")]
public ActionResult EditDelete(int id)
{
//Your edit code here
}
[HttpPost]
[MultipleActions(Name = "action", Argument = "Delete")]
public ActionResult EditDelete(int id) // you can pass the id to edit from view
{
//Your Delete code here
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.