CODEWITHSUNDEEP
asp.netajaxupdatepanel
surpavan
surpavan

Reputation: 1422

Update Panel not updating content

I was trying this from some time, but I am not able to get around it. Following is the code of the aspx page display:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    Test<br />
    <asp:DropDownList ID="DropDownList1" runat="server">
        <asp:ListItem>1</asp:ListItem>
        <asp:ListItem>2</asp:ListItem>
    </asp:DropDownList>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <br />
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

Following is the code for the button1 click event:

Public Class WebForm1
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DropDownList1.SelectedIndexChanged
        Label1.Text = DropDownList1.SelectedIndex

        UpdatePanel1.Update()

    End Sub
End Class

Could you please tell me what I missed out.

Upvotes: 7

Views: 26490

Answers (4)

Elias Hossain
Elias Hossain

Reputation: 4469

Below is the correct markup, just put it to your page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
</head>
<body>
  <form id="form1" runat="server">
    Test<br />
    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostback ="True">
      <asp:ListItem>1</asp:ListItem>
      <asp:ListItem>2</asp:ListItem>
   </asp:DropDownList>
   <asp:ScriptManager ID="ScriptManager1" runat="server">
     <Triggers>
        <asp:AsyncPostBackTrigger ControlID="DropDownList1" 
               EventName="SelectedIndexChanged" />
    </Triggers>
  </asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</form>

Upvotes: 1

Tim Schmelter
Tim Schmelter

Reputation: 460288

You have forgotten to set AutoPostback to True on your DropDownList. The default is False.

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listcontrol.autopostback.aspx

And if you want to trigger Async-Postback in your UpdatePanel if the User changes the DropDownList, you have to specify an AsyncPostbackTrigger for the UpdatePanel, because the DropDown is outside of it.

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

Apart from that you need to place the ScriptManager at the beginning as Ed said. Look here for more infos on ASP.NET-Ajax:

http://msdn.microsoft.com/en-us/magazine/cc163354.aspx

Upvotes: 2

user989818
user989818

Reputation:

Set the autopostback to true in the drop down.

The true means: everytime the value in the drop down changes, a postback to the server will occur.

But listen to Tim Schmelter answer. If the drop down will not change, it's a good idea to put it outside the update panel and the update panel must be triggered asynchronous by the drop down (if you don't set a trigger to the update panel, every postback will update your updatepanel). If the content of the dropdown changes, put it inside the updatepanel.

But like I said, I'm not using that for a long time, its a good idea to double check everything I say about the subject. =p

PS: Microsoft Update Panels are easy to develop but make your site very slow. Try to learn about aspnet webservices and jQuery.

Upvotes: 2

Ed B
Ed B

Reputation: 6054

You need to place your Scriptmanager before any controls that will use it.

So place it above your dropdownlist control. You also need to set the AutoPostBack property to true on the dropdownlist for the selectedindexchange event to fire on it.

<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    Test<br />
    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostback="true">
        <asp:ListItem>1</asp:ListItem>
        <asp:ListItem>2</asp:ListItem>
    </asp:DropDownList>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <br />
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>

Upvotes: 1

Related Questions