Showing posts with label custom. Show all posts
Showing posts with label custom. Show all posts

Wednesday, March 28, 2012

AJAX UpdatePanel, ASP.NET Repeater Control, and custom JavaScript for postback - Single ro

Good afternoon, everyone.

I am running into an interesting problem with the AJAX UpdatePanel and the ASP.NET Repeater control. For some background, we have been asked to develop a dynamic single row update for a data table that needs to be maintained by the users. The analyst does not want to use buttons, as this is supposed to be a data entry style of application (hands on keyboard at all times, no mouse interaction). The following rules define the behavior the analyst wants to have happen:

When a user changes the data in a row, the row should be marked as changed but not saved yet. (No individual control saves to the database.)

When a user leaves a row that has been changed, that row should be posted back to the server and saved to the database.

I was able to get this partly working with a GridView inside of an UpdatePanel, by using some custom client-side JavaScript to detect changes and to determine when to call __doPostBack to force the save to the database.

However, the entire GridView is posting back each time, which is not the desired effect. The analyst wants each row to post back individually. We are also running into enough of a performance bottleneck with the GridView postback, that we decided to try using Repeater instead, with an UpdatePanel around each row of data.

Unfortunately, changing the GridView to a Repeater turned out to be problematic. I am running into the following issues:

When the custom __doPostBack JavaScript method is called by a control inside a Repeater, which is nested inside an UpdatePanel, the entire page is posting back instead of just the UpdatePanel.

When attempting to move the JavaScript from the .aspx page to a JavaScript .js file, the client-side JavaScript aborts with an "Object expected" error when the custom __doPostBack JavaScript method is called. (The same code works fine when embedded in the .aspx page.)

I have managed to prune down the code to the bare essentials, and I was able to replicate these problems with standard ASP.NET code.

Would some of you please look over the code below and let me know if there is something obvious that I am doing wrong? Or would someone please explain why this is working fine for GridView but not for Repeater?

Thanks in advance for any help that you can provide.

We also have a suggestion to convert the custom JavaScript to server-side code by building custom controls that would expose OnFocus as a server-side event. Have any of you done something like this before? If so, do those custom controls work with the AJAX UpdatePanel?

Jeff Parker
Senior Software Developer
Explore Information Services


default.aspx - UpdatePanel contains Repeater control, client-side JavaScript embedded in the aspx page

-- default.aspx

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!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>Untitled Page</title></head><body> This is some text sitting outside the main control. It should not be refreshed by AJAX.<%=DateTime.Now%><br /> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional"> <ContentTemplate> <script type="text/javascript"> var currentRowChanged = -1; function SetRowChanged(rowIndex) { currentRowChanged = rowIndex; } function CheckRowChanged(repeaterUniqueID, controlID, newRowIndex) { if((currentRowChanged != -1) && (currentRowChanged != newRowIndex)) { saveInfo = 'SaveData$' + controlID + '$' + currentRowChanged + '$' + newRowIndex; currentRowChanged = -1; __doPostBack(repeaterUniqueID, saveInfo); } } </script> <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound" > <HeaderTemplate> This is inside the update panel and should be updated.<%=DateTime.Now%><br /> </HeaderTemplate> <ItemTemplate> <asp:TextBox ID="TextBox1" runat="server" />  <asp:TextBox ID="TextBox2" runat="server" />  <asp:TextBox ID="TextBox3" runat="server" /><br /> </ItemTemplate> </asp:Repeater> </ContentTemplate> </asp:UpdatePanel> </form></body></html>

-- default.aspx.cs

