在MVC中打开Bootstrap模态窗口 [英] Opening a Bootstrap Modal Window in MVC
本文介绍了在MVC中打开Bootstrap模态窗口的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
Hello Guyz,
我正在尝试在MVC中打开一个Bootstrap模态窗口。
但还没有成功。
以下是jQuery代码:
< script type = text / javascript >
$(document).ready(function(){
$('。viewInfo')。click(function(){
调试器;
var url = $(this).attr('href'); // $('#signup')。data('url');
$ .get(url,function(data){
$('#signup')。html(data);
$('#signup')。modal('show ');
});
});
});
< / script >
部分查看:
< div id = myModal tabindex = - 1 style = background-color:#FFFFFF; margin:10%auto 0; width:50%; < span class =code-attribute> role = dialog aria-labelledby = myModalLabel < span class =code-attribute> aria-hidden = true >
< div class = modal-header >
< 按钮 type = button class = close data-dismiss = modal aria-隐藏 = true > ×< / button >
< h3 id = myModalLabel > 模态标题< / h3 >
< / div >
< div class = modal-body >
< p > 一个很好的身体... < / p >
< / div >
< div 类 = 模态页脚 >
< 按钮 class = btn data-dismiss = modal aria-隐藏 = true > 关闭< / button >
< 按钮 class = btn btn-primary > 保存更改< / button >
< / div >
< / div >
行动方式:
public ActionResult ShowDialog(int iBrandID = 0)
{
var data =(来自oDataContext.tblVehicleBrands中的tbl
,其中tbl.BrandID == iBrandID
select tbl).SingleOrDefault < tblVehicleBrand > ();
返回PartialView(数据);
}
@ Html.ActionLink(查看信息, ShowDialog,Home,new {id = @ vehiclBrand.BrandID},new {@class =viewInfo})
模态打开为整页。
任何帮助都将不胜感激。
谢谢,
Vinay
解决方案
(文件).ready(function(){
('。viewInfo')。click(function(){
debugger;
var url =
(此).attr( 'HREF'); //
Hello Guyz,
I am trying to Open a Bootstrap Modal Window in MVC.
But no success yet.
Below is the jQuery code:
<script type="text/javascript">
$(document).ready(function () {
$('.viewInfo').click(function () {
debugger;
var url = $(this).attr('href');//$('#signup').data('url');
$.get(url, function (data) {
$('#signup').html(data);
$('#signup').modal('show');
});
});
});
</script>
Partial View :
<div id="myModal" tabindex="-1" style="background-color: #FFFFFF;margin: 10% auto 0;width: 50%;" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
Action Method:
public ActionResult ShowDialog(int iBrandID = 0)
{
var data = (from tbl in oDataContext.tblVehicleBrands
where tbl.BrandID == iBrandID
select tbl).SingleOrDefault<tblVehicleBrand>();
return PartialView(data);
}
@Html.ActionLink("View Info", "ShowDialog", "Home", new { id = @vehiclBrand.BrandID }, new { @class = "viewInfo"})
Modal is opening as full page.
Any help would be appreciated.
Thanks,
Vinay
解决方案
(document).ready(function () {
('.viewInfo').click(function () { debugger; var url =
(this).attr('href');//
这篇关于在MVC中打开Bootstrap模态窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文