在导航到其他选项卡时发出警报 [英] Alert on navigation to other tab

问题描述

我的网页上有一个Ajax标签面板，其中有三个标签.
在第一个标签上，我有一些文本框.
现在，如果用户在更改任何文本框的值后导航到另一个选项卡，我想向用户提供警报消息.
我想尽可能使用Javascript执行此任务.
否则任何其他解决方案都是可以接受的.

下图显示了我的标签面板结构


< img src ="http://www.eggheadcafe.com/FileUpload/1619491694/myprofile.png"/>

I have an Ajax Tab Panel on my webpage with three tabs in it.
On my first tab i have some textboxes.
Now I want to give Alert message to user if user navigates to another tab after changing value of any of the text box.
I want to perform this task using Javascript if possible.
Or else any other solutions are acceptable.

Below Image shows my tab panel structure


<img src="http://www.eggheadcafe.com/FileUpload/1619491694/myprofile.png"/>

推荐答案

例如

For example

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager runat="server"></asp:ScriptManager>
    <script type="text/javascript" language="javascript">
        var changedElements = new Array();
        var previousTabIndex=null;
        function notification(obj, args) {
            if (previousTabIndex==null || previousTabIndex==0) {
                var msg = "Text changed in these elements ";
                var length = changedElements.length;
                for (i = 0; i < length; i++) {

                    msg = msg + ", " + changedElements[i].id;

                }

                if (msg.length > 31) {
                    alert(msg);
                }
                changedElements.length = 0;
            }
            previousTabIndex = obj.get_activeTabIndex();
        }
        function addToNotify(textbox) {
            changedElements.push(textbox);
        }
    </script>
    <asp:TabContainer  OnClientActiveTabChanged="notification" ID="TabContainer1" runat="server" ActiveTabIndex="0">
        <asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
            <ContentTemplate>
                <asp:TextBox runat="server" ClientIDMode="Static"   ID="Text101"></asp:TextBox>
                <asp:TextBox runat="server" ClientIDMode="Static"   ID="Text102"></asp:TextBox>
                <asp:TextBox runat="server" ClientIDMode="Static"   ID="Text103"></asp:TextBox>
                <asp:Button runat="server" ID="button101" />
            </ContentTemplate>
        </asp:TabPanel>
       <asp:TabPanel runat="server" HeaderText="TabPanel2" ID="TabPanel2">
            <ContentTemplate>
                <asp:TextBox runat="server" ID="TextBox1"></asp:TextBox>
            </ContentTemplate>
        </asp:TabPanel>

    </asp:TabContainer>

</asp:Content>

在page_load事件背后的代码中，为这些文本框分配有关blur事件的脚本

In the code behind page_load event assign those text boxes a script on the blur event

protected void Page_Load(object sender, EventArgs e)
 {
     Text101.Attributes.Add("onblur", "addToNotify(this);");
     Text102.Attributes.Add("onblur", "addToNotify(this);");
 }

现在，在选项卡容器的第一个面板中，在框1和2中输入一些文本，然后选择框3，然后单击第二个面板.您将收到警报.

Now in the tab container first panel enter some text in the box 1 and 2 and select box 3 and then click the second panel. You will get the alert.

这篇关于在导航到其他选项卡时发出警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！