onbeforeunloadevent in Asp.net page how to implement

Question

0.00/5 (No votes)

See more:

Hi I have asp.net page which has only Gridveiw  I want to include a function  for Onbbeforeunloadevent, So I need to include some tags in body title of my html page. I am pasting my code below plz help me how or where to place this piece of code

HTML

<body onload="initForm();"  önbeforeunload="beforeUnloadForm();">

JavaScript

function beforeUnloadForm()
{
   if (window.hasChangesPending)
   {
      window.event.returnValue = "Pending changes have not been saved.";
   }
}

Below is my aps.net page

ASP.NET

%@ Page Title="" Language="C#" MasterPageFile="~/Master/Menu.master" AutoEventWireup="true"
    CodeFile="TestScriptComponentPages.aspx.cs" Inherits="TestScriptComponentPages" %>

<%@ MasterType VirtualPath="~/Master/Menu.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">



<script src="JQueryScripts/jquery.js" type="text/javascript"></script>
<script src="JQueryScripts/colResizable-1.3.min.js" type="text/javascript"></script>
<script src="JQueryScripts/jquery.cookie.js" type="text/javascript"></script>
 <script type="text/javascript" language="javascript">

     function beforeUnloadForm() {
         if (window.hasChangesPending) {
             window.event.returnValue = "Pending changes have not been saved.";
         }
     }

     $(document).ready(function () {
         if ($.cookie('colWidth') != null) {
             var columns = $.cookie('colWidth').split(',');
             var i = 0;
             $('.GridViewStyle th').each(function () {
                 $(this).width(columns[i++]);
             });
         }

         $(".GridViewStyle").colResizable({
             liveDrag: true,
             gripInnerHtml: "<div class='grip'></div>",
             draggingClass: "dragging",
             onResize: onSampleResized
         });

     });

     var onSampleResized = function (e) {
         var columns = $(e.currentTarget).find("th");
         var msg = "";
         columns.each(function () { msg += $(this).width() + ","; })
         $.cookie("colWidth", msg);
     }; 
