MVC 5 Edycja Bootstrap Modal Popup

Question

Mam następujący pogląd

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

A potem Szablon

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

Dodawanie nowych prac produktu, ale teraz chcę zmienić przycisk Edytuj w celu związania do elementu Boostrap, a następnie otwiera go do edycji.

Obecna metoda, którą próbuję to ActionLink, która pobiera wybrany produkt i wiąże go z produktem ProductViewModel.NewProduct, który działa, ale teraz mój problem polega na tym, że będę musiał ponownie załadować całą stronę i ponownie zaludnić tabelę, a następnie jakoś otwórz Modulator Boostrap.

Więc moje pytanie jest Jak mogę powiązać wybranego produktu do modalne, a następnie pokazać modalne withoud konieczności zrobić odświeżenie strony lub bez konieczności przeładowania bieżącą stronę

Answer 1

polecam korzystania AJAX i pojedynczy mod "Edytuj", który zostałby wyczyszczony i ponownie wypełniony po kliknięciu przez użytkownika "edytuj" dla każdego wiersza.

Zasadniczo będziesz miał częściowy widok, który będzie wywoływany przez AJAX i wstrzyknięty na stronę, metoda będzie miała parametr productId.

Szablon

Uwaga Istotnym elementem jest tu atrybut onclick przycisku edycji.

@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) 
     } 
    }); 
} 

Dodaj następujące do widoku najwyższym poziomie

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

częściowym widokiem

Twój częściowy widok będzie wyglądać mniej więcej tak:

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