• How to check changes on web page before postback

    Posted on May 8, 2013 by in ASP.NET, C#, Dotnet

    Users tend to click on buttons without changing anything on the page. This would cause unnecessary postback and load on the server.  In this article, I am going to explain how to find out if user changed anything on the page. If he or she doesn’t, we stop page from being postback and display a friendly pop-up.  We are looking for a generic way to find out if user made any changes, so that we don’t need to implement page or control specific logic for each page. I have decided to use JQUERY serialize method.

    JQUERY Code:
    Since we are going to use JQUERY to satisfy our requirement, we need to add reference to the script file.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. In this ready function, we attach button click event of all controls with ID equal to “btnSave”.  On the initial load, we serialize and save form values into prevFormData variable. On button click event, we fetch the form values again and compare it with prevFormData. If they are same, it means there is no activity on the page. So we stop page from posting back and display a pop-up to the user.

    <script type="text/javascript">
        //we are interested in only data entry values. also exclude viewstate hidden varibale
        $.fn.serializeForm = function() {
            
            return this.find("input,textarea,select,hidden")
               .not("[type=hidden][name^=__]")               
               .serialize();
        }
    
        //On Document Ready, perform form serialization
        $(document).ready(function() {
            //serialize form values and store it in a temp variable
            var prevFormData = $("form").serializeForm();
    
            //event handler to the button (only buttons with ID="btnSave") click event
            $("[id*=btnSave]").click(function() {
            //on button click get current serialzed form values
            var curFormData = $("form").serializeForm();
            //if there is no change, display a pop-up
            if (prevFormData == curFormData) {
                    alert("Please enter or change information before trying to save.");
                    return false;
                }
            });
        });
    
    </script>
    

    Page Design:
    I have added some data entry fields username & password to the page. Also added a link button with ID “btnSave”.

    <form id="form1" runat="server">
    <div>
        <table id="tblProducts" runat="server" class="tableClass">  
            <tr>  
                <td><asp:Label ID="lblUsername" Text="Username" runat="server"></asp:Label></td>
                <td><asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>  </td>             
            </tr>  
            <tr>  
               <td ><asp:Label ID="lblPassword" Text="Password" runat="server"></asp:Label></td>
                <td><asp:TextBox ID="txtPassword" runat="server"></asp:TextBox></td>          
            </tr>
             <tr>  
               <td colspan="2" align="center">
               <asp:LinkButton ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click"></asp:LinkButton>               
                </td>                
            </tr>
        </table>
    </div>
    </form>
    

    Source Code:
    Once save button is clicked and if the form is submitted, following event is fired. We simply acknowledge the change.

    protected void btnSave_Click(object sender, EventArgs e)
    {
        Response.Write("Changes Submitted <br/>");
    }
    

    Output:
    Run the application and you would see following page:
    check changes on web page 1

    Without entering anything, click on “Save” button and you would see following pop-up.
    check changes on web page 2

    Enter something in username & password text fields and then hit on save.
    check changes on web page 3

    Be Sociable, Share!

    Written by

    Software architect with over 10 years of proven experience in designing & developing n-tier and web based software applications, for Finance, Telecommunication, Manufacturing, Internet and other Commercial industries. He believes that success depends on one's ability to integrate multiple technologies to solve a simple as well as complicated problem.

    View all articles by

    Email : [email protected]

    Leave a Reply