locked
Playing with update Panels. RRS feed

  • Question

  • User-1366948256 posted

    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.



    Wednesday, April 28, 2010 2:44 AM

All replies

  • User-740453238 posted

    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. 

    Wednesday, April 28, 2010 9:06 AM
  • User-1366948256 posted

    You need to create a trigger for dropdown selectedindexchanged event.

    Regards,

    Thursday, April 29, 2010 1:51 PM
  • User-446933086 posted

    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

    Friday, April 30, 2010 1:20 AM
  • User-1293656743 posted

    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.




    Friday, April 30, 2010 2:36 AM
  • User-740453238 posted

    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.

    Friday, April 30, 2010 5:57 AM
  • User-456111751 posted

    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. 

    Friday, April 30, 2010 6:59 AM
  • User-740453238 posted

    What do you mean close the update panel.  How do you do that?  How do you link the controls to the dropdown list. 

    Friday, April 30, 2010 7:34 AM
  • User-456111751 posted

    Refer to the below code:

     

    <body>

      

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

     

    <asp:ScriptManager ID="ScriptManager1" runat="server">  </asp:ScriptManager>

     

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

     

    <ContentTemplate>

    Select Name: 

     

    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"> 

     <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..

     

    Friday, April 30, 2010 8:19 AM
  • User-456111751 posted

    Let me know if you have any queries.. 

    Friday, April 30, 2010 9:21 AM
  • User-740453238 posted

    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.

    Friday, April 30, 2010 2:23 PM
  • User-1366948256 posted

    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,

    Saturday, May 1, 2010 3:57 AM
  • User-1366948256 posted

    Put trigger like following.

    <Triggers>  
        <asp:AsyncPostBackTrigger ControlID="VendorUniqueID" EventName="SelectedIndexChanged" />  
    </Triggers> 



    Cheers,

    Saturday, May 1, 2010 3:59 AM
  • User-740453238 posted

    It is still not working.  The postback on the dropdown is not taking place here.  Here is my code.

                    <asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional" RenderMode="Inline">
                        <ContentTemplate>
                        <asp:DropDownList ID="VendorUniqueID" runat="server" BackColor="White" Font-Bold="True" ForeColor="Black" Height="20px" Style="z-index: 128; left: 86px;
                        ; top: 275px" Width="216px" AutoPostBack="True" OnSelectedIndexChanged="VendorUniqueID_SelectedIndexChanged" Font-Names="Tahoma" Font-Size="X-Small">
                        </asp:DropDownList>
                    <asp:CheckBox ID="NewVendor" runat="server" Font-Bold="True" Height="20px" Style="z-index: 101;
                        left: 208px; ; top: 241px" Text="New Vendor" Width="104px" AutoPostBack="True" Font-Size="X-Small" />
                    <asp:TextBox ID="VendorAdd1" runat="server" BackColor="DodgerBlue" Font-Bold="True" Font-Names="Tahoma"
                        Font-Size="X-Small" ForeColor="Black" Height="18px" Style="z-index: 102; left: 107px;
                        ; top: 294px" Width="194px" BorderStyle="None" ReadOnly="True" TabIndex="26"></asp:TextBox>
                    <asp:TextBox ID="VendorAdd2" runat="server" BackColor="DodgerBlue" BorderStyle="None"
                        Font-Bold="True" Font-Names="Tahoma" Font-Size="X-Small" ForeColor="Black" Height="18px"
                        ReadOnly="True" Style="z-index: 102; left: 107px; ; top: 294px"
                        TabIndex="26" Visible="False" Width="194px"></asp:TextBox>
                     <asp:TextBox ID="VendorCity" runat="server" BackColor="DodgerBlue" Font-Bold="True" Font-Names="Tahoma"
                        Font-Size="X-Small" ForeColor="0" Height="18px" Style="z-index: 110; left: 107px; ;
                        top: 314px" Width="194px" BorderStyle="None" ReadOnly="True" TabIndex="27"></asp:TextBox>
                    <asp:TextBox ID="VendorName" runat="server" BackColor="White" BorderStyle="None" Font-Bold="True"
                        Font-Names="" Font-Size="" ForeColor="0" Height="13px" ReadOnly="True" Style="z-index: 99;
                        left: 87px; ; top: 275px" Width="214px" Visible="False"></asp:TextBox>
                    <asp:TextBox ID="VendorState" runat="server" BackColor="DodgerBlue" BorderStyle="None"
                        Font-Bold="True" Font-Names="Tahoma" Font-Size="X-Small" ForeColor="0" Height="18px" Style="font-size: 8pt;
                        z-index: 121; left: 107px; ; top: 334px" Width="54px" ReadOnly="True" TabIndex="28"></asp:TextBox>
                    <asp:Label ID="lblVendorState" runat="server" BackColor="Transparent" Font-Bold="True"
                        ForeColor="Black" Height="20px" Style="font-size: 8pt; z-index: 122; left: 6px;
                        ; top: 333px; text-align: right" Width="72px" Visible="False">State:</asp:Label>
                    <asp:TextBox ID="VendorZip" runat="server" BackColor="DodgerBlue" BorderStyle="None" Font-Bold="True"
                        Font-Names="Tahoma" Font-Size="X-Small" ForeColor="0" Height="18px" Style="font-size: 8pt;
                        z-index: 123; left: 198px; ; top: 334px; text-align: left;" Width="103px" ReadOnly="True" TabIndex="29"></asp:TextBox>
                    <asp:Label ID="lblVendorZip" runat="server" BackColor="Transparent" Font-Bold="True" ForeColor="Black"
                        Height="17px" Style="font-size: 8pt; z-index: 124; left: 167px; ;
                        top: 336px; text-align: right" Width="24px" Visible="False">Zip:</asp:Label>
                    <asp:Label ID="lblVendorCity" runat="server" BackColor="Transparent" Font-Bold="True"
                        ForeColor="Black" Height="20px" Style="z-index: 141; left: 17px; ;
                        top: 313px; text-align: right; font-size: 8pt;" Width="61px" Visible="False">City:</asp:Label>
                    <asp:Label ID="lblVendorAdd1" runat="server" BackColor="Transparent" Font-Bold="True"
                        ForeColor="Black" Height="20px" Style="font-size: 8pt; z-index: 143; left: 6px;
                        ; top: 294px; text-align: right" Width="72px" Visible="False">Vendor Add1:</asp:Label>
                    <asp:Label ID="lblVendor" runat="server" BackColor="Transparent" Font-Bold="True"
                        ForeColor="Black" Height="20px" Style="z-index: 144; left: 6px; ;
                        top: 275px; text-align: right; font-size: 8pt;" Width="72px">Vendor:</asp:Label>
                    <asp:TextBox ID="VenNumLU" runat="server" Style="z-index: 157; left: 25px; ;
                        top: 247px" Width="51px" AutoPostBack="True" Font-Bold="True" Height="18px"></asp:TextBox>
                    <asp:TextBox ID="VendorNumber1" runat="server" Font-Bold="True" Font-Names="Tahoma"
                        Font-Size="X-Small" Height="20px" Style="z-index: 138; left: 109px; ;
                        top: 248px" Width="71px" BackColor="DodgerBlue" BorderStyle="None" ForeColor="Black" ReadOnly="true"></asp:TextBox>
                    </ContentTemplate>
                        <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="VendorUniqueID" EventName="SelectedIndexChanged" />   
                        </Triggers>
                       
                    </asp:UpdatePanel>


     

    Saturday, May 1, 2010 8:31 AM
  • User-740453238 posted

    I still need an answer to this problem.  Anyone? 

    Sunday, May 2, 2010 9:57 AM
  • User-456111751 posted

    Post the code for the Selected Index Changed here 

    Monday, May 3, 2010 5:45 AM
  • User2012005736 posted
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:DropDownList ID="VendorUniqueID" runat="server" BackColor="White" Font-Bold="True"
                    ForeColor="Black" Height="20px" Style="z-index: 128; left: 86px; ;
                    top: 275px" Width="216px" AutoPostBack="True" OnSelectedIndexChanged="VendorUniqueID_SelectedIndexChanged"
                    Font-Names="Tahoma" Font-Size="X-Small">
                    <asp:ListItem>Amit</asp:ListItem>
                    <asp:ListItem>Kinley</asp:ListItem>
                </asp:DropDownList>
                <asp:TextBox ID="VendorAdd1" runat="server" BackColor="DodgerBlue" Font-Bold="True"
                    Font-Names="Tahoma" Font-Size="X-Small" ForeColor="Black" Height="18px" Style="z-index: 102;
                    left: 107px; ; top: 294px" Width="194px" BorderStyle="None"
                    ReadOnly="True" TabIndex="26"></asp:TextBox>
            </ContentTemplate>
        </asp:UpdatePanel>
        </form>
    </body>


    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.

    Monday, May 3, 2010 8:24 AM
  • User-740453238 posted

    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. 

    Monday, May 3, 2010 9:54 AM
  • User-740453238 posted

    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


     

    Monday, May 3, 2010 12:30 PM
  • User347897345 posted

    Try this :

    <asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional" RenderMode="Inline">
                        <ContentTemplate>
                        <asp:DropDownList ID="VendorUniqueID" runat="server" BackColor="White" Font-Bold="True" ForeColor="Black" Height="20px" 
                         AutoPostBack="True" OnSelectedIndexChanged="VendorUniqueID_SelectedIndexChanged" Font-Names="Tahoma" Font-Size="X-Small">
                        <asp:ListItem Text="1" Selected=True></asp:ListItem>
                        <asp:ListItem Text="2"></asp:ListItem>
                        <asp:ListItem Text="3"></asp:ListItem>
                        <asp:ListItem Text="4"></asp:ListItem>
                        </asp:DropDownList>
                    <asp:CheckBox ID="NewVendor" runat="server" Font-Bold="True" Height="20px"  Text="New Vendor" Width="104px" AutoPostBack="True" Font-Size="X-Small" />
                    <asp:TextBox ID="VendorAdd1" runat="server" BackColor="DodgerBlue" Font-Bold="True" Font-Names="Tahoma"
                        Font-Size="X-Small" ForeColor="Black" Height="18px" Width="194px" BorderStyle="None" ReadOnly="True" TabIndex="26"></asp:TextBox>
                    <asp:TextBox ID="VendorAdd2" runat="server" BackColor="DodgerBlue" BorderStyle="None"
                        Font-Bold="True" Font-Names="Tahoma" Font-Size="X-Small" ForeColor="Black" Height="18px"
                        ReadOnly="True" TabIndex="26" Visible="False" Width="194px"></asp:TextBox>
                     <asp:TextBox ID="VendorCity" runat="server" BackColor="DodgerBlue" Font-Bold="True" Font-Names="Tahoma"
                        Font-Size="X-Small" ForeColor="0" Height="18px"  BorderStyle="None" ReadOnly="True" TabIndex="27"></asp:TextBox>
                    <asp:TextBox ID="VendorName" runat="server" BackColor="White" BorderStyle="None" Font-Bold="True"
                        Font-Names="" Font-Size="" ForeColor="0" Height="13px" ReadOnly="True"  Width="214px" Visible="False"></asp:TextBox>
                    <asp:TextBox ID="VendorState" runat="server" BackColor="DodgerBlue" BorderStyle="None"
                        Font-Bold="True" Font-Names="Tahoma" Font-Size="X-Small" ForeColor="0" Height="18px"  Width="54px" ReadOnly="True" TabIndex="28"></asp:TextBox>
                    <asp:Label ID="lblVendorState" runat="server" BackColor="Transparent" Font-Bold="True"
                        ForeColor="Black" Height="20px"  Width="72px" Visible="False">State:</asp:Label>
                    <asp:TextBox ID="VendorZip" runat="server" BackColor="DodgerBlue" BorderStyle="None" Font-Bold="True"
                        Font-Names="Tahoma" Font-Size="X-Small" ForeColor="0" Height="18px" Width="103px" ReadOnly="True" TabIndex="29"></asp:TextBox>
                    <asp:Label ID="lblVendorZip" runat="server" BackColor="Transparent" Font-Bold="True" ForeColor="Black"
                        Height="17px" Visible="False">Zip:</asp:Label>
                    <asp:Label ID="lblVendorCity" runat="server" BackColor="Transparent" Font-Bold="True"
                        ForeColor="Black" Height="20px" Width="61px" Visible="False">City:</asp:Label>
                    <asp:Label ID="lblVendorAdd1" runat="server" BackColor="Transparent" Font-Bold="True"
                        ForeColor="Black" Height="20px" Width="72px" Visible="False">Vendor Add1:</asp:Label>
                    <asp:Label ID="lblVendor" runat="server" BackColor="Transparent" Font-Bold="True"
                        ForeColor="Black" Height="20px" Width="72px">Vendor:</asp:Label>
                    <asp:TextBox ID="VenNumLU" runat="server"  Width="51px" AutoPostBack="True" Font-Bold="True" Height="18px"></asp:TextBox>
                    <asp:TextBox ID="VendorNumber1" runat="server" Font-Bold="True" Font-Names="Tahoma"
                        Font-Size="X-Small" Height="20px"  Width="71px" BackColor="DodgerBlue" BorderStyle="None" ForeColor="Black" ReadOnly="true"></asp:TextBox>
                    </ContentTemplate>
                        <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="VendorUniqueID" EventName="SelectedIndexChanged" />   
                        </Triggers>
                       
                    </asp:UpdatePanel>

    On COde behind

    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

    Hope it helps


    Tuesday, May 18, 2010 3:56 AM