[英]How to call a partial view within a Modal using Jquery
I have a list of products and you want to display a modal window to edit the parameters of these products 我有一个产品列表,您想显示一个模式窗口来编辑这些产品的参数
for this you have in each row a button that calls the modal .... 为此,在每一行中都有一个调用模式...的按钮。
my Edit button in Index.cshtml: 我在Index.cshtml中的“编辑”按钮:
<td>
<a href="#" class="btn btn-outline-warning" onclick="EditarProducto(@item.Kn_CodigoProducto)">Editar </a>
</td>
my script in Index.cshtml: 我在Index.cshtml中的脚本:
<script>
var EditarProducto = function (codigoProducto) {
var url = "/Productoes/EditarProducto?Kn_CodigoProducto="+codigoProducto;
$("#EditModalBody").load(url, function () {
$("#myModalEditar").modal("show");
})
}
</script>
my modal Bootstrap in Index view: 我在索引视图中的模式引导程序:
<div class="modal fade" id="myModalEditar">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Editar Producto</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="EditModalBody">
</div>
</div>
</div>
</div>
my ActionResult in controller: 我的ActionResult在控制器中:
public ActionResult EditarProducto (int Kn_CodigoProducto)
{
Producto model = new Producto();
if(Kn_CodigoProducto >= 0)
{
var producto = db.Productoes.Where(c => c.Kn_CodigoProducto == Kn_CodigoProducto).FirstOrDefault();
model.v_Nombre = producto.v_Nombre;
}
return PartialView("_PartialEditar", model);
}
and my partial view that receives the model sent from the controller: 我的局部视图接收从控制器发送的模型:
@model Dominio.Producto
<div class="jumbotron">
<label>Esto es una prueba @Model.v_Nombre</label>
</div>
I have the partial view inside the folder along with the Index.cshtml view 我在文件夹内有局部视图以及Index.cshtml视图
Also I have referenced the corresponding scripts, what is happening? 我也参考了相应的脚本,这是怎么回事? What is missing? 什么东西少了? It is the first time that I work with partial and modal views ... am I doing it correctly? 这是我第一次使用部分视图和模态视图...我做对了吗?
Expected behavior: when you click on the edit button, the modal opens 预期的行为:当您单击编辑按钮时,模式将打开
Behavior obtained: although when clicking on the edit button it enters the action of my controller, it does not show the modal 获得的行为:尽管单击“编辑”按钮时它输入了控制器的动作,但未显示模式
any help for me? 对我有帮助吗?
Instead of this: 代替这个:
<script>
var EditarProducto = function (codigoProducto) {
var url = "/Productoes/EditarProducto?Kn_CodigoProducto="+codigoProducto;
$("#EditModalBody").load(url, function () {
$("#myModalEditar").modal("show");
})
}
</script>
Can you try this: 你可以尝试一下:
<script>
var EditarProducto = function (codigoProducto) {
var url = "/Productoes/EditarProducto?Kn_CodigoProducto="+codigoProducto;
$.ajax({
url: url,
type: 'GET',
success: function (result) {
$('#EditModalBody').html(result);
$("#myModalEditar").modal("show");
},
error: function (xhr, status) {
alert(status);
}
});
}
</script>
您无需编写jquery即可调用模式弹出窗口,而可以使用数据切换和数据目标属性。
<a href="#" class="btn btn-outline-warning" data-toggle="modal" data-target="#myModalEditar">Editar </a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.