Wie man Modellinstanz von der Tabelle zum modalen Popup übergibt?

Question

Ich habe dieses Stück Code, der eine Tabelle von Datensätzen (Name und Info) generiert und jede Zeile sollte eine Bearbeitungsschaltfläche haben, die ein modales Popup öffnet, das es ermöglicht, Info-Abschnitt des Datensatzes zu bearbeiten.
1. HTML-Ansicht

@model Właściwy.Models.BoardViewModel 
... 
@foreach (var p in Model.LoansNumerable) 
       { 
       <tr> 
        <td>@p.Name</td> 
        <td>@p.Info</td> 
        <td><button 
onclick="javascript:openModal('ModalEdit')">Edit</button></td> 
       </tr> 

2. Die gleiche cshtml Datei aber der Code für modale Popup für die Bearbeitung von Datensätzen in der Tabelle oben

<div class="ModalEdit"> 
        @using (Html.BeginForm("Loan", "Controller", FormMethod.Post)) 
        { 
         <label>Edit info: </label> 
         @Html.EditorFor(x => x.LoanElement.Info)<br /> 
         <input type="submit" value="Edit" class="button- 
submit" formaction="~/Controller/Info/@Model.LoanElement"/> 
        } 
       </div> 

Wie ich Informationen über Datensatz passieren kann, die ich will Edit von Tabelle in 1. Stück Code, um die Modalität, die mir erlaubt, ausgewählte Datensatz aus der Tabelle und bearbeitet Teil des Datensatzes in der Modalität, an den Controller zu senden, um es in SQL-Datenbank? Weil "Controller/Info/@Model.LoanElement" Teil im modalen Code nur den bearbeiteten Teil übergibt, wird der Rest Nullen

Answer 1

Ich denke, dass Sie einen AJAX-Link in Ihrer HTML-Tabelle generieren sollten, um das Formular mit zu laden eine Teilansicht. So etwas wie das:

@foreach (var p in Model.LoansNumerable) 
{ 
    <tr> 
     <td>@p.Name</td> 
     <td>@p.Info</td> 
     <td> 
      @Ajax.ActionLink("Edit", "Edit", new { id = @p.Id }, new AjaxOptions() 
       { 
         InsertionMode = InsertionMode.Replace, 
        UpdateTargetId = "idOfContainerInsideModal" 
       }) 
     </td> 
    </tr> 
} 

Sie sollten eine Aktion bearbeiten, Rendering eine Teilansicht mit dem Formular.

public ActionResult Edit(int id) 
{ 
    var model = //get model from id 
    return PartialView("Edit", model); 
} 

Dann Ihre Ansicht bearbeiten mit einem Formular zu Ihrem Modell. Ich denke, dass Sie eine AjaxForm verwenden sollten, die den Wert übergibt, das modale schließt und die Tabelle aktualisiert, nachdem die Daten übermittelt werden.

@using (Ajax.BeginForm("PostEdit", new AjaxOptions 
    { 
     OnSuccess = "reload Page function", 
     HttpMethod = "POST" 
    })) 
{ 
     <label>Edit info: </label> 
    @Html.EditorFor(x => x.LoanElement.Info)<br /> 
    <input type="submit" value="Edit" class="button-submit"/> 
}