Click here to Skip to main content
Click here to Skip to main content

Exploring Client Side scripting possibilities with ASP.NET controls

, 17 Jan 2007
Rate this:
Please Sign up or sign in to vote.
Checks a form at client side to see if any control as been modified
<!-- Article Starts - DO NOT ADD HTML/BODY START TAGS-->

Checking a form to see if it has 'dirty' fields:

As I was thinking about what I should start my first ‘tech-article’ with, one of our Project Managers came up with a God-sent topic. He mentioned how his team had coded the entire application and now the client wanted a change in the navigation mechanism. They wanted that in case the user edited any field on that page, he should be prompted with a warning prompting that all changes the user made would be lost. For this they wanted a client side script to find out in case any ASP.NET control on that page had been fiddled with. They did not need to know which control it was as long as its value had changed at least once. This was needed irrespective of what control it was.. radio button, text box, label, check-box etc. It took me about

 

 

So in this article, I’ll talk about how to detect client side changes to a web-form coded in ASP.NET. Well the solution really isn’t difficult as it took me just around an hour to get them to the best approach, but since my PM (who’s a tech guru himself ) didn’t know it, I thought I might as well start with the same

 

So in a sample application to demonstrate the solution, lets create a ‘default.aspx’ file with the following form

 

<body>

    <form id="form1" runat="server" >

        <div>

            <asp:TextBox ID="txtCtrlOne" runat="server"></asp:TextBox>

           

            <asp:CheckBox ID="chkCtl2" runat="server"  />

           

           

            <asp:RadioButton ID="rdbCtl3"  runat="server" />

          

            <asp:Label ID="lblCtl4" runat="server" Text="Label"></asp:Label>

            <asp:Button ID="btnSubmit" runat="server" Text="Button" />

        </div>       

    </form>

</body>

 

 

Now, we’ll need to invoke some client side scripts that’ll need to go in the head tag as shown below:

 

<head runat="server">

    <title>Test Page for Demo</title>

    <script language="javascript" type="text/javascript" >

        var _boolFlag;

        function resetFlag()

        {

            _boolFlag=false;

        }

       

        function setFlag()

        {

            _boolFlag=true;

        }

       

        function checkFlag()

        {

            if( _boolFlag == true )

            {

                alert('Some data in this form has changed. Its dirty!!');  

            }           

        }      

        

    </script>

</head>

 

Essentially, we use a Boolean flag to indicate if the form has changed from what we received or not. Now comes the meat part, what do we do at the server side that we get the appropriate java-script functions called when required. Well, nothing great – we just add some attributes to the rendered controls for these ASP.NET controls. The basic idea is that, ASP.NET renders its controls ultimately as pure HTML (coz that’s what your browser will understand finally), so using the WebControl.Attributes collection for these control we can set the ‘onpropertychange’ event to call the setFlag() javascript method that ultimately sets the Boolean flag to mark the page as dirty. Here is the default.aspx.cs

 

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

 

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            //normally here is where some logic would set values on the page

            txtCtrlOne.Text = "Someone Somewhere is testing code ";

            chkCtl2.Checked = true;

        }

        //after that we set out client side script attributes

      

        form1.Attributes["onload"] = "return resetFlag();";

        txtCtrlOne.Attributes["onpropertychange"] = "return setFlag();";

        chkCtl2.InputAttributes["onpropertychange"] = "return setFlag();";

        rdbCtl3.InputAttributes["onpropertychange"] = "return setFlag();";

        btnSubmit.Attributes["onclick"] = "return checkFlag();";

    

    }

}

The reason we use ‘InputAttributes’ for the checkboxes and radio-buttons is that, I realized that using the ‘Attributes’ collection resulting in .NET dumping a the “onpropertychange” attribute in a ‘span’ tag around the radio button or check box and not within the RB or CB. So I changed it to InputAttributes and it worked!!

 

For those lazy people (like myself) who’ll need the default.aspx file as well, here it is.

 

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>Test Page for Demo</title>

    <script language="javascript" type="text/javascript" >

        var _boolFlag;

        function resetFlag()

        {

            _boolFlag=false;

        }

       

        function setFlag()

        {

            alert("flag set");

            _boolFlag=true;

        }

       

        function checkFlag()

        {

            if( _boolFlag == true )

            {

                alert('Some data in this form has changed. Its dirty!!');  

            }           

        }      

       

    </script>

</head>

<body>

    <form id="form1" runat="server" >

        <div>

            <asp:TextBox ID="txtCtrlOne" runat="server"></asp:TextBox>

           

            <asp:CheckBox ID="chkCtl2" runat="server"  />

           

           

            <asp:RadioButton ID="rdbCtl3"  runat="server" />

          

          

            <asp:Button ID="btnSubmit" runat="server" Text="Button" />

        </div>       

    </form>

</body>

</html>

 

The code in the if( !IsPostBack ) condition is where you’d normally write some logic to get the values from your business layer to populate your form fields, so its  just a simulation.

 

 

In case you want you can use the event within javascript to determine which control fired the event and what property was changed as well. But since that’s not my PM’s requirement, so I’d leave that upto you.  So that completes my first blog-post. Its pretty dumb I know…. but at least I started J.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

sanidhyakhilnani
Web Developer
India India
No Biography provided

Comments and Discussions

 
GeneralGood article Pinmemberprawinkumarpauldavid17-Jan-07 20:23 
AnswerRe: Good article Pinmembersanidhyakhilnani17-Jan-07 21:11 
GeneralGood article Pinmemberrajantawate1(http//rtawate-csharp-book.blogspot.co17-Jan-07 10:55 
GeneralRe: Good article Pinmembersanidhyakhilnani17-Jan-07 21:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.141022.2 | Last Updated 17 Jan 2007
Article Copyright 2007 by sanidhyakhilnani
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid