[英]How to put Partial View inside Bootstrap Modal?
I want to put a Partial View inside a Bootstrap Modal, 我想将一个局部视图放在一个Bootstrap模态中,
This is the JQuery code I'm using: 这是我正在使用的JQuery代码:
function CreateEmployeeModal()
{
var url = $("#btnCreateEmployeeModal").data("mine");
$.ajax({
type: 'get',
url: url
}).success(function (result) {
$(".modal-body").html(result)
$("#MyModal").modal('show')
}).error(function () {
alert("didn't work");
})
}
And this is the Modal code inside the _Layout
file: 这是
_Layout
文件中的Modal代码:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" id="divModalBody">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
I'm firing the modal using this button from the Index
page, I've created the data-mine attribute to save the url to the Action Method that is returning the PartialView: 我正在使用
Index
页面中的这个按钮触发模态,我创建了data-mine属性以将url保存到返回PartialView的Action Method:
<input type="button" class="aslink modal-link" data-toggle="modal"
data-target="#myModal" id="btnCreateEmployeeModal" value="Open Modal" data-mine="@Url.Action("CreateUsingModal")">
This is the controller action method I have to return the Partial View: 这是我必须返回部分视图的控制器操作方法:
public PartialViewResult CreateUsingModal()
{
return PartialView();
}
The operation is having success in ajax, but the modal doesn't show... 该操作在ajax中取得了成功,但模式没有显示......
I'll assume your GET endpoint (your method) is returning raw HTML. 我假设您的GET端点(您的方法)正在返回原始HTML。 A better way of doing this would be for your method to return your data in JSON format and then use that data to populate your modal window:
更好的方法是让您的方法以JSON格式返回数据,然后使用该数据填充模式窗口:
function CreateEmployeeModal()
{
var url = $("#btnCreateEmployeeModal").data("mine");
$.ajax({
type: 'get',
url: url
}).success(function (result) {
console.log(result); //better than alert
$("#textboxCorrespondingToValue").val(result.valueCorrespondingToTextbox);
$("#MyModal").modal('show');
}).error(function () {
alert("didn't work");
})
}
This way, if you even need to change the html you don't have to change anything in your server side code 这样,如果您甚至需要更改html,则不必更改服务器端代码中的任何内容
我有一个错误...,我应该使用小写而不是大写的模态的ID ...正确的方法是: $("#myModal").modal('show')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.