C#: Bind a DropDownList to IDictionary using AjaxPro

- Implement an AjaxMethod to return IDictionary object

 

[AjaxPro.AjaxMethod]

public IDictionary AjaxGetIDictionary()

{

//Prepare the IDictionary object

}

- Use JavaScript to request the AjaxMethod AjaxGetIDictionary

MyAjaxClass. AjaxGetIDictionary (jsAjaxGetIDictionary_Callback);

- In the JavaScript function jsAjaxGetIDictionary_Callback add the IDictionary items to the DopDownList

function jsAjaxGetIDictionary (response)

{

     try

    {

         var DictionaryItems= response.value;

         if (DictionaryItems == null || typeof(DictionaryItems) != “object”)

        {

               return;

         }

         var myDropDownList = document.getElementById(“myDropDownList”);

         myDropDownList.options.length = 0;

         for (var i = 0; i < response.value.length; ++i)

         {

             myDropDownList.options[myDropDownList.options.length] = new Option(response.value[i].Value,response.value[i].Key);

           }

    }

    catch(e)

   {

   }

}

Firefox 2.0 – InnerHTML issue

Sorry about the long time between posts. Hope to start posting again soon

 

Anyhow,

 

I was working on a web application that is updating the details of a <map> HTML element using the innerHTML, the new innerHTML value is being processed in the server side using AJAX function

 

I was using the following JavaScript function to do that

 

function jvUpdateImageMap(ImageMapHTML) 

{

    try

    {

          document.getElementById(“MyImageMap”).innerHTML= ImageMapHTML;

           

     }

catch(err)

          {

          }

          finally

          {

          }

}

 

That was working fine for all the browser including Firefox 3.0 but not for Firefox 2.0

 

After debugging this I found that for FireFox 3.0 the result of updating the InnerHTML is this

 

  <map id=”MyImageMap” >

          <area SHAPE=”rect” id=”0_30″ usemap=”MyImageMap” Border=”0″ href=”#” COORDS=”538,420,550,408″ />

 </map>

 

 

This is the correct expected result

 

But for FIreFox 2.0 the result was this

 

<map id=”MyImageMap” >

<map id=”MyImageMap” >

          <area SHAPE=”rect” id=”0_30″ usemap=”MyImageMap” Border=”0″ href=”#” COORDS=”538,420,550,408″ />

</map>

</map>

 

 

So to fix this I had to add those lines to the server side function that generate the new <map> HTML code  

If Context.Request.Browser.Browser = “Firefox” Then

       If Context.Request.Browser.MajorVersion = “2″ Then

               ImageMapHTML = ImageMapHTML.Replace(“<map id=”"MyImageMap”" >”, “”)

                ImageMapHTML = ImageMapHTML.Replace(“</map>”, “”)

        End If

End If

 

Using PageMethods/WebMethods to update Sessions variable

I created functions for updateing/reading sessions variables using PageMthods and WebMethods, I am using VS2005 (VB.NET):

 

Import the web.services library

  Imports System.Web.Services 

 

This is the VB.NET function for setting the session variables

           <WebMethod()> _

Public Shared Function AjaxSetSession(ByVal SessionValue As String)

                    Try

                             HttpContext.Current.Session(“SessionKey”) = SessionValue

                   Catch ex As Exception

 

                   End Try

          End Function

 To access the session we need to use HttpContext.Current.Session

 

This is the VB.NET function for getting the session variables

       <WebMethod()> _

          Public Shared Function AjaxGetSession() As String

                    Try

                             AjaxGetSession = HttpContext.Current.Session(“SessionKey”)

                    Catch ex As Exception

                             AjaxGetSession = “Error”

                    End Try

    End Function

 

This is the JavaScript Code to set the session variable

 

PageMethods.AjaxSetSession(“PageMethods”,”WebMethods”)

This the JavaScript Code to read the Session Variables

 

PageMethods.AjaxGetSession(JSGetSessionSucess,JSGetSessionFaild);

 

