Written by Siddartha Thota on February 14, 2013 in C# > Programming

Partial Page Postback Example in C# [Using Ajax]

GET ALERTS:

Get our Latest updates delivered to your mailbox!

Today, we are going to look at one of the interesting topics that you’ll come across in C#, “The PostBack”.

In brief, a Postback is an event that is created after submitting the client’s request to the server. It’s like the client’s system don’t have enough credentials to authorize the activity and it should post that activity back to server by expecting something to happen. The best example is your Login credentials, where the Textboxes, Buttons, etc., appears on the client side, but in order to enter into your account you need to fill the right details and then click on the submit button which creates an event and then posts back the information filled to the server, which later allows you to access your account.

In this program, we are going to look into a complicated aspect. Generally, while PostingBack to server the entire page will be submitted and now, in this program we are trying to make sure that only a specific part of the application should be undergoing the Post Back property, while the other portion should remain unchanged.

Here is the Task:

Build an ASP.NET application with radio buttons that trigger partial-page postbacks. Use Ajax for making partial-page postback. When radio button section is changed, an asynchronous postback fires rather than a full postback.
The application asks user for “Type of Purchase”.

#1. If the user chooses an e-book, ask for an e-mail address.
#2. If the user selects the paper book option, ask for the physical address.

In both of these cases, you have to display only the information required. Which means that you have to hide the request for e-mail address when you are displaying the request for the physical address and vice versa.

Launch Visual Studio 2008+. Click on Open New Website option and then make sure you select C# option and launch an “ASP.NET Empty Website”. In the solution explorer, right-click and launch the the WebForm.

postback C#

As per the task: You make sure that the basic drag and drop things are done as shown in the above image and save the file which will be saved as .aspx extension.

You got to divide the 2 radio button options using <div> tags and the code of .aspx file appears as follows.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>

<form id="form1" runat="server">
<asp:ScriptManager ID="Scriptmanager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:RadioButton ID="rbemail" runat="server" GroupName="Test" OnCheckedChanged="rbemail_CheckedChanged" Text="E-Book" AutoPostBack="true" Checked="true"/> //If it's selected, it will auto postback.

<div id="emaildiv" runat="server" visible="true">
<p>
Please enter your Name and email ID to receive download link
</p>

<asp:Label ID="Label1" runat="server" Text="Name:"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" Style="margin-left: 71px" Width="217px"></asp:TextBox>

<br></br>
<asp:Label ID="Label2" runat="server" Text="Email Address"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server" Style="margin-left: 23px" Width="221px"></asp:TextBox>

<br></br>

</div> <br /> <br />
<asp:RadioButton ID="rbpost" runat="server" GroupName="Test" OnCheckedChanged="rbpost_CheckedChanged" AutoPostBack="true" Text="Paper Book" />

<br></br>
</div>

<div id="postaldiv" runat="server" visible="false">
<p>
Please enter your shipping information
</p>

<asp:Label ID="Label3" runat="server" Text="Name:"></asp:Label>
<asp:TextBox ID="TextBox3" runat="server" Style="margin-left: 71px" Width="217px"></asp:TextBox>

<br></br>
<asp:Label ID="Label4" runat="server" Text="Street Address"></asp:Label>
<asp:TextBox ID="TextBox4" runat="server" Style="margin-left: 23px" Width="221px"></asp:TextBox>

<br></br>
<asp:Label ID="Label5" runat="server" Text="City:"></asp:Label>
<asp:TextBox ID="TextBox5" runat="server" Style="margin-left: 85px" Width="217px"></asp:TextBox>

<br></br>
<asp:Label ID="Label6" runat="server" Text="State:"></asp:Label>
<asp:TextBox ID="TextBox6" runat="server" Style="margin-left: 77px" Width="221px"></asp:TextBox>

<br></br>
<asp:Label ID="Label7" runat="server" Text="Zip Code:"></asp:Label>
<asp:TextBox ID="TextBox7" runat="server" Style="margin-left: 49px" Width="221px"></asp:TextBox>
<br></br>
</div>
</ContentTemplate>

<Triggers>
<asp:AsyncPostBackTrigger ControlID="rbemail" EventName="CheckedChanged" />
<asp:AsyncPostBackTrigger ControlID="rbpost" EventName="CheckedChanged" />
</Triggers>

</asp:UpdatePanel>
</form>
</body>
</html>

In this file, we’ve created 2 radio buttons and each radio button will be placed in a separate <div> tag,

  •  <div id=”emaildiv” runat=”server” visible=”true”> – default will be true
  • <div id=”postaldiv” runat=”server” visible=”false”> – in order to create partial page PostBack, we got to hide it’s visibility.

Now in order to create some action for the program, we need to head into aspx.cs file. Click on any of the radio buttons to create their specific events. And then

 protected void rbpost_CheckedChanged(object sender, EventArgs e)
 {
 emaildiv.Visible = false;
 postaldiv.Visible = true;
 }

protected void rbemail_CheckedChanged(object sender, EventArgs e)
 {
 emaildiv.Visible = true;
 postaldiv.Visible = false;
 }

Here we didn’t use buttons for posting back to server, but we directly make use of radio buttons. First Radio button, will automatically appears by default, but while selecting the second radio button, it post backs to server in order to get the forms to be filled in order to purchase the book. It’s a partial page post back function, in which whenever you select the radio buttons, the PostBack happens and new fields appears, but not the whole page will get updated.

Output :

output1 output2

{ 1 comment… read it below or add one }

ken lindsay June 17, 2013 at 10:42 pm

thanks for the simple paradigm example! Too many tutorials are excessively complicated and obscure.

Reply

Leave a Comment

Previous post:

Next post: