Javascript Component and server-side ASP.NET wrapper

Editorial  Note

    This article  appears in the Third Party products and Tools section. Articles in this section are for the  members only and must not be used to promote or advertise products in any way,shape or form .please report any spam or advertising.

Introduction

       In this article,we demonstrate how to easily achieve identical  setup -data visualization. with two different approaches-one using a javascript client side component and the other one using am ASP.NET server-side control, The sample uses chart Components from ShieldUI,which are freely available from their site.

Background

    often times, when one is using UI components,he is limited to one technology or IDE ,While this is not a problem in itself ,there may be occasions when flexibility is requried .For example when a new developer or  team start collaborating on a project ,or the project requirements change.Using a client side component, and its server-side counterpart  is one solution to the problem. The screenshot below demonstrates both controls on the same page , with identical rendered layout:

Additionally ,both server and client/javascript components have their advantages and disadvantages when coding .for example, the server-side ASP.NET component provides the comfort of working in Visual Studio,as opposed to directly coding in javascript

 Using the code

    we start off by creating a new Visual Studio 2010 application .It will include the follwing required elements;

 1.An  .aspx page,which will host both the client and server components

2 the shield.Web.UI DLL ,which will be required in order to use the ASP.NET  server-side component

3. the js files,necessary for the client side component

 The structure of the project may look similar to this;

   all required files are included in the working sample at the top of the article.

  from a coding perspective , the fist task at hand is to inculde the script and css files for the client side component,which we will be adding first. this can be done in the head section of the .aspx page and looks like this：

    the next step is to add the javascript code ,which will initialize the component and render it to the page. This is done easily , and requires a javascript tag and a div (which will host the actual chart) nested within the page.This is demonstrated in the code sample below:

     the code is pretty straightforward-it initializes the chart with numeric range values on a datetime interval.all of the data passed to the control is visible in the "dataseries" object .The next step in our demonstration is to  introduce the server-side chart .it will render identical data and visualization.However .its code is much different.For the ASP.NET chart ,we start by adding a reference to the ShieldWeb.UI DLL,and registering it  on the .aspx page:

      Subsequent to this ,we need to enable certain setting for the control ,in order to have the same layout as in the client-side chart. This is demonstrated in the code snippet below:

    The only thing missing from the .aspx code above is the data for the control In the client side component it was passed directly to the component in the script  which created it .The asp.net server component, however ,is populated with data in a diferent manner .This is done in the code-behind of our ASPX page .For this purpose we use the "TakeDataSource" event handler ,In addition to this ,in the Page_Load event handler ,we adjust the data start and end intervals ,All of this is demonstrated, in the snippet below:

  This completes our setup , the two charts are rendered identically on page ,Which way we use to handle our data visualization tasks is up to us .having flexibity,however makes development easier.