Post back using Javascript

This article shows how to postback the ASP.NET webpage to server using Javascript and raise a server control event.

In this article we will post back the ASP.NET webpage to server and raise the TextChanged Event of TextBox1  textbox control using Javascript.

 Prerequisites.

1.      The AutoPostBack property of Textbox must be set to false.

2.      The TextChanged event of Textbox must be defined in the Code-Behind file.

Below steps shows how to do this. 

Step1: Creating a new Website: Demo1

a.     Open Visual Web Developer or VisualStudio 2008.

b.     On the File menu, click New Website, In the Dialog box that appears Under VisualStudioInstalled templates  select ASP.NET Website.

c.     Then Type the location (Foldername) where you want to create your website such as D:\Demo1 in the second location box.

d.     Select the language you want to create website in. Let us select C#.

e.     Click ok , This will create a website with name Demo1. This website by default contains a Webpage named Default.aspx.

Step 2: Adding Textbox to the Default.aspx form and generating TextChanged event handler.

a.     Go to View Menu -> Select Toolbox -> From the Toolbox window ->Under Standard section Drag and Drop a Textbox control  and a Button control on the Default.aspx page or  You can also copy and paste the below code in form tag.

<div>

        <asp:TextBox ID="TextBox1" AutoPostBack="false" runat="server" OnTextChanged="TextBox1_TextChanged"></asp:TextBox><asp:Button

            ID="Button1" OnClientClick="RaiseEvent();" runat="server" Text="Button" />

    </div>

b.     In VisualStudio /Visual WebDeveloper, switch to Design view . Right click the Textbox control  and then click on Properties. This displays the properties window for the Textbox control on right. In this window click on Events tab which is next to properties tab.

c.     In the Event tab, you will find TextChanged event listed above unload event from bottom. Double-click on TextChanged event. This will generate TextChanged event handler for the textbox control in the Code-Behind file as below.

    protected void TextBox1_TextChanged(object sender, EventArgs e)

    {

    }

d.     In the above () event handler write the following code to display some text on browser.

e.     Response.Write("You entered " + TextBox1.Text);

protected void TextBox1_TextChanged(object sender, EventArgs e)

    {

        Response.Write("You entered " + TextBox1.Text);

    }

Step 3: Writing Javascript code to raise the TextChanged event of the textbox.

a.    Now, Switch to Source view of Default.aspx page, by selecting the source tab at the bottom of the page.

b.    In the head section of the Default.aspx page write the following code.

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

        function RaiseEvent()

        {

            __doPostBack('window.document.forms[0].TextBox1', 'TextChanged');

        }

</script>

This function has a javascript method: __doPostBack (2 underscores doPostBack) which takes 2 parameters. The first parameter (window.document.forms[0].TextBox1) is the id of the control whose event has to be raised on server. The second parameter('TextChanged') is the name of the event to be raised.

c.    For the Button control add the following attribute and the corresponding value which will call the javascript method RaiseEvent when the button is clicked by the user.

<asp:Button ID="Button1" OnClientClick="RaiseEvent();" runat="server" Text="Button" />

Step 4: Press CTRL + F5 to execute the Default page.

The Webpage (Default.aspx page) appears in the webbrowser which shows The Textbox and a Button. Enter some value like test in the textbox and hit the button.  You will see that the form is posted to server and TextChanged event of the Textbox is raised which will display text like: You entered test.

Note: Once the TextChanged event is raised on server. If the value in the TextBox is not changed and when you click on Button again. Though the Webpage is posted to server the TextChanged event of TextBox is not fired as the name value pairs of the TextBox which are posted to server in the previous postback is same as now.  So In order to raise the TextChanged event of the Textbox the value of the Textbox must be different from the previous one.