I was about to blog something about the Atlas UpdatePanel control, then, I saw a new reply to this post “UpdatePanel Question “ in asp.net forums. So, I decided to post a small thing about using the UpdatePanel control with GridView & DataSource control.
Note: If you still do not know what Atlas is, I advice you to visit this link and download the December bits.
UpdatePanel control is one of the most interesting Atlas server controls, I think it's gonna be “the most common” control. Because it's able to support most of the functionalities you may need in your webpage.
This control allows you to do a “postback” for a specific part of the page. In fact, it simulates a postback rather than doing a real one. The first thing we have to do in order to use this control, is to enable Partial Rendering which is one of the Atlas ScriptManager control properities. And thats so easy, it just goes like this
<atlas:ScriptManager ID="ScripManager" runat="server" EnablePartialRendering="true"> </atlas:ScriptManager>
Now, we can start working with our UpdatePanel.
<atlas:UpdatePanel ID="myPanel" runat="server">
<ContentTemplate>
</ContentTemplate>
<
Triggers>
<atlas:ControlEventTrigger />
<atlas:ControlValueTrigger />
</Triggers>
</atlas:UpdatePanel>
This is the standard form of the UpdatePanel, I just placed an UpdatePanel control I called it “myPanel”. Now I'll tell you about the tags.
- The ContentTemplate tags are clear enough to be understood, between these two tags <ContentTemplate> </ContentTemplate> you can place what you want of controls such as <asp:TextBox .. /> <asp:GridView .. /> etc.
- Between the <Triggers> </Triggers> you can specify when this UpdatePanel will be “posted back“, and this specification can be done in two ways 1- On some control event. 2- On some control value changing; and thats why the two tags <atlas:ControlEventTrigger /> and <atlas:ControlValueTrigger /> are here. So, if you want to let this panel get updated on a button_click you can just add a single line of code like : <atlas:ControlEventTrigger ControlID="Button" EventName="Click" /> . I think the intellisense will help you in doing this :-)
Okay, lets see how can we fetch “filtered” data from a Datasource , and show it in a GridView control.
<%
@ Page Language="VB" AutoEventWireup="false" CodeFile="UP.aspx.vb" Inherits="UP" %>
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
script runat="server">
Protected Sub myLButton_Click(ByVal sender As Object, ByVal e As System.EventArgs)
AccessDataSource1.SelectCommand =
"SELECT [FirstName], [LastName], [Title], [City] FROM [Employees] WHERE ([FirstName] = ?)"
myGV.DataSource = AccessDataSource1
myGV.DataBind()
End Sub
</
script>
<
html xmlns="http://www.w3.org/1999/xhtml" >
<
head runat="server">
<title>UpdatePanel Example</title>
<atlas:ScriptManager runat="server" ID="ScriptManager" EnablePartialRendering="true"></atlas:ScriptManager>
</
head>
<
body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="myTBox"></asp:TextBox><asp:LinkButton runat="server" ID="myLButton" OnClick="myLButton_Click">Submit</asp:LinkButton><atlas:UpdatePanel ID="myPanel" runat="server">
<ContentTemplate>
<asp:GridView runat="server" ID="myGV" > </asp:GridView>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger ControlID="myLButton" EventName="Click" />
</Triggers>
</atlas:UpdatePanel>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb" >
<SelectParameters>
<asp:ControlParameter ControlID="myTBox" Name="FirstName" PropertyName="Text" Type="String" />
</SelectParameters>
</asp:AccessDataSource>
</div>
</form>
</
body>
</
html>
Okay, the above page has an UpdatePanel, TextBox, LinkButton, AccessDataSource and a GridView. We want to get some information about an Employee his/her First Name is entered in the TextBox, but we wanna perform this without a page “refresh”, thus we used the UpdatePanel control and we located the GridView in it. Now, the Data will be changed everytime then Button clicked. Thus we used the <atlas:ControlEventTrigger /> tag.
Back to the forums post; In the post I linked to. The problem was that the DataSource is not accessible if it's not located in the UpdatePanel, and I tried this before and I said yes. But I think I was mistaken, cause lately, I found that things are working okay even if the DataSource control is located out of the UpdatePanel.
One more thing I want to tell you about, is that you can configure your UpdatePanel control using some easy GUI forms. I think, they're helpfull in making triggers.
What I wrote above, was a small thing about the UpdatePanel control, hope this post helps in making this control more familiar, I also hope it's not “boring post” ..
A.