带有选项卡的 mvc3 模态对话框

Question

我在我的项目中创建了一个模态对话框，我可以在模态对话框中加载局部视图/视图，问题在于视图上我有 3 个选项卡，每个选项卡都引用另一个局部视图。当我单击选项卡时，它会在父页面（具有模态对话框链接的页面）中带来相关的局部视图，而不是在模态对话框内切换选项卡。 有人遇到过这个问题吗？

如果我能查看任何帮助或类似示例，我将不胜感激。

这是我的代码 jQuery(document).ready(function () {

        $('.trigger').live('click', function (event)
         { 
              var id = $(this).attr('rel');    
                 var dialogBox = $("<div>");
                       $(dialogBox).dialog({   
                               autoOpen: false,
                               resizable: true,
                               title: 'Test Modal Dialog',
                               modal: true,
                               show: "blind",
                               hide: "blind", 
                               open: function (event, ui) {

                                         $(this).load('<%=Url.Action("action1","controllerName")%>');
                                                                           } 



                                     });  
                                       $(dialogBox).dialog('open');
                                   });

然后我有 4 个部分视图，第一个是 action1：

    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<NeboAlertManagement.Models.model>" %>

" type="文本/javascript"> " type="文本/javascript"> " type="文本/javascript"> " type="文本/javascript">

        <div id="tabContainer">
         <ul id="menu"> 


          <li><%= Html.ActionLink("Home", "action2", "controllername")%></li>
          <li><%= Html.ActionLink("Products", "action3", "controllername")%></li>
          <li><%= Html.ActionLink("Contact Us", "action4", "controllername")%></li>


      <%--    <li><%= Html.RenderPartial("action2")%></li>
          <li><%= Html.RenderPartial("action3")%></li>
          <li><%= Html.RenderPartial( "action4")%></li>--%>


        </ul>
        </div>
        <% } %>

其他三个部分视图是简单的测试视图，但如果有帮助，我可以发布它们！

谢谢！

Answer 1

您应该为您的链接 - 选项卡提供一个“触发器”类，以便 jquery live 可以捕获它们。

Html.ActionLink("Text", "Action", new { controller = "Home" }, new { @class = "trigger" })

并在点击处理程序的顶部使用

 $('.trigger').live('click', function (event)
 { 
     event.preventDefault()
     var uriToLoad = $(this).attr('href');

在将值加载到弹出窗口之前 - 确保使用相同的弹出窗口。因为现在您每次都创建新的弹出窗口。所以：

// popup already present
if($('#mypopupid').length > 0 && $('#mypopupid').dialog("isOpen")) {
    $('#mypopupid').load(uriToLoad);
} else { // rest of the code - give popup id
  var dialogBox = $('<div id="mypopupid" />')
}

如果弹出窗口已经存在，则使用它，如果没有打开新的。