|
Partial Updates not working in WebPage using WebUserControl from same ascx file multiple |
Posted by Stefan on Aug-20-2012 18:50 |
|
Hi,
I am using ChartDirector 5.1 for showing 4 graphics on one Webpage, using the same WebUserControl twice from the same ascx file via JsChartViewer control in JavaScript from cdjcv.js for zooming and scrolling.
But, if I activate all 4 Controls on my Webpage the partial Updates are no longer working correctly.
I extracted the code from my project into a test project using the demo examples for scrolling and zooming from ChartViewer 4.1 documentation.
If I only use the WebUserControl from WebUserControl1.ascx and WebUserControl2.ascx once in my page Default.aspx, the partial updates work fine.
(Test this by Commenting out ID="WebUserControl1_2" and ID="WebUserControl1_4" in Default.aspx. I put some alert() in the js code for debugging purpose. You only need to put netchartdir.dll from V5.1 into bin folder)
What is going wrong there if I want to reuse the controls from .ascx files ?
How should I implement my code better ?
What is missing to get the partial updates correctly acc. to their "update" buttons ?
I attached my test project here. It is a VisualStudio 2005 project (according to our company rules).
Could you please have a look on my code and help me ?
Regards
Stefan
|
Re: Partial Updates not working in WebPage using WebUserControl from same ascx file multiple |
Posted by Peter Kwan on Aug-21-2012 02:11 |
|
Hi Stefan,
I will analyze your code in more details, but from preliminary inspection, I believe at least part of the issue are due to symbols conflicts. For example, your code WebUserControl1.ascx is using the hard coded Javascript function name initJsChartViewer1. If there are more than one instance of the control, there will be multiple copies of initJsChartViewer1, with the code in every copy of initJsChartViewer1 different (the code in initJsChartViewer1 includes the variable <%=WebChartViewer1.ClientID%>, which ASP.NET will resolve to a different name in different instance of the user control).
To solve the above problem, for unique functions like initJsChartViewer1, you would need to give it a unique name too. May be you can try to use the name:
initJsChartViewer_<%=WebChartViewer1.ClientID%>
For non-unique Javascript functions (such as copyToViewer1), in theory they should not be duplicated too (but I think in practice, the browser will tolerate the duplication). The ClientScriptManager should be used to ensure these functions are added only once in the web page irrespective of how many instances of the control are on the page.
To start up the control, I suggest you use the Javascript function attachEvent/addEventListener to add the initJsChartViewer_<%=WebChartViewer1.ClientID%> to the onload event handler of the body tag.
Regards
Peter Kwan |
Re: Partial Updates not working in WebPage using WebUserControl from same ascx file multiple |
Posted by Stefan on Aug-24-2012 17:22 |
|
Hi Peter,
I am one step further now according to your answer. You are right that there were symbol conflicts and I solved them for the initJsChartViewer_* functions according to your idea.
Now the partial updates for all 4 graphics are fine, but the access to the dropdownlists are not correctly matched between Javascript-code and ascx-CSharp-Code .
Example:
If I press on my page the "Update" button of the lower left graphics, I see on Javascript side the correct ID (="WebUserControl1_4_StartYear2") for the Start Year (see alert message I put in there), but in the Debugger on the CSharp-Code in WebUserControl2.asc.cs, line 87 I get for the StartYear2.ClientID the value "WebUserControl1_3_StartYear2" which leads to a null string in viewer.GetCustomAttr(StartYear2.ClientID) and crashes then.
WebUserControl2.asc.cs, line 87:
int sYear = int.Parse(viewer.GetCustomAttr(StartYear2.ClientID));
I attached again my current solution for VS2005 without netchartdir.dll (V5.1) in bin-Folder.
I know, it is again a (unique) name problem.
Could you please have a look on my code again and tell me, how to solve this problem here ?
Regards
Stefan
P.S. The next week I will not be available. So here from me again the following week.
|
Re: Partial Updates not working in WebPage using WebUserControl from same ascx file multiple |
Posted by Stefan on Aug-24-2012 17:26 |
|
Sorry, there was a miswriting. It should be:
If I press on my page the "Update" button of the lower "right" graphics, ...
Stefan wrote:
If I press on my page the "Update" button of the lower left graphics, ... |
Re: Partial Updates not working in WebPage using WebUserControl from same ascx file multiple |
Posted by Peter Kwan on Aug-25-2012 01:11 |
|
Hi Stefan,
Is it possible your control is trying to process the wrong event?
I see you have the following code:
if ( pageid != null && ! pageid.Contains("WebChartViewer2") ) return; // wrong event for this Page
The above code will process any event with pageid contains WebChartViewer2. In your case, there can be multiple controls in your page where the pageid contains WebChartViewer2. So a page can incorrectly process the event intended for other instances of the control.
May be you can try something like:
if ( pageid != null && pageid != WebChartViewer2.ClientID ) return; // wrong event for this Page
Hope this can help.
Regards
Peter Kwan |
Re: Partial Updates not working in WebPage using WebUserControl from same ascx file multiple |
Posted by Stefan on Sep-04-2012 20:18 |
|
Hi Peter,
Thanks a lot. Your solution works for my test program now.
I really got the wrong events for other instances of the control.
Now, I will have to transfer this to my real program code.
Regards
Stefan |
Re: Partial Updates not working in WebPage using WebUserControl from same ascx file multiple |
Posted by Stefan on Sep-07-2012 19:13 |
|
Hi Peter,
now I extended my program for Scrolling and Zooming, like described in CharViewer examples using "cdjcv.js" , and I ran again in a problem with multiple instances of the same control here.
I tried several approaches to solve the problem, but did not succeed in attaching the eventhandlers of ChartViewer to the Scroll/ZoomIn/ZoomOut buttons for all instances. I am not familiar enough with JS programming .
My current solution, that I attached here, is able to select the buttons in the upper left graphics for Zooming and Scrolling, but it sets the controls for the upper right graphics. Quite bad ... The other way round, nothing is working.
Could you please have a look on my code and give me a solution for this problem ?
Regards
Stefan
|
Re: Partial Updates not working in WebPage using WebUserControl from same ascx file multiple |
Posted by Peter Kwan on Sep-08-2012 00:06 |
|
Hi Stefan,
One most important thing you need to note is that in HTML/Javascript, the ids and names need to be unique. For example, the following code is incorrect in a control:
<div id="xxx">Hello World</div>
It is because the id is "xxx". If there are multiple instance of the control, then there will be multiple instance of the DIV block, all using id="xxx", and this is invalid according to HTML syntax. The same applies to Javascript function names.
In your code, I see many constant ids in HTML, like id="ViewerMouseUsage1_ZoomIn", id="ViewerMouseUsage1_ZoomOut", etc.. They should all be replaced with unique ids. For example, you can replace ViewerMouseUsage1 with anything that you know is unique in the web page and is valid as HTML ids. An example is to replace ViewerMouseUsage1 with ViewerMouseUsage_<%=WebChartViewer1.ClientID%>. (The ASP.NET system will ensure WebChartViewer1.ClientID is unique with the resulting HTML and is valid as an HTML id. As WebChartViewer1.ClientID is unique, so ViewerMouseUsage_<%=WebChartViewer1.ClientID%> will be unique too.
Regards
Peter Kwan |
Re: Partial Updates not working in WebPage using WebUserControl from same ascx file multiple |
Posted by Stefan on Sep-13-2012 14:54 |
|
Hi Peter,
Thanks for your good support. Now my test program and my real application work correctly after I changed my ids according to your remarks with unique ids.
BR
Stefan |
|