While taking interview for asp.net I often asked questions regarding update panel and how they works and how we can asynchronous post back using update panel without post backing whole page. To my surprise most of people don’t know how to use update panel
using triggers. Let’s create simple example to demonstrate use of trigger.
We will take one button and then we will use a textbox control and when button’s click event fires its will change textbox text value and fill textbox with that value. But lot’s people here believes that button should be inside update panel but that’s is
not true you can use trigger of a update panel for any control outside update panel.
First let’s take look of server side code of button click. Following is a code for that.
protected void btnHelloWorld_Click(object sender, EventArgs e)
{
txtHello.Text = "This is without postback";
}
here it will simple fill the textbox with string “This is without post back”. Now lets create trigger like following.
<asp:ScriptManager ID="myScriptManager" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="updTextbox" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtHello" runat="server"></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnHelloWorld" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="btnHelloWorld" runat="server" Text="Submit" onclick="btnHelloWorld_Click"/>
It’s simple and you don’t need button insides the update panel. Hope this will help you.
Jalpesh P. Vadgama,
Microsoft MVP(Visual C#),Computer Geek,Lifelong Learner
My Technology Blog : www.dotnetjalps.com Mark as answer if my anwers helps you
How do I get the textbox to update using a dropdown that is also inside the update panel. I've tried but textboxes are not updateing. Postback is happing, but the textbox won't update until I click on something else on the page that causes postback. I
do have the updatepanel set for conditional.
what will be the differance between page post bake and using post bake by trigger both will post back the page complete page will be rendered again in both case.
however your idea was great i mostly put my button outside of update panel.
UpdatePanel are used with the ScriptManager control to enable partial-page rendering. Partial-page rendering reduces the need for synchronous postbacks and complete page updates when only part of the page has to be updated. Partial-page rendering improves
the user experience because it reduces the screen flicker that occurs during a full-page postback and improves Web page interactivity.
If I don't have my dropdown in a update panel the page slows down quite a bit. Everytime it does a postback there is a 10+ second delay in updateing other controls on the page. But now that I have this in the updatepanel, the selectedindexchange is not
happening until I choose something else on the page that requires a postback. I don't think I can win with this one.
To make the Selectedindexchanged working for a Dropdown make sure you close the update panel till you have the controls linked on the page to the dropdown list.
It still doesn't work. I added the onSelectedIndexChange="VendorUniqueID_SelectedIndexChanged"
to the dropdown. The only time the SelectedIndexChange event fires is if I change anotehr control on the page.
When you use async trigger it will not postback whole page. It will do partial rendering. So this will have much better performance then the putting all things in update panel.
Cheers,
Jalpesh P. Vadgama,
Microsoft MVP(Visual C#),Computer Geek,Lifelong Learner
My Technology Blog : www.dotnetjalps.com Mark as answer if my anwers helps you
Here is my onSelectedIndexChange event in my code behind. I have verified that the postback is taking place. The textboxes are getting updated, but the view on the page is not refreshing. (the textboxes on the page stay the same) until I update something
else on the page. There has to be a good reason why this is happening.
Protected Sub VendorUniqueID_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles VendorUniqueID.SelectedIndexChanged
Me.Dirty.Checked = True
Dim SqlString As String = "SELECT * FROM dbs.vendors WHERE vendor_id = ?"
Using conn As New OdbcConnection(strConnString1)
Using cmd As New OdbcCommand(SqlString, conn)
cmd.Parameters.AddWithValue("vendor_id", Me.VendorUniqueID.SelectedValue)
conn.Open()
Using reader As OdbcDataReader = cmd.ExecuteReader()
While reader.Read()
VendorName.Text = Trim(reader("firstname")) & " " & Trim(reader("lastname"))
VendorNumber.Text = reader("vendor_id")
VendorNumber1.Text = reader("vendor_id")
VendorAdd1.Text = reader("street_1")
VendorAdd2.Text = reader("street_2")
VendorCity.Text = reader("City")
VendorState.Text = reader("State")
VendorZip.Text = reader("Zip")
'Me.Page.refr()
End While
End Using
conn.close()
End Using
End Using
End Sub
Protected Sub VendorUniqueID_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles VendorUniqueID.SelectedIndexChanged
VenNumLU.Text = VendorUniqueID.Items(VendorUniqueID.SelectedIndex).Value
End Sub
Contributor
2594 Points
578 Posts
Playing with update Panels.
Apr 28, 2010 02:44 AM|Jalpesh P. Vadgama|LINK
While taking interview for asp.net I often asked questions regarding update panel and how they works and how we can asynchronous post back using update panel without post backing whole page. To my surprise most of people don’t know how to use update panel using triggers. Let’s create simple example to demonstrate use of trigger.
We will take one button and then we will use a textbox control and when button’s click event fires its will change textbox text value and fill textbox with that value. But lot’s people here believes that button should be inside update panel but that’s is not true you can use trigger of a update panel for any control outside update panel.
First let’s take look of server side code of button click. Following is a code for that.
It’s simple and you don’t need button insides the update panel. Hope this will help you.
Microsoft MVP(Visual C#),Computer Geek,Lifelong Learner
My Technology Blog : www.dotnetjalps.com
Mark as answer if my anwers helps you
Member
236 Points
551 Posts
Re: Playing with update Panels.
Apr 28, 2010 09:06 AM|mhinkle2|LINK
How do I get the textbox to update using a dropdown that is also inside the update panel. I've tried but textboxes are not updateing. Postback is happing, but the textbox won't update until I click on something else on the page that causes postback. I do have the updatepanel set for conditional.
Contributor
2594 Points
578 Posts
Re: Playing with update Panels.
Apr 29, 2010 01:51 PM|Jalpesh P. Vadgama|LINK
You need to create a trigger for dropdown selectedindexchanged event.
Regards,
Microsoft MVP(Visual C#),Computer Geek,Lifelong Learner
My Technology Blog : www.dotnetjalps.com
Mark as answer if my anwers helps you
Member
640 Points
143 Posts
Re: Playing with update Panels.
Apr 30, 2010 01:20 AM|idreesbari|LINK
what will be the differance between page post bake and using post bake by trigger both will post back the page complete page will be rendered again in both case.
however your idea was great i mostly put my button outside of update panel.
once again thanks
Member
571 Points
145 Posts
Re: Playing with update Panels.
Apr 30, 2010 02:36 AM|Dj.|LINK
UpdatePanel are used with the ScriptManager control to enable partial-page rendering. Partial-page rendering reduces the need for synchronous postbacks and complete page updates when only part of the page has to be updated. Partial-page rendering improves the user experience because it reduces the screen flicker that occurs during a full-page postback and improves Web page interactivity.
|Dj|
Member
236 Points
551 Posts
Re: Playing with update Panels.
Apr 30, 2010 05:57 AM|mhinkle2|LINK
If I don't have my dropdown in a update panel the page slows down quite a bit. Everytime it does a postback there is a 10+ second delay in updateing other controls on the page. But now that I have this in the updatepanel, the selectedindexchange is not happening until I choose something else on the page that requires a postback. I don't think I can win with this one.
Member
401 Points
402 Posts
Re: Playing with update Panels.
Apr 30, 2010 06:59 AM|ashiqf|LINK
To make the Selectedindexchanged working for a Dropdown make sure you close the update panel till you have the controls linked on the page to the dropdown list.
Ashiq
Member
236 Points
551 Posts
Re: Playing with update Panels.
Apr 30, 2010 07:34 AM|mhinkle2|LINK
What do you mean close the update panel. How do you do that? How do you link the controls to the dropdown list.
Member
401 Points
402 Posts
Re: Playing with update Panels.
Apr 30, 2010 08:19 AM|ashiqf|LINK
Refer to the below code:
<body>
Select Name:
<asp:ListItem>Please Select</asp:ListItem>
<asp:ListItem>Ashiq</asp:ListItem>
<asp:ListItem>Samsul</asp:ListItem>
</asp:DropDownList><br />
<br />
<asp:Label ID="Label1" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel></div>
</form></body>
Code Behind:
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (DropDownList1.SelectedValue == "Ashiq")
{
Label1.Text = "You have selected Ashiq";
}
if (DropDownList1.SelectedValue == "Samsul")
{
Label1.Text = "You have selected Samsul";
}
}
Please mark as answer if it worked..
Ashiq
Member
401 Points
402 Posts
Re: Playing with update Panels.
Apr 30, 2010 09:21 AM|ashiqf|LINK
Let me know if you have any queries..
Ashiq
Member
236 Points
551 Posts
Re: Playing with update Panels.
Apr 30, 2010 02:23 PM|mhinkle2|LINK
It still doesn't work. I added the onSelectedIndexChange="VendorUniqueID_SelectedIndexChanged" to the dropdown. The only time the SelectedIndexChange event fires is if I change anotehr control on the page.
Contributor
2594 Points
578 Posts
Re: Playing with update Panels.
May 01, 2010 03:57 AM|Jalpesh P. Vadgama|LINK
When you use async trigger it will not postback whole page. It will do partial rendering. So this will have much better performance then the putting all things in update panel.
Cheers,
Microsoft MVP(Visual C#),Computer Geek,Lifelong Learner
My Technology Blog : www.dotnetjalps.com
Mark as answer if my anwers helps you
Contributor
2594 Points
578 Posts
Re: Playing with update Panels.
May 01, 2010 03:59 AM|Jalpesh P. Vadgama|LINK
Put trigger like following.
Cheers,
Microsoft MVP(Visual C#),Computer Geek,Lifelong Learner
My Technology Blog : www.dotnetjalps.com
Mark as answer if my anwers helps you
Member
236 Points
551 Posts
Re: Playing with update Panels.
May 01, 2010 08:31 AM|mhinkle2|LINK
It is still not working. The postback on the dropdown is not taking place here. Here is my code.
Member
236 Points
551 Posts
Re: Playing with update Panels.
May 02, 2010 09:57 AM|mhinkle2|LINK
I still need an answer to this problem. Anyone?
Member
401 Points
402 Posts
Re: Playing with update Panels.
May 03, 2010 05:45 AM|ashiqf|LINK
Post the code for the Selected Index Changed here
Ashiq
Member
62 Points
26 Posts
Re: Playing with update Panels.
May 03, 2010 08:24 AM|amit_chotiya|LINK
I have trimmed your code somwhat for readability. And it works fine.
And few points:
1. the control getting effect, should be inside update panel
2. If the event raiser control is inside the update panel then you dont need trigger for async operation.
Checkout the code in a fresh project.
asp. net
Member
236 Points
551 Posts
Re: Playing with update Panels.
May 03, 2010 09:54 AM|mhinkle2|LINK
I did try this in a fresh app and it worked fine. But for some reason in my app it won't do the postback on the dropdown.
Member
236 Points
551 Posts
Re: Playing with update Panels.
May 03, 2010 12:30 PM|mhinkle2|LINK
Here is my onSelectedIndexChange event in my code behind. I have verified that the postback is taking place. The textboxes are getting updated, but the view on the page is not refreshing. (the textboxes on the page stay the same) until I update something else on the page. There has to be a good reason why this is happening.
Need Help
Member
633 Points
204 Posts
Re: Playing with update Panels.
May 18, 2010 03:56 AM|Naved Hasan Khan|LINK
Try this :
On COde behind
Hope it helps