MVC 5 Modifier Bootstrap Modal Popup

J'ai la Vue suivante

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

Et puis le Modèle

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

Ajout d'un nouveau Produit fonctionne, mais maintenant, je veux changer le Bouton modifier pour Lier la ligne de l'élément pour le Bootstrap Popup et puis l'ouvre pour l'édition.

La méthode actuelle, je suis en train est avec le ActionLink qui prend alors le Produit choisi et le lie à ProductViewModel.NewProduct, qui fonctionne, mais maintenant mon problème est que j'ai besoin de recharger la page entière et de repeupler la table, puis en quelque sorte ouvert le Bootstrap Modal.

Donc ma question est
Comment puis-je Lier le Produit Sélectionné, le Modal et de montrer ensuite le Modal sans avoir à faire une publication ou sans avoir à recharger la page en cours

OriginalL'auteur Donald Jansen | 2015-05-06

  1. 14

    Je vous conseille d'utiliser AJAX et un seul "Modifier" modal qui serait effacé et remplis à nouveau lorsque l'utilisateur clique sur 'modifier' pour chaque ligne.

    Essentiellement, vous aurez une vue partielle qui sera appelée par AJAX et injecté sur la page, la méthode aura un paramètre de productId.

    Modèle

    Veuillez noter l'important est ici l'attribut onclick du bouton modifier.

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

    Ajouter les éléments suivants à votre affichage de niveau supérieur

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

    Vue Partielle

    Votre vue partielle va ressembler à quelque chose comme ceci

    @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>
    Je n'ai pas de moyen standard de le faire jusqu'à maintenant. C'est assez souple pour travailler sans beaucoup de modification dans toutes les situations que je rencontre.
    J'ai fait une légère modification de l'option Javascript de votre partie de code qui a fonctionné pour moi, mais cela a fonctionné merci
    eu le même problème.mais résolu par l'ajout de l' $(function() { $('.editModal').modal(); }); à l'intérieur de la réussite de la partie de la méthode ajax.

    OriginalL'auteur chxzy