Calling function in code-behind using AJAX

Ever wanted to call a function in your code-behind using Javascript? I have. Maybe you want to do some client side functionality and then follow it up with some server side functionality, all without a post-back. The answer to doing this is using javascript, AJAX and the PageMethods functionality of the AJAX scriptmanager.

In order to call a function in code-behind, try this:

1. Create your AJAX web-enabled page and create a scriptmanager with your update panels, etc.
2. In the scriptmanager tag, set "EnablePageMethods" equal to True.
3. Create a javascript function using PageMethods to call the code-behind function.

     function UnlockRecord()
          {
               //Use the PageMethods functionality of the scriptmanager
               PageMethods.UnlockRecord();
          }

4. In your code-behind, create your function as a web services webmethod. You cannot call server-side code ‘directly’ from client-side code. That is because by design, the server side code executes at server side and client side code at the client.

     <System.Web.Services.WebMethod()> _
     Public Shared Function UnlockRecord() As String

          'Code to run

     End Function

That's all there is to it. Now all you have to do is call your javascript which in turn will call your code-behind function.

Reading an RSS feed - two methods

RSS feeds are a great way to enhance your web page. Your web page can be dynamic with daily headlines and stories, all in an autmated fashion. Parsing RSS feeds is fairly straightforward.


Below are two methods to reading an RSS feed.


Method 1:  This method requires very little code. It basically reads the feed via an XmlTextReader into a dataset. Then this dataset can be bound to a gridview, etc.


