MVC'deki tablo verilerini düzenlemek için bootstrap modemi nasıl kullanılır?

Question

Ben çalışan ayrıntılarını görüntüleyen MVC görünümünde bir tablo var. Bir düzenleme işlevi eklemek istiyorum, ancak yeni bir sayfada açmak yerine, bir bootstrap modelini kullanarak göstermek istiyorum. veriler zaten sayfasında bulunmaktadır beri (http://twitter.github.com/bootstrap/javascript.html#modals)

Ben ajax kullanmak zorunda sanmıyorum. Sanırım seçilen çalışanın verilerini önyükleme modalına iletmek için jQuery ya da jilet koduna ihtiyacım var ve aynı ekranda açılır. Aşağıda benim kodum. Herhangi bir yardım büyük takdir edilecektir. Teşekkürler

@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

Gerçekten 2 olasılık vardır: AJAX ile veya olmadan. AJAX olmadan Düzenleme bağlantının click olayı abone olabilir ve daha sonra modal değerleri tablodan kopyalamak ve son olarak modal gösterdiğini yapmak istiyorsanız.

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

abone olabilir:

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

Bu <td> elemanları ve girişe doğru CSS sınıflarını verdik varsayar

Yani düzenleme bağlantısı bazı sınıf vererek başlamak modelinizde alanlar. Sonra

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

ve bu düğmeye click olayı abone ve AJAX isteği tetikler:

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

---

Eğer böyle linki oluşturabilir AJAX kullanmak istiyorsa

:

ayrıntıları barındıracak ana görünümünde modal için basit yer tutucu olacak

kısmi görünümüne kimliğinin, bir dpass o kullanarak çalışan kaydını getir gerektiğini zarar görecek kontrolör eylemi: nihayet

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

ve kısmi tekabül: Açıkçası

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

olacak Ayrıca sunucuya çalışanın güncellenmiş bilgi göndermek sağlayacak bir Html.BeginForm içine girdi alanlarını kaydırmak gerekir. Aynı sayfada kalmak istiyorsanız, bu formu AJAX olarak da değiştirmeniz gerekebilir.