using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partialclass _Default : System.Web.UI.Page {protected void Page_Load(object sender, EventArgs e) {if(!IsPostBack) { BindData(); }else {if (Request.Form["__EVENTTARGET"].Contains(Repeater1.UniqueID.Replace(':','$'))) {if (Request.Form["__EVENTARGUMENT"].Contains("SaveData$")) {string[] aszSaveParameters = Request.Form["__EVENTARGUMENT"].Split('$');string szCurrentControlID = aszSaveParameters[1];int iSaveItemIndex = Convert.ToInt32(aszSaveParameters[2]);int iCurrentRowIndex = Convert.ToInt32(aszSaveParameters[3]); RandomizeRow(iSaveItemIndex); ScriptManager1.SetFocus(szCurrentControlID); } } } }private void RandomizeRow(int index) { RepeaterItem riSaveRow = Repeater1.Items[index]; Random oRandom =new Random(); TextBox TextBox1 = (TextBox)riSaveRow.FindControl("TextBox1"); TextBox1.Text = Convert.ToString(oRandom.Next()); TextBox TextBox2 = (TextBox)riSaveRow.FindControl("TextBox2"); TextBox2.Text = Convert.ToString(oRandom.Next()); TextBox TextBox3 = (TextBox)riSaveRow.FindControl("TextBox3"); TextBox3.Text = Convert.ToString(oRandom.Next()); }private void BindData() { Repeater1.DataSource = GetSampleData(); Repeater1.DataBind(); }private DataTable GetSampleData() { DataTable dtbSampleData =new DataTable(); dtbSampleData.Columns.Add("TestColumn1",typeof(string)); dtbSampleData.Columns.Add("TestColumn2",typeof(string)); dtbSampleData.Columns.Add("TestColumn3",typeof(string)); DataRow drSampleData = dtbSampleData.NewRow(); drSampleData["TestColumn1"] ="column 1, row 1"; drSampleData["TestColumn2"] ="column 2, row 1"; drSampleData["TestColumn3"] ="column 3, row 1"; dtbSampleData.Rows.Add(drSampleData); drSampleData = dtbSampleData.NewRow(); drSampleData["TestColumn1"] ="column 1, row 2"; drSampleData["TestColumn2"] ="column 2, row 2"; drSampleData["TestColumn3"] ="column 3, row 2"; dtbSampleData.Rows.Add(drSampleData); drSampleData = dtbSampleData.NewRow(); drSampleData["TestColumn1"] ="column 1, row 3"; drSampleData["TestColumn2"] ="column 2, row 3"; drSampleData["TestColumn3"] ="column 3, row 3"; dtbSampleData.Rows.Add(drSampleData); drSampleData = dtbSampleData.NewRow(); drSampleData["TestColumn1"] ="column 1, row 4"; drSampleData["TestColumn2"] ="column 2, row 4"; drSampleData["TestColumn3"] ="column 3, row 4"; dtbSampleData.Rows.Add(drSampleData); drSampleData = dtbSampleData.NewRow(); drSampleData["TestColumn1"] ="column 1, row 5"; drSampleData["TestColumn2"] ="column 2, row 5"; drSampleData["TestColumn3"] ="column 3, row 5"; dtbSampleData.Rows.Add(drSampleData); dtbSampleData.AcceptChanges();return dtbSampleData; }protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e) {if((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem)) { DataRowView drvSampleData = (DataRowView) e.Item.DataItem; TextBox TextBox1 = (TextBox)e.Item.FindControl("TextBox1"); TextBox1.Text = Convert.ToString(drvSampleData["TestColumn1"]); TextBox1.Attributes["onchange"] ="javascript:SetRowChanged(" + e.Item.ItemIndex +")"; TextBox1.Attributes["onfocus"] ="javascript:CheckRowChanged('" + Repeater1.UniqueID +"', '" + TextBox1.ClientID +"', " + e.Item.ItemIndex +")"; TextBox TextBox2 = (TextBox)e.Item.FindControl("TextBox2"); TextBox2.Text = Convert.ToString(drvSampleData["TestColumn2"]); TextBox2.Attributes["onchange"] ="javascript:SetRowChanged(" + e.Item.ItemIndex +")"; TextBox2.Attributes["onfocus"] ="javascript:CheckRowChanged('" + Repeater1.UniqueID +"', '" + TextBox1.ClientID +"', " + e.Item.ItemIndex +")"; TextBox TextBox3 = (TextBox)e.Item.FindControl("TextBox3"); TextBox3.Text = Convert.ToString(drvSampleData["TestColumn3"]); TextBox3.Attributes["onchange"] ="javascript:SetRowChanged(" + e.Item.ItemIndex +")"; TextBox3.Attributes["onfocus"] ="javascript:CheckRowChanged('" + Repeater1.UniqueID +"', '" + TextBox1.ClientID +"', " + e.Item.ItemIndex +")"; } }protected override void RaisePostBackEvent(System.Web.UI.IPostBackEventHandler sourceControl,string eventArgument) {if ((eventArgument !=null) && (eventArgument.Contains("SaveData$"))) {// Do nothing }else {base.RaisePostBackEvent(sourceControl, eventArgument); } }}

default2.aspx - UpdatePanel contains Repeater control, client-side JavaScript included using ScriptManager.RegisterClientScriptInclude method

-- default2.aspx

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="_Default2" %><!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>Untitled Page</title></head><body> This is some text sitting outside the main control. It should not be refreshed by AJAX.<%=DateTime.Now%><br /> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional"> <ContentTemplate> <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound" > <HeaderTemplate> This is inside the update panel and should be updated.<%=DateTime.Now%><br /> </HeaderTemplate> <ItemTemplate> <asp:TextBox ID="TextBox1" runat="server" />  <asp:TextBox ID="TextBox2" runat="server" />  <asp:TextBox ID="TextBox3" runat="server" /><br /> </ItemTemplate> </asp:Repeater> </ContentTemplate> </asp:UpdatePanel> </form></body></html>

-- default2.aspx.cs

using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partialclass _Default2 : System.Web.UI.Page {protected void Page_Load(object sender, EventArgs e) {if(!IsPostBack) {if (!ClientScript.IsClientScriptIncludeRegistered("SingleRowUpdate")) { ScriptManager.RegisterClientScriptInclude(this,typeof (Page),"SingleRowUpdate","JScript.js"); } BindData(); }else {if (Request.Form["__EVENTTARGET"].Contains(Repeater1.UniqueID.Replace(':','$'))) {if (Request.Form["__EVENTARGUMENT"].Contains("SaveData$")) {string[] aszSaveParameters = Request.Form["__EVENTARGUMENT"].Split('$');string szCurrentControlID = aszSaveParameters[1];int iSaveItemIndex = Convert.ToInt32(aszSaveParameters[2]);int iCurrentRowIndex = Convert.ToInt32(aszSaveParameters[3]); RandomizeRow(iSaveItemIndex); ScriptManager1.SetFocus(szCurrentControlID); } } } }private void RandomizeRow(int index) { RepeaterItem riSaveRow = Repeater1.Items[index]; Random oRandom =new Random(); TextBox TextBox1 = (TextBox)riSaveRow.FindControl("TextBox1"); TextBox1.Text = Convert.ToString(oRandom.Next()); TextBox TextBox2 = (TextBox)riSaveRow.FindControl("TextBox2"); TextBox2.Text = Convert.ToString(oRandom.Next()); TextBox TextBox3 = (TextBox)riSaveRow.FindControl("TextBox3"); TextBox3.Text = Convert.ToString(oRandom.Next()); }private void BindData() { Repeater1.DataSource = GetSampleData(); Repeater1.DataBind(); }private DataTable GetSampleData() { DataTable dtbSampleData =new DataTable(); dtbSampleData.Columns.Add("TestColumn1",typeof(string)); dtbSampleData.Columns.Add("TestColumn2",typeof(string)); dtbSampleData.Columns.Add("TestColumn3",typeof(string)); DataRow drSampleData = dtbSampleData.NewRow(); drSampleData["TestColumn1"] ="column 1, row 1"; drSampleData["TestColumn2"] ="column 2, row 1"; drSampleData["TestColumn3"] ="column 3, row 1"; dtbSampleData.Rows.Add(drSampleData); drSampleData = dtbSampleData.NewRow(); drSampleData["TestColumn1"] ="column 1, row 2"; drSampleData["TestColumn2"] ="column 2, row 2"; drSampleData["TestColumn3"] ="column 3, row 2"; dtbSampleData.Rows.Add(drSampleData); drSampleData = dtbSampleData.NewRow(); drSampleData["TestColumn1"] ="column 1, row 3"; drSampleData["TestColumn2"] ="column 2, row 3"; drSampleData["TestColumn3"] ="column 3, row 3"; dtbSampleData.Rows.Add(drSampleData); drSampleData = dtbSampleData.NewRow(); drSampleData["TestColumn1"] ="column 1, row 4"; drSampleData["TestColumn2"] ="column 2, row 4"; drSampleData["TestColumn3"] ="column 3, row 4"; dtbSampleData.Rows.Add(drSampleData); drSampleData = dtbSampleData.NewRow(); drSampleData["TestColumn1"] ="column 1, row 5"; drSampleData["TestColumn2"] ="column 2, row 5"; drSampleData["TestColumn3"] ="column 3, row 5"; dtbSampleData.Rows.Add(drSampleData); dtbSampleData.AcceptChanges();return dtbSampleData; }protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e) {if((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem)) { DataRowView drvSampleData = (DataRowView) e.Item.DataItem; TextBox TextBox1 = (TextBox)e.Item.FindControl("TextBox1"); TextBox1.Text = Convert.ToString(drvSampleData["TestColumn1"]); TextBox1.Attributes["onchange"] ="javascript:SetRowChanged(" + e.Item.ItemIndex +")"; TextBox1.Attributes["onfocus"] ="javascript:CheckRowChanged('" + Repeater1.UniqueID +"', '" + TextBox1.ClientID +"', " + e.Item.ItemIndex +")"; TextBox TextBox2 = (TextBox)e.Item.FindControl("TextBox2"); TextBox2.Text = Convert.ToString(drvSampleData["TestColumn2"]); TextBox2.Attributes["onchange"] ="javascript:SetRowChanged(" + e.Item.ItemIndex +")"; TextBox2.Attributes["onfocus"] ="javascript:CheckRowChanged('" + Repeater1.UniqueID +"', '" + TextBox1.ClientID +"', " + e.Item.ItemIndex +")"; TextBox TextBox3 = (TextBox)e.Item.FindControl("TextBox3"); TextBox3.Text = Convert.ToString(drvSampleData["TestColumn3"]); TextBox3.Attributes["onchange"] ="javascript:SetRowChanged(" + e.Item.ItemIndex +")"; TextBox3.Attributes["onfocus"] ="javascript:CheckRowChanged('" + Repeater1.UniqueID +"', '" + TextBox1.ClientID +"', " + e.Item.ItemIndex +")"; } }protected override void RaisePostBackEvent(System.Web.UI.IPostBackEventHandler sourceControl,string eventArgument) {if ((eventArgument !=null) && (eventArgument.Contains("SaveData$"))) {// Do nothing }else {base.RaisePostBackEvent(sourceControl, eventArgument); } }}

-- JScript.js

// JScript Filevar currentRowChanged = -1;function SetRowChanged(rowIndex){ currentRowChanged = rowIndex;}function CheckRowChanged(repeaterUniqueID, controlID, newRowIndex){if((currentRowChanged != -1) && (currentRowChanged != newRowIndex)) { saveInfo ='SaveData$' + controlID +'$' + currentRowChanged +'$' + newRowIndex; currentRowChanged = -1; __doPostBack(repeaterUniqueID, saveInfo); } }

web.config - project web config file

<configuration><configSections><sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"><sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"><section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/><sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"><section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere"/><section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/><section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/></sectionGroup></sectionGroup></sectionGroup></configSections><system.web><pages><controls><add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/></controls></pages><!-- Set compilation debug="true" to insert debugging symbols into the compiled page. Because this affects performance, set this value to true only during development. --><compilation debug="true"><assemblies><add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/></assemblies></compilation><httpHandlers><remove verb="*" path="*.asmx"/><add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/></httpHandlers><httpModules><add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/></httpModules></system.web><system.web.extensions><scripting><webServices><!-- Uncomment this line to customize maxJsonLength and add a custom converter --><!-- <jsonSerialization maxJsonLength="500"> <converters> <add name="ConvertMe" type="Acme.SubAcme.ConvertMeTypeConverter"/> </converters> </jsonSerialization> --><!-- Uncomment this line to enable the authentication service. Include requireSSL="true" if appropriate. --><!-- <authenticationService enabled="true" requireSSL = "true|false"/> --><!-- Uncomment these lines to enable the profile service. To allow profile properties to be retrieved and modified in ASP.NET AJAX applications, you need to add each property name to the readAccessProperties and writeAccessProperties attributes. --><!-- <profileService enabled="true" readAccessProperties="propertyname1,propertyname2" writeAccessProperties="propertyname1,propertyname2" /> --></webServices><!-- <scriptResourceHandler enableCompression="true" enableCaching="true" /> --></scripting></system.web.extensions><system.webServer><validation validateIntegratedModeConfiguration="false"/><modules><add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/></modules><handlers><remove name="WebServiceHandlerFactory-Integrated"/><add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/></handlers></system.webServer></configuration>
Ok, here is a little secret about Update panel!Update panel posts back everything as in traditional .NET 1.1 Post back.Only at the rendering on the server does it realizes that it would only need to send what is in the update panel and sends only that part as response.So, your request is same as the post-back model. Only your response is minimized.I guess what you should be doing is making a call to Web Service or Web Method in a page and use JSON for serialization.

This way you would only send what you need to send and get back what is necessary...but you would have to write some Java Script :)


I can understand what you are saying to a certain degree. Indeed that is something to look into (and something to argue about with developers that don't like JavaScript) for performance increases. Thanks, Ravivb, for the info. I was not aware of JSON.

Unfortunately, there is still the root problem I'm having with AJAX. Somehow the server is not recognizing that it needs to refresh only a certain portion of the page. It is re-rendering everything. In the sample provided, the time outside the UpdatePanel is updated along with the time inside the UpdatePanel on every row change. Thus AJAX does not appear to be working at all on this page, as everything is posting back and being refreshed, rather than just the section inside the UpdatePanel.

Also, I don't understand why the JavaScript can't be loaded from a JavaScript .js file. It shouldn't make any difference if the JavaScript is embedded in the page or if it is being included from a file. But for some reason there is a difference.

Jeff


I have not followed your entire code to give proper answer on JavaScript problem.

But, if i were you, i would start at looking in to java script file path mapping to see if the path mapping is done right once the html is sent to client..

Next, try to debug java script to see what is going on. (you could use Firebug for FF or IE developer Toolbar fromhere

-good luck


Kalnir,

try looking into webservice. I have a few pages that are huge, doing postback on them is a pain in the b**t. Your webservice can be called from your javascript function.


Thanks, Ravivb and WishStar99. I just read up on JSON and the ASP.NET callback event technique, and I'm starting to work on constructing a test version of the page using the technique. I'll keep the webservice call in mind as well.

I'm not sure that will fix the problem I'm having with Repeater inside UpdatePanel, though. Any idea why the whole page is flashing instead of just the UpdatePanel region?


Heya, folks.

I want to thank Ravivb and WishStar99 for their help with this problem. The application was modified to use JSON and the ASP.NET callback event technique. The solution appears to be working fine and is fast enough to be acceptable to the end users.

The following articles helped me learn about JSON and how to work with it in .NET:

JSON (JavaScript Object Notation) data interchange format: http://json.org/


Glad it worked out...


Hi Jeff,

Can you show me in which article I can see some code sample for refreshing the gridView single row, as u did instead of using updatepanels.

I can t find some code sample where I refer the gridview or datagrid's single row.

Anyway, can u show us some code sample pls for doing what u did. i didn t find that on internet. I m not talking about calling the webmethod but especially m talking about the javascript DOM part that takes the result send by the webmethod and refreshes the datagrid or gridview's single row.

Thanks a lot.


Very interesting info on the JSON stuff.

I wanted to mention that I have almost successfully implemented a fully Ajax website using asp.net 2.0, however with one major problem. I have a Repeater object inside the UpdatePanel control, but everytime the Timer control kicks fires the asynch update it freezes up all of the page controls (i.e. hyperlinks, dropdownlists, etc.).

I have an update image that flashes with every Asynch update; and everytime the image appears I cannot click on any links nor access the dropdown lists. It's very frustrating.

Has anyone experiences this with a Repeater inside an UpdatePanel ? Any advice or ideas ?

Thank you very much,

Bob

Monday, March 26, 2012

AJAX to grab a server controls RenderContents() output

Hi everyone,

My web application dynamically loads custom built server controls at runtime from seperate assemblies using the reflection namespace. Everything works fine, and the server controls display on the page as required.

I would like to extend this, to enable the server controls to be displayed asycronously. Is it possible to make an asynronous request to the web server and then when the server control is loaded, pass back the HTML that is generated in the RenderContents() method as the responseText?

How would I go about doing this? Example code would be great.

Any help is much appreciated,
Ad

Hi,

I'm still stuck on this on this one, any ideas?

Thanks again,
Ad


Hi,

Please refer to this:Emailing the Rendered Output of an ASP.NET Web Control, it implements the function you need.

Hope this helps.

NOTE:This response contains a reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you. Microsoft does not control these sites and has not tested any software or information found on these sites; therefore, Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. There are inherent dangers in the use of any software found on the Internet, and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet.


This link looks like a good start, but a bit more sample code especially on the Ajax part would be very helpful.

Regards

Dion


Hi Dion,What probelms do you have after you've got the output of a control?

Saturday, March 24, 2012

Ajax timer and update panels

Is there a way that an updatepanel could be set (through an attribute) to ONLY update when something has changed without the need to write custom code?

For example, I have a page with an updatepanel on it that updates its contents every 10 seconds. However, I only want to refresh the data in that update panel when something in it has changed - not every single time the timer fires. The updatepanel has images in it and, because i do not want to display any cached results, I setResponse.CacheControl = "no-cache" and Response.AddHeader("Pragma", "no-cache")on page_init. The end result is screen flicker every 10 seconds).

It would be nice to have the update panel only update if something has changed by comparing the existing and the new data.

suggestions welcome - just email me or post a reply

Dan

Hi,dan.kotarski

I am afraid UpdatePanel cann't do this!

Maybe you can use WebService or PageMethod as an alternative, You can write some JS to compare the existing data and the new data in the result of WebService or PageMethod.

Let me know if you need more info.

Hope this helps.

Thanks!

Wednesday, March 21, 2012

AJAX Tab Container/Panel Styles

Hello,

Has anyone successfully overwridden the AJAX Tab Container styles? When I attempt to create custom styles for the tab container or tabs, all styling goes away completly on the tabs. I must be doing something wrong. Can anyone provide some clear examples of overwriding these styles? Thanks.

You can look here:http://www.asp.net/AJAX/Control-Toolkit/Live/Tabs/Tabs.aspx at theTabs Theming section for how to go about styling the tabs...

-Damien


I was working with overwridden themes for tabs, but it doesn't work sucessfully. After that, I copy from the masters css style for tabs and paste in my own css, but it doesn't work too...

It generate a problem in tabs with the margin automaticly assigned.

Please if someone can do work correctly the tabs whit personalized styles post the correct clases overwridden.


I have followed the asp.net/ajax toolkit tab theming information and I am still unable to get the styling to work. When I try to override the styles, I loose all styling all together. Does anyone have examples of working styles for the ajax tabs?


I've create a blog entry for you in regards to theming the tabs; along with the source code...http://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx

Hope this helps.

-Damien


I posted on your blog as well but what about styling the individual tab panels seperatley so that I can control each tabs style?

I followed your example and got the container styling working fine but I can't figure out how to control the tab panels individually.

Any ideas.


Try this link, I came across it today on Silverlight.net...

http://mattberseth.com/blog/2007/09/more_sample_ajaxcontroltoolkit.html


Thanks for the link. It isn't quite what I looking for though. He is placing different icons on the tabs by altering the header template.

What I need to do is give an entirely different style for each tab (header, outer, inner, body, and hover states). There may be some sort of CSS trick that can be done to accomplish this but my CSS skills are lacking.


You can assign a custom CSS directly to the tab. I'm not sure exactly of the syntax for this, but bascially you want to assign the CSS to the SPAN on line 1 inmy example

01 <spanid="..."class="ajax__tab_active">
02 <spanclass="ajax__tab_outer">
03 <spanclass="ajax__tab_inner">
04 <spanid="..."class="ajax__tab_tab">Tab 1</span>
05 </span>
06 </span>
07</span>

-Damien