'Set up a Try/Catch in case the file isn't read correctly
Try

     'Open an XML file/RSS feed
     Dim reader As XmlTextReader = New XmlTextReader(http://stltomorrow.tumblr.com/rss)

     'Set up the dataset for the reader
     Dim ds As DataSet = New DataSet

     'Read the feed
     ds.ReadXml(reader)

     'Create the datatable
     Dim dtSTLtomorrow As DataTable
     dtSTLtomorrow = ds.Tables(2)

     'Bind to the datagrids/gridview
     dgSTLtomorrowVer.DataSource = dtSTLtomorrow
     dgSTLtomorrowVer.DataBind()

Catch ex As Exception

     'Show that there was an error reading the RSS feed

End Try


Method 2: This method requires a little bit more code, but it basically uses an XmlTextReader to read in the RSS feed and then loops through the feed node by node.

'Set up a Try/Catch in case the file isn't read correctly
Try

'Create the dataset to hold the incoming headlines
Dim dstSTLtomorrow As DataSet

'Set up the tables and columns
Dim dtblSTLtomorrow As DataTable
Dim dcolSTLtomorrowID As DataColumn
Dim pkColumns(1) As DataColumn

'Create the dataset
dstSTLtomorrow = New DataSet("dstSTLtomorrow")

'Create the datatable
dtblSTLtomorrow = dstSTLtomorrow.Tables.Add("STLtomorrow")

'Create the columns
'Create the id for the data table
dcolSTLtomorrowID = New DataColumn("STLtomorrowID", GetType(Int32))
dcolSTLtomorrowID.AutoIncrement = True
dcolSTLtomorrowID.Unique = True

'Add the columns to the date table
dtblSTLtomorrow.Columns.Add(dcolSTLtomorrowID)
dtblSTLtomorrow.Columns.Add("description", GetType(String))

'Assign the primary key
pkColumns(0) = dcolSTLtomorrowID
dtblSTLtomorrow.PrimaryKey = pkColumns

'Read the rss
Dim xmlReader As New XmlTextReader(http://stltomorrow.tumblr.com/rss)

'set up a datarow
Dim drowSTLtomorrow As DataRow

'Create a flag to figure out which element we are on
Dim elemFlag As Integer

'Loop through the rss
While xmlReader.Read()

     'Figure out which node type we are on
     Select Case xmlReader.NodeType

          'Element node type?
          Case XmlNodeType.Element

          'If this element name is the description then set a flag
          'to indicate that this is the node we want
          If xmlReader.Name = "description" Then

               'set flag to indicate that yes we do want this node
               elemFlag = 1

          Else

               'set flag to indicate that no we do not want this node
               elemFlag = 0

          End If

          'Text node type?
          Case XmlNodeType.Text

               'Check the flag
               'If it is equal to 1 then this is the description node
               'go ahead and grab the text
               If elemFlag = 1 Then

                    'Make sure there is an href in the string so that the user
                    'has something to click on
                    If InStr(xmlReader.Value, "<a href") > 0 Then

                         'Add Rows to the datatable with the data coming from the feed
                         drowSTLtomorrow = dstSTLtomorrow.Tables("STLtomorrow").NewRow()

                         'get the node value and put it in the datatable
                         drowSTLtomorrow("description") = Replace(xmlReader.Value, Chr(34) & ">", Chr(34) & " target='_new'>")

                         'Add the row
                         dstSTLtomorrow.Tables("STLtomorrow").Rows.Add(drowSTLtomorrow)

                    End If

               End If

     End Select

End While

'Bind to the datagrid/gridview
dgSTLtomorrowVer.DataSource = dstSTLtomorrow.Tables("STLtomorrow")
dgSTLtomorrowVer.DataBind()

'close the dataset
dstSTLtomorrow = Nothing

Catch ex As Exception

     'Show that there was an error reading the RSS feed

End Try

Creating an AJAX CascadingDropDown extender control using a database

A very cool control in the AJAX Control Toolkit is the CascadingDropDown extender. Basically, this control will allow you to have linked dropdowns. For instance, maybe you want a state dropdown to link to a county dropdown and subsequently to a city dropdown.

To accomplish this you need three things:

1. An asp.net dropdown control.
2. A web service that connects to an XML file or database for the dropdown data.
3. The CascadingDropDown extender control linked to the dropdown to extend.

For our example, we'll be using newspaper publications that link to newspaper products. So when a user selects a publication the second dropdown will display all of the products available for that publication.

Let's start with the code on the .aspx page.

1. First, let's set the EnableEventValidation="false" in the page directive at the top of the .aspx page.
Here is explanation why you need to turn it off ?
In order for the values to be submitted, EventValidation needs to be disabled for the page. EventValidation ensures that the values in each control match the values that were present when the page was rendered, but since these drop downs are populating on the client side, this is never true.

2. Add your asp.net dropdown controls.
Publication dropdown: <asp:DropDownList ID="ddlPublication" runat="server"></asp:DropDownList>
Product dropdown: <asp:DropDownList ID="ddlProduct" runat="server"></asp:DropDownList>

Nothing special here. Just regular old dropdowns.

3. Add the CascadingDropDown extenders.
Publication extender: <cc1:CascadingDropDown ID="cddPublication" runat="server" Category="pub" TargetControlID="ddlPublication" PromptText="[Select Pub]" LoadingText="Loading Pubs..." ServicePath="pubinfo.asmx" ServiceMethod="GetPublications"></cc1:CascadingDropDown>
Product extender: <cc1:CascadingDropDown ID="cddProduct" runat="server" Category="product" ParentControlID="ddlPublication" TargetControlID="ddlProduct" PromptText="[Select Product]" LoadingText="Loading Products..." ServicePath="pubinfo.asmx" ServiceMethod="GetProducts"></cc1:CascadingDropDown>

Next, lets create the web service.

1. In Visual Studio, right click on your project and select "Add New Item".
2. Select "Web Service" and give your web service a name.
3. Now that we have a web service file, let's set up the service methods. Your file should look similar to the code below.

<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
<System.Web.Script.Services.ScriptService()> _
Public Class pubinfo

     Inherits System.Web.Services.WebService

     'Set up the database connection string. This should come from the connections strings in your web.config file
     Public condatabase1String As String = System.Configuration.ConfigurationManager.ConnectionStrings("database1ConnectionString").ToString()

'GET PUBLICATIONS METHOD

<WebMethod()> _
Public Function GetPublications(ByVal knownCategoryValues As String, ByVal category As String) As AjaxControlToolkit.CascadingDropDownNameValue()

     'Create a connection to the sql database using the condatabase1String
     Dim sqlConn As New SqlConnection(condatabase1String)

     'Open the connection
     sqlConn.Open()

     'Execute the stored procedure
     Dim sqlSelect As New SqlCommand("EXEC up_MySP", sqlConn)

     'Set the command type
     sqlSelect.CommandType = System.Data.CommandType.Text

     'Create a sql adapter
     Dim sqlAdapter As New SqlDataAdapter(sqlSelect)

     'Create a dataset
     Dim myDataset As New DataSet()

     'Fill the dataset with the results from the stored procedure
     sqlAdapter.Fill(myDataset)

     'Close the connection
     sqlConn.Close()

     'Create a new list to hold the different publications
     Dim cascadingValues As New List(Of AjaxControlToolkit.CascadingDropDownNameValue)()

     'Loop through the rows in the dataset/datatable
     For Each dRow As DataRow In myDataset.Tables(0).Rows
          'Get the publication and publication name
          Dim pub_name As String = UCase("(" & dRow("pub").ToString() & ") " & dRow("pub_name").ToString())

          Dim pub As String = dRow("pub").ToString()

          'Add the values to the list
          cascadingValues.Add(New AjaxControlToolkit.CascadingDropDownNameValue(pub_name, pub))
     Next

     'return the list to the drop down
     Return cascadingValues.ToArray()

End Function

'GET PRODUCTS METHOD

<WebMethod()> _
Public Function GetProducts(ByVal knownCategoryValues As String, ByVal category As String) As AjaxControlToolkit.CascadingDropDownNameValue()

     'Get the publications list
     Dim pubValues As StringDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)

     'Create a variable to hold the selected pub
     Dim pub As String

     'Get the selected pub
     pub = Convert.ToString(pubValues("pub"))

     'Create a connection to the sql database using the condatabase1String
     Dim sqlConn As New SqlConnection(condatabase1String)

     'Open the connection
    sqlConn.Open()

     'Execute the stored procedure.
     Dim sqlSelect As New SqlCommand("EXEC up_MySP2" & pub, sqlConn)

     'Set the command type
     sqlSelect.CommandType = System.Data.CommandType.Text

     'Create a sql adapter
     Dim sqlAdapter As New SqlDataAdapter(sqlSelect)

     'Create a dataset
     Dim myDataset As New DataSet()

     'Fill the dataset with the results from the stored procedure
     sqlAdapter.Fill(myDataset)

     'Close the connection
     sqlConn.Close()

     'Create a new list to hold the different publications
     Dim cascadingValues As New List(Of AjaxControlToolkit.CascadingDropDownNameValue)()

     'Loop through the rows in the dataset/datatable
     For Each dRow As DataRow In myDataset.Tables(0).Rows

          'Get the product and product name
          Dim product As String = dRow("prod_code").ToString()

          Dim product_name As String = UCase("(" & dRow("prod_code").ToString() & ") " & Left(dRow("product_name").ToString(), 20))

          'Add the values to the list
          cascadingValues.Add(New AjaxControlToolkit.CascadingDropDownNameValue(product_name, product))
     Next

     'return the list to the drop down
     Return cascadingValues.ToArray()

     End Function
 
End Class