Comments on: Easily refresh an UpdatePanel, using JavaScript

By: Micle

Micle — Mon, 23 Jan 2012 06:11:46 +0000

Great article, its very useful

We can also submit our .net related article link on http://www.dotnettechy.com to increase traffic.

By: Sharanamma

Sharanamma — Tue, 15 Nov 2011 13:34:06 +0000

from 2 days i’m working on refreshing update panel issue, thanku so much, its woking like charm

By: Mehdi

Mehdi — Sat, 17 Sep 2011 05:21:50 +0000

hi
can we pass a parameter to behind code to update panel with specified range of data in this way.

By: Dry

Dry — Thu, 25 Aug 2011 19:47:43 +0000

NM, I figured it out.
Thanks for all the help.

        protected void udpEditor_Onload(object sender, EventArgs e)

        {

            if (IsPostBack == true)

            {

                int intTaskID = clsStrings.SafeInteger(Request.Form["__EVENTARGUMENT"]);

                LoadTask(intTaskID);

            }

        }
-- Master at WinForms, Learning WebForms and not liking what I see.

By: Dry

Dry — Thu, 25 Aug 2011 19:23:04 +0000

Thanks, I must have misunderstood, now I just need to figure a way to pass the selected key.

Thank you.

By: Dave Ward

Dave Ward — Thu, 25 Aug 2011 18:40:13 +0000

Try using just __doPostBack('udpEditor', ''); instead of the PageRequestManager method. I loaded your page up in VS and was able to get an asynchronous postback by executing that command from my browser's console.

By: Dry

Dry — Thu, 25 Aug 2011 18:12:59 +0000

Opps, i modified it to be runnable by you, but forgot to add

            dtProjects.Rows.Add(new object[] { 1, 1, "Sample 1" });
            dtProjects.Rows.Add(new object[] { 2, 1, "Sample 2" });

Place above:

if (dtProjects != null)

I dont want the list to have to post back, just the project editor control.
What am I doing wrong?

By: Dry

Dry — Thu, 25 Aug 2011 18:08:32 +0000

I tried using all the examples above, I can’t get it to partial post.

 
<%@  Language="C#" Debug="true" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Register TagPrefix="wuc" TagName="EditControl" Src="~/wucTask.ascx" %>
 
DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>List Sampletitle>
 
    <script runat="server" language="C#">
 
        void FillProjects(ListView lvw)
        {
            DataTable dtProjects = new DataTable("dtProjects")
            dtProjects.Columns.Add(new DataColumn("Task Key", typeof(int)));
            dtProjects.Columns.Add(new DataColumn("Priority", typeof(int)));
            dtProjects.Columns.Add(new DataColumn("Project Name", typeof(string)));
            dtProjects.Columns["Project Name"].MaxLength = 6000;
 
            if (dtProjects != null)
            {
                lvw.DataSource = dtProjects;
                lvw.DataBind();
            }
        }
 
        protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
 
                if (Request["ynShowAll"] == "1") { mynShowAll = true; }
                FillProjects(lvwProjects);
 
            }
            catch (Exception ex) { Response.Write("Error: " + ex.Message); }
        }
 
        protected void LoadTask(int intTaskID)
        {
            ctlEditor.Load(intTaskID);
        }
 
        protected void udpEditor_Onload(object sender, EventArgs e)
        {
            ctlEditor.Load(1857);// debugging
            ctlEditor.strDescription = udpEditor.ClientID; // debugging
 
        }
    script>
 
