MVC 5 Bearbeiten Sie Bootstrap Modal Popup
Habe ich die 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">×</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>
Hinzufügen eines neuen Produkt arbeitet, aber das will ich jetzt ändern, die Taste "Bearbeiten" Binden Sie die Zeile Element der Boostrap-Popup und dann öffnet es zum Bearbeiten.
Die aktuelle Methode, die ich bin versucht, mit dem ActionLink, die nimmt dann das ausgewählte Produkt und bindet es an ProductViewModel.NewProduct, die funktioniert, aber jetzt mein problem ist, ich muss einen reload der gesamten Seite und Auffüllen der Tabelle und dann irgendwie öffnen der Boostrap-Modal.
Also meine Frage ist
Wie kann ich Binden das Ausgewählte Produkt in den Modalen und dann zeigen die Modalen withoud sich nicht um ein postback oder die zimmerreserviereung, ohne das die aktuelle Seite neu laden
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich würde empfehlen, mit AJAX und eine einzelne 'Bearbeiten' - modal, die würde gelöscht werden und neu aufgefüllt, wenn der Benutzer klickt auf 'Bearbeiten' für jede Zeile.
Im wesentlichen werden Sie eine teilweise Ansicht, die aufgerufen werden über AJAX und spritzten auf die Seite, und die Methode hat einen parameter productId.
Vorlage
Bitte beachten Sie den wichtigen Teil hier ist das onclick-Attribut der Schaltfläche "Bearbeiten".
Javascript
Fügen Sie den folgenden, um Ihre top-level-Sicht
Teilansicht
Ihre partielle Ansicht in etwa so Aussehen