Jak użyć modemu bootstrap do edycji danych tabeli w MVC?

Question

Mam tabelę w widoku MVC, który wyświetla szczegóły pracownika. Chciałbym dodać funkcję edycji, ale zamiast otwierać ją na nowej stronie, chciałbym ją pokazać przy użyciu modemu bootstrap. (http://twitter.github.com/bootstrap/javascript.html#modals)

Nie sądzę, że muszę używać ajax, ponieważ dane są już dostępne na stronie. Myślę, że potrzebuję jakiegoś kodu jQuery lub brzytwy, aby przekazać dane wybranego pracownika do modemu ładowania początkowego i wyświetlić go na tym samym ekranie. Poniżej znajduje się mój kod. Każda pomoc będzie wielce ceniona. Dzięki

@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

Istnieją rzeczywiście 2 możliwości: z AJAX lub bez. Jeśli chcesz to zrobić bez AJAX, możesz zasubskrybować zdarzenie click linku Edit, a następnie skopiować wartości ze stołu do modala i na końcu pokazać modal.

Więc zacznij dając swój link edit jakąś klasę:

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

że można subskrybować:

$('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; 
}); 

ta zakłada, że ​​dałeś odpowiednich klas CSS do <td> elementów i wejścia pola w swoim modalu.

---

Jeśli chcesz użyć AJAX można wygenerować link tak:

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

a następnie zapisać się do zdarzenia click tego przycisku i wywołanie żądania AJAX:

$('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; 
}); 

będziesz mieć prosty symbol zastępczy dla modalu w widoku głównym, który będzie zawierał szczegóły:

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

Akcja kontrolera, który zostanie trafiony powinien przynieść rekord pracownika przy użyciu identyfikatora się dpass go do częściowego widzenia:

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

i wreszcie odpowiadający częściowej:

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

oczywiście będziesz również trzeba zawijać pola wejściowe do Html.BeginForm, które pozwolą Ci wysłać zaktualizowane dane pracownika do serwera. Może również zajść potrzeba AJAXify tego formularza, jeśli chcesz pozostać na tej samej stronie.