JSGetSessionSucess is a JavaScript function that would be executed if the AjaxGetSession succeeded

 

       function JSGetSessionSucess(value, methodName)

      {

               try

              {

                        alert(value);

                }

catch(err)

               {

               }

               finally

               {

              }

      }

 

JSGetSessionFaild is a JavaScript function that would be executed if the AjaxGetSession failed

        function JSGetSessionFaild (ex, methodName)

      {

               try

              {

                        alert(ex.get_exceptionType());

                }

catch(err)

               {

               }

               finally

               {

              }

      }

 

Using AJAX Pro (step by step):

This is a simple guide for using the AJAX Pro in VS2003

 

1-     Add the AJAXPro.dll to your bin folder

 

-         Right click on the bin folder and select “Add Reference… ”

 

 

 

-         Select the browse tab and browse for the AjaxPro.dll folder to select it and click ok

 

 

2-     Add the following to your web.config file

 

<httpHandlers>

          <add verb=“POST,GET“ path=“ajaxpro/*.ashx“ type=“AjaxPro.AjaxHandlerFactory, AjaxPro.2“/>

</httpHandlers>

 

3-     Create a Class to write your Ajax functions

-         Right Click on the App_Code folder and select “Add New Item…”

 

 

-         Select “Class” from the templates; enter a name for your class and click Add

 

 

4-     In your class imports the AjaxPro Library and create your function as the following:

 

       <AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)> _

Public Function AjaxFunction(ByVal strVariable As String) As String

 

5-     In the ASP Page that need to use the Ajax Function:

 

-         Import your Ajax Class library

-         Add a function to the body onload event

<body   onload=”BodyOnLoad()”

-         In the BodyOnLoad assign a variable to your class

 

function BodyOnLoad()

                    {

                       LPMyAjax = IMGSLB.MyAjax;

     }

 

 

6-     Now you can call the ajax function from JavaScript

 

    function jsCallAjax(strValue)

    {

        try

        {

           

            LPMyAjax.AjaxFunction(strValue,jsCallAjaxCallback);

        }

        catch(err)

              {

            alert(err.message)

              }

              finally

              {

                    

              }

    }

AjaxControlToolkit’s TabContainer: Navigation Buttons With Scroll Header

I used the code from Matt Berseth to create navigation buttons to change the selected tabs, but as I was using the tabs in a Left frame in the Web application; I did not have enough space to display all the tabs headers, the navigation buttons was working fine but the headers was invisible, so I changed the code to add a horizontal scrolling for the Header. I am creating dynamic tabs so I do not know the required value of the scroll as I do not know the width of the headers, and so I am using (_header.offsetWidth) for the active tab as a scroll value

 

HTML code:

 

 

<cc2:TabContainer  AutoPostBack=”false” style=”Z-INDEX: 102; LEFT: 0px; POSITION: absolute; TOP: 18px”  ID=”TabContainer1″ runat=”server” Width=”100%”>

</cc2:TabContainer>

          

<asp:ImageButton  ImageUrl=”images/scrollnext.gif”  id=”tabNext” ToolTip=”Next tab”   OnClientClick=”onNavigate(true); return false;”  style=”Z-INDEX: 102;  POSITION: absolute; TOP: 0px;  left:20px  “    runat=”server” />

<asp:ImageButton ImageUrl=”images/scrollpre.gif” id=”tabPrev” ToolTip=”Previous tab” OnClientClick=”onNavigate(false); return false;”  style=”Z-INDEX: 102;  POSITION: absolute; TOP: 0px; “  runat=”server” />

 

JavaScript functions:

 

    function onNavigate(isMoveNext)

    {

        //  find the behavior for the tab control

        var tabs = $find(‘TabContainer1′);

        //  figure out what the total number of tabs are

        var totalNumOfTabs = tabs.get_tabs().length;

        //  if we don’t have any tabs, just return

        if(totalNumOfTabs > 0)

        {

            var newTabIndex;

            var currentTabIndex = tabs.get_activeTabIndex();

            if(isMoveNext)

            {

                //  wrap around to the begining

                if(currentTabIndex + 1 == totalNumOfTabs)

                {

                    newTabIndex = 0;

                }

                else

                {

                    newTabIndex = currentTabIndex + 1;

                }

            }

            else

            {

                //  wrap around to the end

                if(currentTabIndex – 1 < 0)

                {

                    newTabIndex = totalNumOfTabs – 1;

                }

                else

                {

                    newTabIndex = currentTabIndex – 1

                }

            }

            tabs.set_activeTabIndex(newTabIndex);

            var aTab  = tabs.get_activeTab()

            if(isMoveNext)

            {

                if (newTabIndex == 0)

                {

                    document.getElementById(“TabContainer1_header”).scrollLeft=0;}

                else

                {

                    scrollDivLeft(“TabContainer1_header”,aTab._header.offsetWidth);}

                }

            else

            {

                if (newTabIndex == totalNumOfTabs – 1)

                {

                    document.getElementById(“TabContainer1_header”).scrollLeft=totalNumOfTabs*aTab._header.offsetWidth;

                }

                else

                {

                    scrollDivRight(“TabContainer1_header”,aTab._header.offsetWidth);

                }

            }

        }

    }                                                             

                            

          function scrollDivLeft(id,scrollStep)

          {

        document.getElementById(id).scrollLeft+=scrollStep

    }

 

    function scrollDivRight(id,scrollStep)

    {

        document.getElementById(id).scrollLeft-=scrollStep

    }

 

 

And this how the header looks like

 

 

Using the wheel mouse button with AjaxControlToolkit slider

 I wanted to use the wheel mouse button to slide the slider up or down to use it in a Mapping application for Zoom In/Out, I used a java script function to detect the wheel mouse on the Map, I wanted the Zoom function to start when the user release the wheel mouse so I added a timer to detect that the user stopped using the wheel button 

 

   var hTimer = null;

 

   function wheelZoom(e)

    {

        try

        {

            e = e ? e : window.event;

            var raw = e.detail ? e.detail : e.wheelDelta;

            var normal = e.detail ? e.detail * -1 : e.wheelDelta / 40;

            if (normal > 0)

            {

                var slider = $find(“Slider2″);

                if (slider != null)

                {

                    slider.set_Value(slider.get_Value()-1);

                }

                else

                {

                }

            }

            else if(normal < 0)

            {

                var slider = $find(“Slider2″);

                if (slider != null)

                {

                    slider.set_Value(slider.get_Value()+1);

                }

                else

                {

                }

            }

            if (hTimer != null)

            {

                window.clearTimeout(hTimer)

            }

            else   

            {

           

            }

            hTimer = window.setTimeout(doZoomWheel, 500)

            cancelEvent(e);

        }

        catch(err)

          {

            alert(err.message)

          }

          finally

          {

                  

          }

    }

 

In the above code the slider will response to the wheel mouse but the Zoom function will be called only when the user stop using the wheel button

 

 

function doZoomWheel()

    {

        if (hTimer)

        {

            hTimer = null;

            Zoom();

        }

    }

 

 

 

Dynamically creating a GridView inside AjaxControlToolkit Tabs

I wanted to search through multiple tables in database and display the results in GridViews inside Ajax Tabs, each tab will represent the results of a single table

 

First I need to a add an AjaxControlToolkit Tab Container

 

<cc2:TabContainer  AutoPostBack=”false”  ID=”TabContainer1″ runat=”server” Width=”100%”></cc2:TabContainer>

 

In my Code I will create a function to create the result tab, the input of this function is a DataSet of the search results through a single table and the Table name

 

    Private Sub fillDGResults(ByVal ds As DataSet, ByVal sTableName As String )

         Dim tab As AjaxControlToolkit.TabPanel = New AjaxControlToolkit.TabPanel()

         tab.ID = “tab_” + sTableName  

         tab.Style.Item(“Width”) = “100%”

         TabContainer1.Tabs.Add(tab)

         Dim UpPanel As UpdatePanel = New UpdatePanel()

         Dim printButton As ImageButton = New ImageButton()

         printButton.ImageUrl = “images/print1_norm.PNG”

         UpPanel.UpdateMode = UpdatePanelUpdateMode.Conditional

 

         Dim gv As GridView = New GridView

         gv = CreateGridView()

         gv.ID = sTableName + ds.Tables(0).Rows.Count.ToString()

         printButton.Attributes(“onClick”) = “javascript:CallPrint(‘” & gv.ID & “‘,’” & sTableName & “‘);”

         UpPanel.ID = “up_” + sTableName

         tab.Controls.Add(UpPanel)

         UpPanel.ContentTemplateContainer.Controls.Add(printButton)

         UpPanel.ContentTemplateContainer.Controls.Add(gv)

         gv.Style.Item(“Width”) = “100%”

         gv.DataSource = ds

         gv.PageIndex = 0

         gv.DataBind()

         gv.PageIndex = 0

         tab.HeaderText = sTableName + ” (“ + ds.Tables(0).Rows.Count.ToString() + “)”

         tab.EnableViewState = True

         TabContainer1.EnableViewState = True

     End Sub

 

 

And this is the function to create the GridView

 

 

   Private Function CreateGridView() As GridView

        Dim gv As GridView = New GridView()

        AddHandler gv.RowDataBound, AddressOf gv_RowDataBound

        AddHandler gv.RowCreated, AddressOf gv_RowCreated

        AddHandler gv.RowEditing, AddressOf gv_RowEditing

        AddHandler gv.SelectedIndexChanged, AddressOf gv_SelectedIndexChanged

        AddHandler gv.RowCommand, AddressOf gv_RowCommand

        AddHandler gv.PageIndexChanging, AddressOf gv_PageIndexChanging

        AddHandler gv.PageIndexChanged, AddressOf gv_PageIndexChanged

 

        gv.PageIndex = 0

        gv.EnableViewState = True

        gv.FooterStyle.CssClass = “SimpleGrayTableFooterStyle”

        gv.RowStyle.CssClass = “ResultsPanel”

        gv.HeaderStyle.CssClass = “ResultsPanelHeader”

        gv.PagerStyle.CssClass = “PagerStyle”

        gv.AllowPaging = True

        gv.PageSize = 15

        gv.PagerSettings.Mode = PagerButtons.NumericFirstLast

        gv.PagerSettings.Position = PagerPosition.TopAndBottom

        gv.PagerSettings.FirstPageText = “<<”

        gv.PagerSettings.LastPageText = “>>”

        gv.PagerSettings.PageButtonCount = 5

 

        Dim aspCF As CommandField = New CommandField()

        aspCF.ShowSelectButton = True

        aspCF.ButtonType = ButtonType.Link

        aspCF.SelectText = “<img align=top BorderColor=transparent border=0 alt=’Show in Map’ src=’images/map20_norm.PNG’ />”

        gv.Columns.Add(aspCF)

        aspCF = New CommandField()

        aspCF.ShowEditButton = True

        aspCF.EditText = “<img align=top BorderColor=transparent border=0 alt=’Show Info’ src=’images/view_norm.PNG’ />”

 

        gv.Columns.Add(aspCF)

        gv.Page = Me.Page

        CreateGridView = gv

 

    End Function

 

 

Finally I would like to thank Siderite for his help

 

How to use asynchronous methods in AJAX

so this is a Java Script code that use synchronous ajaxpro Method

 var toReturn = MyAjaxClass.MyAjaxMethod(sVariable).value;

to change it to use Asynchronous method it would look like this:

MyAjaxClass.MyAjaxMethod(sVariable,MyAjaxMethodCallback);

MyAjaxMethodCallback is a Java Script function to handle the return value from the Ajax method, it could be like this

 
function MyAjaxMethodCallback(toReturn)
{
        alert(toReturn.value);
}

That’s it….