</script> 
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div style="overflow: scroll; height: 573px; width: 1030px">
               <table>
            <tr>
                <td>
                    <asp:ImageButton ID="btnAdd" runat="server" ImageUrl="images/add.ico" CausesValidation="false"
                        OnClick="btnAdd_Click" />
                </td>
                <td>
                </td>
                <td>
                </td>
            </tr>
        </table>
        <asp:GridView ID="gvTestScriptComponent" runat="Server" CssClass="GridViewStyle" AutoGenerateColumns="False"
            CellPadding="4" ForeColor="Black" DataKeyNames="ComponentID"
            ShowFooter="true" Height="110px" Style="margin-right: 0px" Width="990px" BackColor="White"
            OnRowDataBound="gvTestScriptComponent_RowDataBound" AutoGenerateEditButton="True"
            OnRowEditing="gvTestScriptComponent_RowEditing" OnRowCancelingEdit="gvTestScriptComponent_RowCancelingEdit"
            OnRowUpdating="gvTestScriptComponent_RowUpdating" OnRowDeleted="gvTestScriptComponent_RowDeleted"
            BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" 
            OnRowCommand="gvTestScriptComponent_RowCommand">
            <Columns>
                <asp:TemplateField HeaderText="ComponentID" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:Label ID="lblComponentID" runat="server" Height="20px" Text='<%#Eval("ComponentID")%>'>  </asp:Label>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Center"></ItemStyle>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Options" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:ImageButton ID="btnDelete" runat="server" ImageUrl="images/delete.ico" CausesValidation="false"
                            CommandName="DeleteRow" OnClick="btnDelete_Click" />
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:ImageButton ID="btnSave" runat="server" ImageUrl="images/save.ico" CausesValidation="false"
                            CommandName="SaveRow" OnClick="btnSave_Click" />
                    </FooterTemplate>
                    <ItemStyle HorizontalAlign="Center"></ItemStyle>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="TestWindow/Frame Name" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:Label ID="lblTestWindow" runat="server" Height="20px" Text='<%#Eval("BrowserPage")%>'>  </asp:Label>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Left"></ItemStyle>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ddlTestWindow" runat="server" Visible="true" AutoPostBack="True"
                            OnSelectedIndexChanged="ddlTestWindow_SelectedIndexChanged">
                        </asp:DropDownList>
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:DropDownList ID="ddlFooterTestWindow" runat="server" Visible="true" AutoPostBack="True"
                            OnSelectedIndexChanged="ddlFooterTestWindow_SelectedIndexChanged">
                        </asp:DropDownList>
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Test Object" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:Label ID="lblTestObject" runat="server" Height="20px" Text='<%#Eval("ObjectName")%>'>  </asp:Label>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Left"></ItemStyle>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ddlTestObject" runat="server" Visible="true" AutoPostBack="True"
                            OnSelectedIndexChanged="ddlTestObject_SelectedIndexChanged" >
                        </asp:DropDownList>
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:DropDownList ID="ddlFooterTestObject" runat="server" Visible="true" AutoPostBack="True"
                            OnSelectedIndexChanged="ddlFooterTestObject_SelectedIndexChanged">
                        </asp:DropDownList>
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Test Operation" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:Label ID="lblTestOperation" runat="server" Height="20px" Text='<%#Eval("Action")%>'></asp:Label>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Left"></ItemStyle>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ddlTestOperation" runat="server" Visible="true">
                        </asp:DropDownList>
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:DropDownList ID="ddlFooterTestOperation" runat="server" Visible="true">
                        </asp:DropDownList>
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Test Data" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:Label ID="lblTestData" runat="server" Height="20px" Text='<%#Eval("TestData")%>'></asp:Label>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Left"></ItemStyle>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtTestData" runat="server" Text='<%# Bind("TestData") %>' Visible="true">
                        </asp:TextBox>
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtFooterTestData" runat="server" Visible="true"></asp:TextBox>
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="ReUseableOutputData" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:Label ID="lblReUseableOutputData" runat="server" Height="20px" Text='<%#Eval("ReUsableOutputData")%>'></asp:Label>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Left"></ItemStyle>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtReUseableOutputData" runat="server" Text='<%# Bind("ReUsableOutputData") %>'
                            Visible="true">
                        </asp:TextBox>
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtFooterReUseableOutputData" runat="server" Visible="true"></asp:TextBox>
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Step Description" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:Label ID="lblStepDescription" runat="server" Height="20px" Text='<%#Eval("Steps")%>'></asp:Label>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Left"></ItemStyle>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtStepDescription" runat="server" Text='<%# Bind("Steps") %>' Visible="true">
                        </asp:TextBox>
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtFooterStepDescription" runat="server" Visible="true"></asp:TextBox>
                    </FooterTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
            <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
            <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" HorizontalAlign="Justify"
                VerticalAlign="Middle" />
            <SortedAscendingCellStyle BackColor="#F7F7F7" />
            <SortedAscendingHeaderStyle BackColor="#4B4B4B" />
            <SortedDescendingCellStyle BackColor="#E5E5E5" />
            <SortedDescendingHeaderStyle BackColor="#242121" />
            <EmptyDataTemplate>
                <table>
                    <tr style="background-color: #999999;">
                        <th>
                            Option
                        </th>
                        <th>
                            Test Window
                        </th>
                        <th>
                            Test Object
                        </th>
                        <th>
                            Test Operation
                        </th>
                        <th>
                            Test Data
                        </th>
                        <th>
                            ReUseableOutputData
                        </th>
                        <th>
                            StepDescription
                        </th>
                    </tr>
                    <tr>
                        <td headers="Option">
                            <asp:ImageButton ID="btnSave" runat="server" ImageUrl="images/save.ico" CausesValidation="false"
                                CommandName="FirstSaveRow" OnClick="btnSave_Click" />
                        </td>
                        <td headers="Test Window">
                            <asp:DropDownList ID="ddlFooterTestWindow" runat="server" Visible="true" AutoPostBack="True"
                                OnSelectedIndexChanged="ddlFooterTestWindow_SelectedIndexChanged">
                            </asp:DropDownList>
                        </td>
                        <td headers="Test Object">
                            <asp:DropDownList ID="ddlFooterTestObject" runat="server" Visible="true" AutoPostBack="True"
                                OnSelectedIndexChanged="ddlFooterTestObject_SelectedIndexChanged">
                            </asp:DropDownList>
                        </td>
                        <td headers="Test Operation">
                            <asp:DropDownList ID="ddlFooterTestOperation" runat="server" Visible="true">
                            </asp:DropDownList>
                        </td>
                        <td headers="Test Data">
                            <asp:TextBox ID="txtFooterTestData" runat="server" Visible="true"></asp:TextBox>
                        </td>
                        <td headers="ReUseableOutputData">
                            <asp:TextBox ID="txtFooterReUseableOutputData" runat="server" Visible="true"></asp:TextBox>
                        </td>
                        <td headers="StepDescription">
                            <asp:TextBox ID="txtFooterStepDescription" runat="server" Visible="true"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </EmptyDataTemplate>
        </asp:GridView>
        <table>
            <tr>
                <td>
                    <asp:ImageButton ID="btnAdd1" runat="server" ImageUrl="images/add.ico" CausesValidation="false"
                        OnClick="btnAdd_Click" />
                </td>
            </tr>
        </table>
    </div>
</asp:Content>

Posted 19-Dec-13 2:15am

ShaHam11

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Jobless Creature · Answer 1 · 2013-12-19T06:25:00

Solution 1

In this scenario, since you cannot have BODY tag for content pages, you can try with
window.onbeforeunload
OR
window.onunload

This will fire before the page unloads. Just inside the SCRIPT section, you can write

C#

window.onbeforeunload = function ()
{
    alert('Unloading!!!')
    return message;
}

Posted 19-Dec-13 6:25am

Jobless Creature

Comments

ShaHam11 19-Dec-13 21:58pm

Thank you. I just have another problem as you told I just pasted the code write below my Javascript. It works partially. when I try to close the browser window it prompts with alert message. However after i click the Ok button window closes. I don't want to that happen, It should check if there is any changes to gridview and if any changes found then it should retain to the same page so that user can click on udpate or save link in my gridview.

Jobless Creature · Answer 2 · 2013-12-19T19:45:00

Ok, for this requirements, ou can consider the following points.

1. Implement OnKeyPress and OnKeyDown JS events to keep track of the changes. When there is a key press or key down, set a flag value in a JavaScript variable.
2. In the uinload event, check if the flag is set.
3. If the flag is TRUE, then display the message to the user.

For more details, refer to this article.

Save & Exit in Web Application[^]

Please note, when the user closes the WINDOW, you cannot handle this.

Let me know if this works.