在MVC中打开Bootstrap模态窗口 [英] Opening a Bootstrap Modal Window in MVC

问题描述

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屋！