Wie wird das Bootstrap-Modal zum Bearbeiten der Tabellendaten in MVC verwendet?

Question

Ich habe eine Tabelle in der MVC-Ansicht, die Mitarbeiterdetails anzeigt. Ich möchte eine Bearbeitungsfunktionalität hinzufügen, aber anstatt sie auf einer neuen Seite zu öffnen, möchte ich sie mit einem Bootstrap-Modal anzeigen.()

Ich glaube nicht, dass ich Ajax verwenden muss, da die Daten bereits auf der Seite verfügbar sind. Ich denke, ich brauche einen JQuery- oder Rasierklingen-Code, um die Daten des ausgewählten Mitarbeiters an das Bootstrap-Modal zu übergeben und es auf demselben Bildschirm anzuzeigen. Unten ist mein Code. Jede Hilfe würde sehr geschätzt werden. Danke

@Foreach(var item in Model.Employees) 
{ 
<tr> 
    <td>@User.Identity.Name 
      </td> 
      <td>@item.FirstName 
      </td>....other columns 
<td><a href="#myModal" role="button" class="btn" data-toggle="modal">Edit</a> 
    <td> 
    </tr>........other rows 
} 
**Bootstrap Modal** 


<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 

    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Edit Employee</h3> 
    </div> 

    <div class="modal-body"> 
    <p>Selected Employee details go here with textbox, dropdown, etc...</p> 
    </div> 

    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

Answer 1

Es gibt in der Tat 2 Möglichkeiten: mit oder ohne AJAX. Wenn Sie dies ohne AJAX tun möchten, können Sie das Click-Ereignis des Edit-Links abonnieren und dann die Werte aus der Tabelle in das Modal kopieren und schließlich das Modal anzeigen.

beginnen also von Ihrem Link Bearbeiten etwas Klasse geben:

<a href="#" class="btn edit">Edit</a> 

, die Sie abonnieren können:

$('a.edit').on('click', function() { 
    var myModal = $('#myModal'); 

    // now get the values from the table 
    var firstName = $(this).closest('tr').find('td.firstName').html(); 
    var lastName = $(this).closest('tr').find('td.lastName').html(); 
    .... 

    // and set them in the modal: 
    $('.firstName', myModal).val(firstName); 
    $('.lastNameName', myModal).val(lastName); 
    .... 

    // and finally show the modal 
    myModal.modal({ show: true }); 

    return false; 
}); 

Dies setzt voraus, dass Sie die richtige CSS-Klassen zu den <td> Elemente gegeben haben und dem Eingang Felder in Ihrem Modal.

---

Wenn Sie wollen AJAX verwenden Sie den Link so erzeugen könnten:

@Html.ActionLink("Edit", "Edit", "Employees", new { id = employee.Id }, new { @class = "btn edit" }) 

und dann auf das Click-Ereignis Sie diese Schaltfläche abonnieren und lösen den AJAX-Request:

$('a.edit').on('click', function() { 
    $.ajax({ 
     url: this.href, 
     type: 'GET', 
     cache: false, 
     success: function(result) { 
      $('#myModal').html(result).find('.modal').modal({ 
       show: true 
      }); 
     } 
    }); 

    return false; 
}); 

Sie haben einen einfachen Platzhalter für das Modal in Ihrer Hauptansicht, die die Details beherbergen wird:

<div id="myModal"></div> 

Die Controller-Aktion, die getroffen wird, soll den Mitarbeiterdatensatz unter Verwendung der ID-einen dpass es zu einer Teilansicht holen:

public ActionResult Edit(int id) 
{ 
    Employee employee = repository.Get(id); 
    EmployeeViewModel model = Mapper.Map<Employee, EmployeeViewModel>(employee); 
    return PartialView(model); 
} 

und schließlich die entsprechenden Teil:

@model EmployeeViewModel 

<div class="modal hide fade"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h3>Edit Employee</h3> 
    </div> 
    <div class="modal-body"> 
     <div> 
      @Html.LabelFor(x => x.FirstName) 
      @Html.EditorFor(x => x.FirstName) 
     </div> 
     <div> 
      @Html.LabelFor(x => x.LastName) 
      @Html.EditorFor(x => x.LastName) 
     </div> 
     ... 
    </div> 
    <div class="modal-footer"> 
     <a href="#" class="btn btn-primary" data-dismiss="modal">Close</a> 
     <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

Natürlich werden Sie Außerdem müssen Sie die Eingabefelder in eine Html.BeginForm umbrechen, mit der Sie die aktualisierten Details des Mitarbeiters an den Server senden können. Es kann auch erforderlich sein, dieses Formular zu bestätigen, wenn Sie auf derselben Seite bleiben möchten.