Write to a file using JavaScript

Use this function to write to a file using JavaScript

 

function WriteToFile(sMessage)
{
  try
  {
        var fso, s;
        fso = new ActiveXObject(“Scripting.FileSystemObject”);
        sFile = fso.OpenTextFile(“C:\\logs.txt”, 8);
        sFile.writeline(sMessage);
        sFile.Close();
  }
  catch(err)
  {
        var strErr = ‘Error:’;
        strErr += ‘\nNumber:’ + err.number;
        strErr += ‘\nDescription:’ + err.description;
        document.write(strErr);
  }
}

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)

   {

   }

}

C#:Using Dictionary as DropDownList Data Source

I have IDictionary Object called ListOptions. To use it as the data source for an ASP.NET DropDownList called objDropDownList:

 

objDropDownList.DataSource = ListOptions;

objDropDownList.DataTextField = “Value”;

          objDropDownList.DataValueField  = “Key”;

          objDropDownList.DataBind(); 

 

 

 

How to sort a collection to be used in DropDown List

I have a collection object (EmployeesCollection) for custom Employee class, In the Employee class there are two properties Name and EmployeeID. I want to sort the EmployeesCollection by Name and use it in a DropDown List (ddEmployees).

 

DataTable dtEmployees = new DataTable();

          dtEmployees.Columns.Add(“Name”);

          dtEmployees.Columns.Add(“EmployeeID”);

          foreach (Employee vEmployee in EmployeesCollection)

          {

                    dtEmployees.Rows.Add(new object[] { vEmployee.Name, vEmployee. EmployeeID  });

          }

          dtEmployees.DefaultView.Sort = “Name”;

          ddEmployees.DataSource = dtEmployees;

          ddEmployees.DataTextField = “Name”;

          ddEmployees.DataValueField = “EmployeeID”;

          ddEmployees.DataBind();

 

 

 

 

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

               {

              }

      }

 

Install multiple versions of IE on your PC

I was looking to test my web application on different browsers including different versions of IE, so I used the MultipleIEs installer from TredoSoft and it worked fine with me ….

 

MultipleIEs Installer

 

 

Handling an Application Event in another application

I was working on a Console application that read SQL Database connection details from a configuration file then send these details to another application (Let us call it the Update Application) which will go through the records of a table to update them using a For Loop, I wanted to show a status message on the Console screen for each record.

 

In the Update Application (VB.NET) I defined a Public event to handle the status message

 

Public Event Message(ByVal sMessage As String)

In the update function I raised this event with the required message

For Each dbRow In DataSet.Tables(“DataTables”).Rows

 

      RaiseEvent Message(“Start Processing record of ID “  & dbRow (“ID”).ToString())

                    ‘Do the Update Here                          

      RaiseEvent Message(“End Processing record of ID “  & dbRow (“ID”).ToString())

 

Next

 

In the Console Application (C#) I defined a handler for the event

 

 

  using System;

  using System.IO;

  public delegate void UpdateAppMessageHandler(string myString);

 

 I defined the required function for the event handler

 

 

   internal class Program

    {

        UpdateAppMessageHandler MySEvent = new UpdateAppMessageHandler (ConsolAppMessageHandler);

 

        static   void  ConsolAppMessageHandler(string sMessage)

        {

            Console.WriteLine(sMessage);

        }

Now I need to assign the Update Application event to the event handler in the Console Application

 

  private static void Main(string[] args)

        {

            try

            {

                UpdateApp MyUpdateApp = null;

                MyUpdateApp = new UpdateApp ();

                MyUpdateApp.Message += ConsolAppMessageHandler; 

                       .

                       .

                       .

Now the Console Screen will show a message for Start/End processing of each record in the Database

 

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