MVC JqueryUi弹出细节和编辑 [英] MVC JqueryUi Popup For Detail And Edit

问题描述

我试图在网格JQUI对话框中显示细节和编辑模式（）但它不能正常工作。有些时候编辑弹出窗口工作一次然后在下一个编辑它在新标签页（窗口）中打开，当我点击编辑然后细节弹出窗口不显示。

 @ Html.ActionLink（编辑，编辑详细信息，管理员，新{CompanyID = @ item.Company_Id}，新{@class =edit_link}）
 
 @ Html.ActionLink（详细信息，公司详细信息，管理员，新{CompanyID = @ item.Company_Id}，新{@class =details-modal}）
 
 <   div     id   = 我的对话框   < span class =code-attribute> title   = 公司详细信息 >  
 
 <   / div  < span class =code-keyword>>  
 <   div     id   =  edit-dialog    title   = 编辑详细信息 >  
 
 < span class =code-keyword><   / div  >  
 <   script     type   =  text / javascript >  
 $（文档）。ready（ function （ ）{
 $（' ＃my-dialog'）。dialog（{
 autoOpen： false ，
 width： 600 ，
 height： 600 ，
可调整大小： false ，
 modal： true  
 
 
}）; 
 $（' ＃edit-dialog'）。dialog（{
 autoOpen ： false ，
宽度： 600 ，
 height： 600 ，
可调整大小： false ，
 modal： true  
 
 
}）; 
 $（ 。edit_link）。click（ function （e）{
  //   e.preventDefault（）;  
 $（' ＃edit-dialog'）。load（$（ this ）。attr（'  href'），< span class =code-keyword> function （）{
 
 $（' ＃edit-dialog'）。dialog（'  open'）; 
}）; 
 
 
 e.preventDefault（）; 
 
}）; 
 
 
 $（' 。details-modal'）。 click（ function （e）{
  var  theURL = $（ this ）。attr（'  href'）; 
 
 $（' ＃my-dialog'）。load（theURL， function （）{
 $（ this ）。dialog（'   open'）; 
 
  //   e.preventDefault（）;  
}）; 
 
 
 e.preventDefault（）; 
}）; 
 
}）; 
 
 <   /   script  >  

解决方案

（ document ）。ready（ function （）{

（' ＃my-dialog'）。dialog（{
autoOpen： false ，
宽度： 600 ，
height： 600 ，
可调整大小： false ，
modal： true


}）;

（' ＃edit-dialog'）。dialog（{
autoOpen： false ，
wi dth： 600 ，
height： 600 ，
可调整大小： false ，
modal： true


}）;

I am trying To Show Details And Edit Mode In JQUI Dialog For Grid() But Its Not Working Properly .Some Times Edit Popup Is Work For once Then on Next Edit It opens in New Tab(Window) and when i click on Edit Then Detail Popup Doesn't Appear.

 @Html.ActionLink("Edit", "EditDetails", "Admin", new { CompanyID = @item.Company_Id }, new { @class = "edit_link" })

  @Html.ActionLink("Detail", "CompanyDetails", "Admin", new { CompanyID = @item.Company_Id }, new { @class = "details-modal" })

 <div id="my-dialog" title="Company Details">

</div>
<div id="edit-dialog" title="Edit Details">

</div>
    <script type="text/javascript">
        $(document).ready(function () {
       $('#my-dialog').dialog({
           autoOpen: false,
           width: 600,
           height: 600,
           resizable: false,
           modal: true


       });
       $('#edit-dialog').dialog({
           autoOpen: false,
           width: 600,
           height: 600,
           resizable: false,
           modal: true


       });
       $(".edit_link").click(function (e) {
           //e.preventDefault();
           $('#edit-dialog').load($(this).attr('href'),function (){

           $('#edit-dialog').dialog('open');
            });


         e.preventDefault();

       });


       $('.details-modal').click(function (e) {
           var theURL = $(this).attr('href');

           $('#my-dialog').load(theURL, function () {
               $(this).dialog('open');

         //      e.preventDefault();
           });


         e.preventDefault();
       });

    });

</script>

解决方案

(document).ready(function () {

('#my-dialog').dialog({ autoOpen: false, width: 600, height: 600, resizable: false, modal: true });

('#edit-dialog').dialog({ autoOpen: false, width: 600, height: 600, resizable: false, modal: true });

这篇关于MVC JqueryUi弹出细节和编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！