PDA

View Full Version : [FIXED] [V0.7] UpdatePanel



Timothy
Sep 02, 2008, 4:54 PM
Hello,

The following is a simple example of a ComboBox inside an UpdatePanel which fails in IE6 and FF3.0:

Example.aspx:


<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
BindCountries();
}

public void BindCountries()
{
Countries.DataSource = new object[]
{
new object[]{"AL", "Alabama", "The Heart of Dixie"},
new object[] {"AK", "Alaska", "The Land of the Midnight Sun"},
new object[] {"AZ", "Arizona", "The Grand Canyon State"},
new object[] {"AR", "Arkansas", "The Natural State"},
};

Countries.DataBind();
}

protected void drpCountry_ItemChanged(object sender, EventArgs e)
{
lblSelected.Text = "Selected: " + drpCountry.SelectedItem.Value;
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" EnablePartialRendering="True" />
<ext:ScriptManager runat="server" StateProvider="PostBack" Theme="Gray" />
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<ext:Store ID="Countries" runat="server" AutoLoad="True">
<Reader>
<ext:ArrayReader ReaderID="Abbrev">
<Fields>
<ext:RecordField Name="Abbrev" />
<ext:RecordField Name="DisplayName" />
<ext:RecordField Name="Description" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:ComboBox ID="drpCountry" runat="server" AutoPostBack="True" OnItemChanged="drpCountry_ItemChanged" StoreID="Countries" DisplayField="DisplayName" ValueField="Abbrev" Editable="False" EmptyText="----" ForceSelection="True" Mode="Local" TypeAhead="False" Select&#111;nfocus="True" Stateful="True" TriggerAction="All" Width="255" />
<asp:Label ID="lblSelected" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>


Fails when you use EnablePartialRendering="True" on the UpdatePanel. Works when you set EnablePartialRendering to False ;)

Cheers,
Timothy

geoffrey.mcgill
Sep 05, 2008, 9:23 AM
Can you explain what you mean by "fail"? Did you get an exception, a javascript error? did the page load after postback/callback? did the combobox disable after postback/callback?

I tried the code you provided and it appears to be working correctly in IE6, IE7 and FF3. 

If you set EnablePartialRendering="false", then the page will probably just do a full postback, not an ajax partial render callback.

Here's the full code sample I was testing with.


