MVC 5 Düzen Bootstrap Modal Popup

Question

Aşağıdaki görüntüle sahip

@model QuotationManagement.Models.ProductViewModel 

@{ 
    ViewBag.Title = "Products"; 
} 

<h2>Products</h2> 

<button id='newProduct' data-toggle="modal" data-target="#newProductModal" class="btn btn-primary">Add New Product</button> 
<br /> 
@using (Html.BeginForm("Products", "Main", FormMethod.Post, new { encType = "multipart/form-data", name = "myform" })) 
{ 
    <table class="table table-bordered table-condensed table-striped"> 
     <tr> 
      <th> 
       Name 
      </th> 
      <th> 
       Price 
      </th> 
      <th> 
       Gender 
      </th> 
      <td> 
       Action 
      </td> 
     </tr> 
     @Html.EditorFor(model => model.Products) 
    </table> 
} 

<div id="newProductModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      @using (Html.BeginForm("NewProduct", "Main", FormMethod.Post, new { encType = "multipart/form-data", name = "newProdutForm", @class = "form-group" })) 
      { 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title">New Product</h4> 
       </div> 
       <div class="modal-body"> 
        @Html.HiddenFor(model => model.NewProduct.Id) 
        Name: 
        @Html.TextBoxFor(model => model.NewProduct.Name, new { @class = "form-control" }) 
        Price: 
        @Html.TextBoxFor(model => model.NewProduct.Price, new { @class = "form-control" }) 
        Gender: 
        @Html.DropDownListFor(model => model.NewProduct.ForGender, new List<SelectListItem>() { new SelectListItem() { Text = "Male", Value = "1" }, new SelectListItem() { Text = "Female", Value = "2" } }, new { @class = "form-control" }) 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="submit" class="btn btn-primary">Save changes</button> 
       </div> 
      } 
     </div> 
    </div> 
</div> 

Ve sonra Şablon

@model QuotationManagement.Bussiness_Logic_Layer.Product 
<tr> 
    <td> 
     @Html.HiddenFor(model => model.Id) 
     @Html.DisplayFor(model => model.Name) 
    </td> 
    <td> 
     @Html.DisplayFor(model => model.Price) 
    </td> 
    <td> 
     @Html.DisplayFor(model => model.Gender) 
    </td> 
    <td> 
     @Html.ActionLink("Edit", "EditProduct","Main", Model ,new { @class = "btn btn-primary"}) 
    </td> 
</tr> 

yeni ürün çalışmalarını ekleme ama şimdi bağlayın düzenleme Düğme değiştirmek istiyorum Satır öğesini Boostrap Popup'a getirin ve sonra düzenleme için açar.

Çalıştığım yöntem, daha sonra seçilen Ürünü alıp ProductViewModel.NewProduct ürününe bağlayan ActionLink ile artık sorun değil, tüm sayfayı yeniden yüklemem ve tabloyu yeniden oluşturmam gerekecek Boostrap Modal'ı açın.

Benim soru ben için kalıcı olarak seçilen Ürünü Bağlama ve ardından Modal ben AJAX kullanarak öneriyoruz bir geri gönderme yapmak zorunda ya Geçerli sayfayı

Answer 1

yeniden yüklemek zorunda kalmadan withoud gösterilebileceği ve nasıl olduğunu Kullanıcı her satır için 'düzenle'yi tıkladığında temizlenecek ve yeniden düzenlenecek tek bir' Düzenleme 'modelidir. Temel olarak, AJAX ile çağrılacak ve sayfaya enjekte edilecek kısmi bir görünüme sahip olacaksınız, yöntemin productId parametresine sahip olması gerekir.

Şablon

burada önemli bir parçası düzenleme düğmesinin onclick özelliğidir unutmayınız.

@model QuotationManagement.Bussiness_Logic_Layer.Product 
<tr> 
    <td> 
     @Html.HiddenFor(model => model.Id) 
     @Html.DisplayFor(model => model.Name) 
    </td> 
    <td> 
     @Html.DisplayFor(model => model.Price) 
    </td> 
    <td> 
     @Html.DisplayFor(model => model.Gender) 
    </td> 
    <td> 
     <a href="#" onclick="editProduct(productId)" class="btn btn-primary">Edit</a>    
    </td> 
</tr> 

JavaScript

$(function() { 
    $('.editModal').modal(); 
}); 

function editProduct(productId) { 
    $.ajax({ 
     url: '/Product/GetProductDetailsModal/' + productId, // The method name + paramater 
     success: function(data) { 
      $('#modalWrapper').html(data); // This should be an empty div where you can inject your new html (the partial view) 
     } 
    }); 
} 

en üst düzey görünümü

<div id="modalWrapper"> 
    @* Inject form here *@ 
</div> 

Kısmi Görünüm

aşağıdakileri ekleyin

Sizin kısmi görünümü şimdiye kadar bunu yapmanın standart bir yol yoktu bu

@model ProductModel 
<div class="modal fade" id="editModal"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title">Edit</h4> 
      </div> 
      <div class="modal-body"> 
       <form> 
        <input type="text" id="ProductName" value="@Model.Name"/> 
        <input type="submit" /> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div>