Ajax.Beginform работает только один раз

Question

У меня есть частичный вид заметок, где я пытаюсь сделать встроенное редактирование, кнопка сохранения работает отлично только один раз, но перестает работать после первого представления. вот мой взгляд код:

<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") 
} 

кнопку Сохранить отлично работает только один раз. , и я должен поместить раскрывающийся список и редактор в отдельный <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(); 

}); 

Answer 1

Вы можете использовать другой подход, чтобы сделать это. Давайте начнем с пользовательского интерфейса.
Шаг 1: Создать один вид только из стороны от «For Loop» и установить действие на «/ Notes/редактироватьудалить», не волнуйтесь, мы собираемся создать действие в следующем шаге.
Шаг 2: Теперь с кнопками используйте действие в названии что-то вроде этого, и вы также можете передать идентификатор, для которого запись редактируется или удаляется.

<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 
}