Модальный диалог mvc3 с вкладками

Question

Я создал модальное диалоговое окно в своем проекте, и я могу загрузить частичное представление / представление в модальное диалоговое окно, проблема в представлении, у меня есть 3 вкладки, и каждая из них ссылается на другое частичное представление.когда я нажимаю на вкладки, это приводит к соответствующему частичному представлению на родительской странице (странице, на которой есть ссылка на модальное диалоговое окно) вместо простого перемещения по вкладкам в модальном диалоговом окне.Кто-нибудь сталкивался с этой проблемой раньше?

Я буду признателен за любую помощь или аналогичные примеры, которые я могу просмотреть.

это мой код jQuery (документ) .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 =" text / javascript ">" type = "text / javascript"> "type =" text /javascript ">" type = "text / 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" />')
}

Если всплывающее окно уже присутствует, используйте его, если не открываете новое.