<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        this.BindCountries();
    }

    public void BindCountries()
    {
        this.Store1.DataSource = new object[]
            {
                new object[]{"AL", "Alabama", "The Heart of Dixie"},
                new object[] {"AK", "Alaska", "The Land of the Midnight Sun"},
                new object[] {"AZ", "Arizona", "The Grand Canyon State"},
                new object[] {"AR", "Arkansas", "The Natural State"},
            };

        this.Store1.DataBind();
    }

    protected void drpCountry_ItemChanged(object sender, EventArgs e)
    {
        this.Label1.Text = "Selected: " + this.ComboBox1.SelectedItem.Value;
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <p><a href="Test1.aspx">Reload</a></p>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />
        <ext:ScriptManager ID="ScriptManager2" runat="server" />
       
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
           
                <ext:Store ID="Store1" runat="server" AutoLoad="True">
                    <Reader>
                        <ext:ArrayReader ReaderID="Abbrev">
                            <Fields>
                                <ext:RecordField Name="Abbrev" />
                                <ext:RecordField Name="DisplayName" />
                                <ext:RecordField Name="Description" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
               
                <ext:ComboBox
                    ID="ComboBox1"
                    runat="server"
                    AutoPostBack="True"
                    OnItemChanged="drpCountry_ItemChanged"
                    StoreID="Store1"
                    DisplayField="DisplayName"
                    ValueField="Abbrev"
                    Editable="False"
                    EmptyText="----"
                    ForceSelection="True"
                    Mode="Local"
                    TypeAhead="False"
                    Select&#111;nfocus="True"
                    Stateful="True"
                    TriggerAction="All"
                    Width="255"
                    />
                   
                <asp:Label ID="Label1" runat="server" />
               
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

geoffrey.mcgill
Sep 05, 2008, 9:32 AM
The default value of EnablePartialRendering is "True", so in general shouldn't have to explicitly set in markup unless you're setting to "False".

Timothy
Sep 05, 2008, 9:39 AM
Good morning Geoffrey,

What was happening was on Ajax response the Ext controls were not rendering, the <Ext:ComboBox> was one of them, but it even happened to <Ext:Button> and <Ext:TextField>. And you are correct, setting the EnablePartialRendering to False will do a complete postback; I've had that set because most of the controls from Coolite, to this point, have not functioned properly in UpdatePanels.

Have you updated the SVN with your UpdatePanel revisions? I'm going to double check with the latest SVN this morning on my work laptop. It appears to work on the sandbox, any new additions to the Web.Config other then the HttpModule and HttpHandler noticed earlier this week?

Cheers,
Timothy

geoffrey.mcgill
Sep 05, 2008, 9:57 AM
I suspect the issue noted above was probably caused by something else (ie, not updatepanel issues) which has been fixed/changed recently.

I'm working on the <asp:UpdatePanel> support today. It's slow going.

There have been no other changes to the web.config requirements.

Timothy
Sep 05, 2008, 10:32 AM
Geoffrey,

I tried your posted example with the latest build of SVN and when the postback occurs on the ComboBox, the ComboBox disappears.


Your example copied and pasted.


Microsoft .NET Framework 2.0


Cheers,
Timothy

geoffrey.mcgill
Sep 05, 2008, 10:40 AM
Hi Timothy,

I think there must have been some revisions to the asp.net ajax JavaScript files which are affecting the rendering. There's a couple posts within the coolite forum where developers have updated their version of asp.net ajax/extension and things started working.

The version I'm using is:


// Name: MicrosoftAjax.debug.js<div exechecked="true" class="sourceRow"><a class="sourceLine"> </a>// Assembly: System.Web.Extensions
<div exechecked="true" class="sourceRow"><a class="sourceLine"> </a>// Version: 3.5.0.0
<div exechecked="true" class="sourceRow"><a class="sourceLine"> </a>// FileVersion: 3.5.30729.1


and

// Name: MicrosoftAjaxWebForms.debug.js<div exechecked="true" class="sourceRow"><a class="sourceLine"> 2</a>// Assembly: System.Web.Extensions
<div exechecked="true" class="sourceRow"><a class="sourceLine"> 3</a>// Version: 3.5.0.0
<div exechecked="true" class="sourceRow"><a class="sourceLine"> 4</a>// FileVersion: 3.5.30729.1

If the <ext:ComboBox> is not appearing after the callback then there's probably a JavaScript error being thrown. Do any of the js errors/exceptions get logged in FireBug?

Timothy
Sep 05, 2008, 10:44 AM
Works in IE6, FF3.0 but not in Google Chrome (doh!)

How did you check your JS versions?


Cheers,
Timothy

geoffrey.mcgill
Sep 05, 2008, 10:59 AM
Confirmed that the sample is not working in Chrome. I'll see what I can do to fix the issue, although I'm going to be really surprised if this bug with something we're doing since the sample also works in Safari3/Webkit.


How did you check your JS versions?
FireBug (http://www.getfirebug.com/)

Timothy
Sep 05, 2008, 11:04 AM
Of course I've got firebug, just not seeing the version information in the js files rendered by Microsoft -- I'll dig around in it ;)

Oh, and Chrome is still Beta so I wouldn't be surprised if it's an internal error.


Cheers,
Timothy

geoffrey.mcgill
Sep 05, 2008, 1:20 PM
In firebug when inside the "Script" tab you can view all the scripts that get loaded onto the page. The MicrosoftAjax.js file should be stamped at the top, in the comments, with a version number. 

Hope this helps.

elbanna23
Dec 22, 2008, 7:32 AM
hi all
when i working with updatepanel and asp : imagebutton it does'nt work.
please help me
all time the page do postback or the code in the method not working
this is my code :





<body>


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


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


<ext:ScriptManager ID="ScriptManager2" runat="server" Theme="Slate" HideInDesign="True" />








<ext:Window ID="wind1" runat="server" Collapsible="true" Height="560px"


Icon="Application" Title="Elis" Width="800px"


Maximizable="True" Cls="backgrd" AutoDestroy="False" Footer="True">


<Content>


<table style="width: 100%; line-height:1.5; background-image: url('Images/desktop.jpg');">


<tr>





<dt>


<asp:UpdatePanel ID="updatepanel1" runat="server" UpdateMode="Conditional">


<ContentTemplate>


<asp:ImageButton ID="imgb_SalesStatus" runat="server"


ImageUrl="~/Images/grid48x48.gif" onclick="imgb_SalesStatus_Click"


style="height: 48px">





</asp:ImageButton>


</ContentTemplate>


</asp:UpdatePanel>








</dt>
</tr>



</table>



</Content>




</ext:Window>




</form>



</body>



the code in "imgb_SalesStatus_Click" not working
please help me .

i need to finish it soon.
thank you in advance

geoffrey.mcgill
Dec 29, 2008, 5:28 AM
@elbanna23 - I ran a few tests with your code and it appears to be working well with the latest release (v0.7). Maybe try upgrading to v0.7 and retest.

Example


<%@ Page Language="C#" %>
<%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>

<!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 id="Head1" runat="server">
<title>Window with UpdatePanel - Coolite Toolkit Example</title>
<script runat="server">
protected void ImageButton1_Click(object sender, EventArgs e)
{
this.Label1.Text = "ImageButton: " + DateTime.Now.ToString();
}
</script>
</head>
<body>
<p><a href="Simple.aspx">Reload</a></p>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="True" />

<ext:ScriptManager ID="ScriptManager2" runat="server" />

<ext:Window
ID="Window1"
runat="server"
Title="Title"
Icon="Application"
Height="200"
Width="330">
<Body>
<table>
<tr>
<dt>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:ImageButton
ID="ImageButton1"
runat="server"
ImageUrl="~/Images/grid48x48.gif"
&#111;nclick="ImageButton1_Click"
/>
<br />
<ext:Label ID="Label1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<%= DateTime.Now.ToLongTimeString() %>
</dt>
</tr>
</table>
</Body>
</ext:Window>

</form>
</body>
</html>

Hope this helps.

geoffrey.mcgill
Dec 29, 2008, 5:31 AM
@elbanna23 - I did not notice the full context of this thread and that your post is unreleated to the main thread topic. Please start a new thread/topic if you have any follow-up questions.

elbanna23
Dec 29, 2008, 7:40 AM
thank you very much but i relly found another way by (ajax methods with listeners ) in v7.0
thank you again.
good bye