MVC 5 Bearbeiten Bootstrap Modal Popup

Question

Ich habe folgende Ansicht

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

Und dann die Vorlage

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

ein neues Produkt Werke hinzufügen, aber jetzt möchte ich auf die Schaltfläche Bearbeiten ändern das Binden row item zum Boostrap Popup und öffnet es dann zur Bearbeitung.

Die aktuelle Methode, die ich versuche, ist mit dem ActionLink, der dann das ausgewählte Produkt nimmt und es an ProductViewModel.NewProduct bindet, das funktioniert jetzt aber mein Problem ist, ich muss die ganze Seite neu laden und die Tabelle neu auffüllen und dann irgendwie Öffne das Boostrap Modal.

So ist meine Frage Wie kann ich das ausgewählte Produkt in den Modal binden und zeigen dann die Modal ein Postback tun withoud mit oder ohne die aktuelle Seite

Answer 1

neu zu laden würde ich AJAX mit empfehlen und ein einzelnes "Edit" -Modal, das gelöscht und neu gefüllt würde, wenn der Benutzer für jede Zeile auf "Bearbeiten" klickt.

Im Wesentlichen haben Sie eine Teilansicht, die über AJAX aufgerufen und auf die Seite injiziert wird, die Methode wird einen Parameter von productId haben.

Vorlage

Bitte beachten Sie die wichtigen Teil der Onclick-Attribut der Schaltfläche Bearbeiten ist hier.

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

Fügen Sie Folgendes zu Ihrer Top-Level-Ansicht

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

Teilansicht

Ihre Teilansicht wird so etwas wie dieses

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