2013-04-17 4 views
2

Я хочу, чтобы мой ajaxToolkit: TabContainer имел вкладку, которая позволяет пользователю добавлять еще одну вкладку. Я только хочу, чтобы она была обратной, когда они нажали на вкладку «+» и никто другой. я не могу показаться, чтобы остановить событие кипящий в Javascript:ajaxToolkit: TabContainer подтверждает при добавлении вкладки

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<script type="text/javascript"> 
    function checkTab(sender, e) { 
     if (sender.get_activeTab().get_headerText().replace("<span>", "").replace("</span>", "") != "+") { 
      cancelBubble(e); 

     } 
     else { 
      if (!confirm('Are you sure?')) { 
       cancelBubble(e); 
      } 
     } 
    } 
    function cancelBubble(e) { 
     if (e) { 
      e.stopPropagation(); 
     } 
     else { 
      window.event.cancelBubble = true; 
     } 
    } 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
    <asp:ScriptManager ID="ScriptManager" runat="server"> 
</asp:ScriptManager> 
    <ajaxToolkit:TabContainer ID="MyTabContainer" runat="server" OnActiveTabChanged="MyTabContainer_OnActiveTabChanged" 
     AutoPostBack="true" OnClientActiveTabChanged="checkTab"> 
     <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="My First Tab" Enabled="true"> 
      <ContentTemplate> 
       My first tab 
      </ContentTemplate> 
     </ajaxToolkit:TabPanel> 
     <ajaxToolkit:TabPanel ID="AddTabPanel" runat="server" HeaderText="+" Enabled="true"> 
      <ContentTemplate> 
      </ContentTemplate> 
     </ajaxToolkit:TabPanel> 
    </ajaxToolkit:TabContainer> 
</div> 
</form> 
</body> 
</html> 


protected void MyTabContainer_OnActiveTabChanged(object sender, EventArgs e) 
    { 
     TabPanel tp = new TabPanel(); 
     tp.HeaderText = "New Tab"; 
     MyTabContainer.Tabs.Add(tp); 
    } 

Спасибо, Alex

ответ

1

Вы можете использовать return false; в JavaScript, чтобы остановить PostBack. Так что я думаю, что все, что вам нужно это:

function checkTab(sender, e) 
{ 
    if (sender.get_activeTab().get_headerText().replace("<span>", "").replace("</span>", "") != "+") 
    { 
     return false; 
    } 
    else 
    { 
     return confirm('Are you sure?'); 
    } 
} 
+0

Ничего хорошей, она по-прежнему проходит через обратную передачу, поскольку это не позволит мне сделать: OnClientActiveTabChanged = "return checkTab" –

+0

@AlexDriver Я не работал с элементами управления AJAX Control Toolkit, но вы попробовали «OnClientActiveTabChanged =» return checkTab (this); »или просто« OnClientActiveTabChanged = »return checkTab(); «'? – jadarnel27

+0

SyntaxError: ошибка синтаксиса ... pPlacement ": false}, {" activeTabChanged ": return checkTab (this);}, null –

0

Добавить скрипт ниже для вашего проекта и добавить ссылку на в в самом низу страницы:

Sys.Extended.UI.TabPanel.prototype.raiseClick = function (eventArgs) { 
    var eh = this.get_events().getHandler("click"); 
    if (eh) { 
     eh(this, eventArgs); 
    } 
}; 

Sys.Extended.UI.TabPanel.prototype._header_onclick = function (e) { 
    e.preventDefault(); 
    var eventArgs = new Sys.CancelEventArgs(); 
    this.raiseClick(eventArgs); 

    if (eventArgs.get_cancel() === true) 
     return; 

    this.get_owner().set_activeTab(this); 
    this._setFocus(this); 
}; 

Теперь мы добавим возможностей для отмены нажмите на определенной вкладке на клиенте. Образец использования:

<script type="text/javascript"> 
     function AddTabOnClientClick(sender, args) { 
      args.set_cancel(!confirm("Are you sure?")); 
     } 
</script> 

<form id="form1" runat="server"> 
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> 
</ajaxToolkit:ToolkitScriptManager> 
<div> 
     <asp:UpdatePanel runat="server"> 
      <ContentTemplate> 
       <ajaxToolkit:TabContainer ID="MyTabContainer" runat="server" AutoPostBack="true" 
        ActiveTabIndex="0"> 
        <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="My First Tab" Enabled="true"> 
          <ContentTemplate> 
           My first tab 
          </ContentTemplate> 
        </ajaxToolkit:TabPanel> 
        <ajaxToolkit:TabPanel ID="AddTabPanel" runat="server" HeaderText="+" OnClientClick="AddTabOnClientClick"> 
          <ContentTemplate> 
          </ContentTemplate> 
        </ajaxToolkit:TabPanel> 
       </ajaxToolkit:TabContainer> 
      </ContentTemplate> 
     </asp:UpdatePanel> 
</div> 
</form> 
<script src="Scripts/MyAjaxToolkitExtensions.js" type="text/javascript"></script> 
0

Благодаря jadarnel27, это окончательное решение, которое я не пошел:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<script type="text/javascript"> 
<script type="text/javascript"> 
    function addTab() { 

     if (confirm('Are you sure?')) { 
      document.getElementById('<%=AddTabButton.ClientID %>').click(); 
     } 
    } 
</script> 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<asp:ScriptManager ID="ScriptManager" runat="server"> 
</asp:ScriptManager> 
<asp:Button ID = "AddTabButton" runat="server" OnClick="AddTabButton_OnClick" CssClass="DisplayNone" /> 
    <ajaxToolkit:TabContainer ID="MyTabContainer" runat="server"> 
    <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="My First Tab" Enabled="true"> 
     <ContentTemplate> 
      My first tab 
     </ContentTemplate> 
    </ajaxToolkit:TabPanel> 
    <ajaxToolkit:TabPanel ID="AddTabPanel" runat="server" HeaderText="+" Enabled="true" OnClientClick="addTab"> 
     <ContentTemplate> 
     </ContentTemplate> 
    </ajaxToolkit:TabPanel> 
</ajaxToolkit:TabContainer> 
</div> 
</form> 
</body> 
</html> 


protected void AddTabButton_OnClick(object sender, EventArgs e) 
    { 
     TabPanel tp = new TabPanel(); 
    tp.HeaderText = "New Tab"; 
    MyTabContainer.Tabs.Add(tp); 
    }