head>
<body>
 
    <script type="text/javascript">
        var ynMultiSelect = 0;
        var intTaskID = 0;
 
        function SelectMe(obj, intKey) {
            intTaskID = intKey;
            if (ynMultiSelect == 0) {
                var tbl = document.getElementById("lvwProjects_tblList")
                for (var i = 0, row; row = tbl.rows[i]; i++) {
                    row.style.background = 'white';
                    row.style.color = 'black';
                }
            }
            if (obj.style.background == 'yellow') {
                obj.style.background = 'white';
                obj.style.color = 'black';
            }
            else {
                obj.style.background = 'yellow';
                obj.style.color = 'black';
            }
            if (intKey > 0) {
            // ## This is the part I can't get to work: Need to load the WUC: ##
 
                //ctlEditor.Load(intKey);
                //var udp = document.getElementById("udpEditor");
                //udp.Update();
                var lvw = document.getElementById("lvwProjects_tblList");
                var prm = Sys.WebForms.PageRequestManager.getInstance();
                prm.__doPostBack("udpEditor", '');
            }
        } //Sel
        function HighlightMe(obj) {
            if (obj.style.background != 'yellow') {
                obj.style.background = 'navy';
                obj.style.color = 'white';
            }
        }
        function UnHighlightMe(obj) {
            if (obj.style.background != 'yellow') {
                obj.style.background = 'white';
                obj.style.color = 'black';
            }
        }    
    script>
 
    <form id="frmTaskList" runat="server">
        <div>
            <font face="Verdana">
                <asp:ListView ID="lvwProjects" runat="server" ConvertEmptyStringToNull="False" >
                    <LayoutTemplate>
                        <table runat="server" id="tblList">
                            <tr style="background-color: #FFFFFF">
                                <td id="Th1" runat="server">
                                    <asp:Label ID="hl1" runat="server" Text='Task Key' />
                                td>
                                <td id="Thd3" runat="server">
                                    <asp:Label ID="hl3" runat="server" Text='Priority' />
                                td>
                                <td id="Th4" runat="server">
                                    <asp:Label ID="hl4" runat="server" Text='Project Name' />
                                td>
                            tr>
                            <tr runat="server" id="itemPlaceholder">
                            tr>
                        table>
                        <table cellpadding="2" runat="server" id="tblEmployees" style="width: 460px">
                            <tr runat="server" id="Tr2">
                            tr>
                        table>
                        <asp:DataPager runat="server" ID="DataPager" PageSize="10">
                            <Fields>
                                <asp:NumericPagerField ButtonCount="10" PreviousPageText="<--" NextPageText="-->" />
                            Fields>
                        asp:DataPager>
                    LayoutTemplate>
                    <ItemTemplate>
                        <tr id="Tr1" runat="server" style="background-color: white; cursor: hand" onclick=<%#"javasc" + "ript:SelectMe(this,'" + Eval("Task Key") + "');" %> onmouseover="javascript:HighlightMe(this);" onmouseout="javascript:UnHighlightMe(this);">
                            <td id="Td1" runat="server">
                                <asp:Label ID="NameLabel" runat="server" Text='<%#Eval("Task Key") %>' />
                            td>
                            <td id="Td3" runat="server">
                                <asp:Label ID="Label2" runat="server" Text='<%#Eval("Priority") %>' />
                            td>
                            <td id="Td4" runat="server">
                                <asp:Label ID="Label3" runat="server" Text='<%#Eval("Project Name") %>' />
                            td>
                        tr>
                    ItemTemplate>
                asp:ListView>
                <br />
                <asp:Label runat="Server" ID="lblInfo">.asp:Label>
                <br />
                Edit Project:<br />
                <asp:ScriptManager ID="asmMain" runat="server">
                asp:ScriptManager>
                <asp:UpdatePanel ID="udpEditor" runat="server" UpdateMode="Conditional" OnLoad="udpEditor_Onload">
                    <ContentTemplate>
                        <wuc:EditControl ID="ctlEditor" runat="server" Text='' />
                    ContentTemplate>
                asp:UpdatePanel>
            font>
        div>
    form>
body>
html>

Help Please

By: miles thompson

miles thompson — Thu, 18 Aug 2011 04:13:25 +0000

Super helpful, thanks.

The key sentence for me was “As long as the event target of a __doPostBack() call is an async trigger of an UpdatePanel, the ASP.NET AJAX framework will intercept the postback”

meaning I had to add this before the post back was async ..

.. the reason i am overriding the clientside on click handler for something called a ‘button’ is a long story to do with Custom Button class and having to do some stupidity involving MS CMS before the postback begins.

By: Dirk

Dirk — Wed, 29 Jun 2011 06:37:25 +0000

Found the solution myself I missed some lines in my web.config. Don’t know why they weren’t there but it’s fixed now.
My __doPostBack() contained the clientID, for some reason my post got edited when submitting it.
Thanks for your help.

By: Dave Ward

Dave Ward — Tue, 28 Jun 2011 14:45:07 +0000

It’s important that the first parameter to __doPostBack() is the ClientID of a control which is an AsyncPostBackTrigger. That can be the UpdatePanel itself (as in this example), any of its AsyncPostBackTriggers, or any control inside the UpdatePanel if ChildrenAsTriggers is true (deafult: true).

By: Dirk

Dirk — Tue, 28 Jun 2011 10:58:45 +0000

I’ve run into some problems using this solution, I have a Scriptmanager and an UpdatePanel in my UserControl.
In my javascript I try to do a __doPostBack(”, ”);

This however refreshes my entire page.
Any ideas?

By: Dave Ward

Dave Ward — Thu, 09 Jun 2011 20:38:41 +0000

I’ve never run into anything like that. It might be best if you post as much of your code as possible on Stack Overflow and get more eyeballs looking at it.

By: Mike

Mike — Thu, 09 Jun 2011 11:33:02 +0000

Got your reply, David (however I don’t see it on the site yet). Thanks for your time!

Yes, the controls in question do have EnableViewState set to true (and is not overridden in code). Nothing on this page is created dynamically, but I do understand the issues if that was the case.

I’m stumped. We’re not talking about 1 or 2 controls here. Its EVERYTHING after the updatepanel (like 10 or more controls). :-(

Any other thoughts? Thanks again.

By: Dave Ward

Dave Ward — Wed, 08 Jun 2011 20:13:36 +0000

Have you double checked that they don’t have their EnableViewState property set to false, either declaratively in the ASPX markup or imperatively from the code behind? The other thing to watch out for is that controls which were dynamically added to the page need to be recreated early in the life cycle on every PostBack in order to be correctly re-populated with ViewState-driven data.