Skip Navigation LinksHome : CBC Classes : ASP.Net : AJAX Controls

CS218 ASP.Net Ajax Controls


  1. What is ajax
  2. Loading the ajax controls (video 13a1, Youtube Video Tutorial , Notes )
  3. Using the Ajax Editor to Insert New Records (video 13b1, Notes)
  4. Using the Ajax Editor to Update Existing Records
  5. Fixing the Potentially Dangerous Write Error
  6. Chrome Fix
  7. Using the accordion control
  8. Video Tutorial - Adding the accordion control
  9. Video Tutorial - Formatting the accordion control
  10. Accordion example page

Install Notes - Written Directions

There are online instructions at http://www.asp.net/web-forms/tutorials/ajax-control-toolkit/getting-started/get-started-with-the-ajax-control-toolkit-cs or http://www.asp.net/web-forms/tutorials/ajax-control-toolkit/getting-started/get-started-with-the-ajax-control-toolkit-vb

  1. Download the ASP.NET AJAX toolkit. Make sure you get a newer version. Look over in the sidebar on the right hand side of the page. They list the links to the newer versions here. If you get an older version some things will not work. So click on on one of the links to one of the newer versions. (I can't tell you exactly which version, as they are updated fairly frequently.)
  2. Once you get to the download page for the version that you want click on the link for the ajaxControlToolkitBinary.zip only. Download it someplace that you can find it again.
  3. UnZip the file
  4. go to VWD to install the Ajax Tools
  5. In VWD, open the toolbox
  6. right click on an existing tab and select Choose Items or for a new tab go to the blank area in the bottom, right click and select New Tab, then r-click on the tab and select Choose Items
  7. In the dialog box, select the Browse button and find the .dll file from the files you unzipped above.
  8. Click on the .dll file and then click OK
  9. The Ajax tools will now be in your toolbox. This will also create a new folder named Bin in any project that uses the ajax control.

Remember, if you want to use any of the ajax controls in your production application, you also need to ftp the Bin (ajax) folders to your web hosting site.

Install Notes - Video Directions

Here's my video tutorial on installing the ajax controls.


Using the Editor Control

Using the Editor Control to read in text is pretty straightforward. Just drag a copy onto your page. The property that you want to use to read the text is the content property though, not the text property. So if my Editor control is named Editor1 I would read Editor1.content.

If you want to read the contents of the Editor Control and put it in a database you can use the following example. (The specific steps are explained below).

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="addNote.aspx.vb" Inherits="addNote" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor"
    TagPrefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:ScriptManager ID="ScriptManager2" runat="server">
    </asp:ScriptManager>
    <asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="600px" 
        AutoGenerateRows="False" DataKeyNames="ID" DataSourceID="AccessDataSource1">
        <Fields>
            <asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" 
                SortExpression="ID" />
            <asp:BoundField DataField="noteDate" HeaderText="noteDate" 
                SortExpression="noteDate" />
            <asp:TemplateField HeaderText="noteText" SortExpression="noteText">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("noteText") %>'></asp:TextBox>
                </EditItemTemplate>
                <InsertItemTemplate>
                    <cc1:Editor ID="Editor1" runat="server" />
                </InsertItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("noteText") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:CommandField ShowEditButton="True" ShowInsertButton="True" />
        </Fields>
    </asp:DetailsView>

    <asp:AccessDataSource ID="AccessDataSource1" runat="server" 
        DataFile="~/App_Data/students.mdb" 
        DeleteCommand="DELETE FROM [notes] WHERE [ID] = ?" 
        InsertCommand="INSERT INTO [notes] ([ID], [noteDate], [noteText]) VALUES (?, ?, @noteText)" 
        SelectCommand="SELECT * FROM [notes]" 
        UpdateCommand="UPDATE [notes] SET [noteDate] = ?, [noteText] = ? WHERE [ID] = ?">
        <DeleteParameters>
            <asp:Parameter Name="ID" Type="Int32" />
        </DeleteParameters>
        <UpdateParameters>
            <asp:Parameter Name="noteDate" Type="DateTime" />
            <asp:Parameter Name="noteText" Type="String" />
            <asp:Parameter Name="ID" Type="Int32" />
        </UpdateParameters>
        <InsertParameters>
            <asp:Parameter Name="ID" Type="Int32" />
            <asp:Parameter Name="noteDate" Type="DateTime" />
            <asp:ControlParameter Name="noteText" Type="String"  ControlID="Detailsview1$Editor1" PropertyName="content" />
        </InsertParameters>
    </asp:AccessDataSource>

</asp:Content>

  1. The first step is to make a new page and add a detailsview for adding records to your database. (This assumes you have a database table ready to go. In this example, I have a database table for storing notes. It has an ID field, a date field, and a field for holding the note text, which is of type memo so it can hold longer strings.)
  2. When you add the Datasource, make sure and generate the INSERT, UPDATE and DELETE Statements.
  3. By default, the Detailsview uses textboxes to read in the input when the New button is clicked. We want to change this to the Ajax Editor control for the noteText field. This is done by:
    • clicking on Rob, (Detailsview Tasks)
    • While you're here, make sure and check Enable Inserting
    • Selecting Edit Fields
    • In the lower left, selecting the noteText field and then clicking Convert this Field to a template field
    • While you're here, turn on the InsertVisible property for the ID field if you're using Access.
  4. The rest of the work is done in source mode. Find the InsertItemTemplate section in the DetailsView. Delete the line with the asp:Textbox, and add an Ajax Editor Control by dragging it from the toolbox. When you're done the code should look something like this.
         <InsertItemTemplate>
           <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("noteText") %>'></asp:TextBox>
           <cc1:Editor ID="Editor1" runat="server" />
         </InsertItemTemplate>
     
  5. Since this is an Ajax control, you will need to add a ScriptManager control too. Make sure and put it outside of the DetailsView or else your application will generate an error.
      <asp:ScriptManager ID="ScriptManager2" runat="server">
        </asp:ScriptManager>
        <asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="600px" 
            AutoGenerateRows="False" DataKeyNames="ID" DataSourceID="AccessDataSource1">
     
  6. Next, we have to modify the DataSource code to tell it to use the Editor instead of the textbox. The first line in the Datasource that we're interested in is the one with the INSERT query. You want to change the last ? in the VALUES to point to a named parameter (which we will set below.)
          InsertCommand="INSERT INTO [notes] ([ID], [noteDate], [noteText]) VALUES (?, ?, ?)" 
          InsertCommand="INSERT INTO [notes] ([ID], [noteDate], [noteText]) VALUES (?, ?, @noteText)" 
    
  7. Now scroll down a little and find InsertParameters sectin which contains the Parameters for the Insert Query. Delete the existing asp:Parameter for the database field that contains the text from the editor, and replace it with an asp:ControlParameter. Your ControlParameter will look something like the one shown here, but you will have to change a couple of the attribute values. The Name attribute must match the name you used in the INSERT query in the previous step. For example if you used @peanut in your INSERT query, then your ControlParameter should use Name="peanut". The ControlID attribute tells ASP which control you want to use and it has two parts separated by a $. (This is necessary because the Editor is inside a DetailsView, so you can't reference it directly.) The first part of the ControlIDis the id of the DetailsView and the second part is the id of the Editor control. So unless you've changed the ID's, you can use the value shown in the example. The PropertyName attribute tells ASP which property of the Ajax Editor holds the text you want to write to the database. This will always be content for an Ajax Editor.

          <asp:Parameter Name="noteText" Type="String"   />
          <asp:ControlParameter Name="noteText" Type="String"  ControlID="Detailsview1$Editor1" PropertyName="content" />
      

Note - there was a little weirdness in using this that I need to investigate. If I left the textbox control in the template, the code would read from the textbox control and not the editor control, even though the ControlID pointed to the Editor control. Removing the textbox control makes it work. This doesn't make sense, and I'd like to figure out why.

If you want to download the code r-click this link to the code file and choose Save As.


Using the Ajax Editor to Update Existing Records

The setup for using the Ajax Editor to Update existing records is just the same as the setup for using the Ajax Editor to Insert new records. That is, you'll make add a DetailsView and bind it to the database table that you want to update and then convert the desired field to a template field.

From this point on the process is similar, but not exactly the same.

  1. The next step is to find the correct template, but in this case you are looking for the UpdateItemTemplate section in the DetailsView. Delete the line with the asp:Textbox, and add an Ajax Editor Control by dragging it from the toolbox. You will have to add the Content attribute which tells ASP which database field to use to populate the control. That is, since you're editing and existing database field, you need to get the content of that field and display it in the Ajax Editor so you can edit it. The value of the Content attribute must be set to <%# Bind("noteText") %>. This is an ASP directive which grabs the value from the database. You will have to change noteText to match the name of the field in your database that contains the text you wish to edit. Also, be careful with the quotes. The entire attribute value goes inside a set of single quotes, while the database field name goes inside a set of double quotes. When you're done the code should look something like this.
         <UpdateItemTemplate>
           <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("noteText") %>'></asp:TextBox>
           <cc1:Editor ID="Editor1" runat="server" Content='<%# Bind("noteText") %>' />
         </UpdateItemTemplate>
     
  2. Next, we have to modify the DataSource code to tell it to use the Ajax Editor instead of the textbox. The line you want is the one with the UPDATE query. You want to change the last ? in the VALUES to point to a named parameter (which we will set below.)
          UpdateCommand="UPDATE [notes] SET [noteDate] = ?, [notetext] =? WHERE [id] = ?"
          UpdateCommand="UPDATE [notes] SET [noteDate] = ?, [notetext] = @noteText WHERE [id] = ?" 
    
  3. Now scroll down a little and find UpdateParameters section which contains the Parameters for the UpdateQuery. Delete the existing asp:Parameter for the database field that contains the text from the editor, and replace it with an asp:ControlParameter. Your ControlParameter will look something like the one shown here, but you will have to change at least one of the attribute values. The Name attribute must match the name you used in the UPDATE query in the previous step. For example if you used @peanut in your UPDATE query, then your ControlParameter should use Name="peanut". The ControlID attribute tells ASP which control you want to use and it has two parts separated by a $. (This is necessary because the Editor is inside a DetailsView, so you can't reference it directly.) The first part of the ControlIDis the id of the DetailsView and the second part is the id of the Editor control. So unless you've changed the ID's, you can use the value shown in the example. The PropertyName attribute tells ASP which property of the Ajax Editor holds the text you want to write to the database. This will always be content for an Ajax Editor.

          <asp:Parameter Name="noteText" Type="String"   />
          <asp:ControlParameter Name="noteText" Type="String"  ControlID="Detailsview1$Editor1" PropertyName="content" />
      

Fixing the Potentially Dangerous Write Error

After you add the Ajax editor you will get an error whenever you try to write to the database. This is because ASP.Net is trying to protect you from a problem called SQL injection. The protection is good, because the black hats can take over your database if you're not careful. So I only use the Ajax editor in pages that are password protected.

Fixing the error is fairly simple. Again, just be careful and only turn off the error checking on password protected pages, not your entire web site.


Chrome Fix

The editor will show up in Chrome and Safari, but the editing area won't have any dimension in these browsers unless you explicitly set the height and width. You can vary the dimensions, but you should use something like:

<cc2:Editor ID="Editor1" runat="server" height="320px" width="100%" />

Using the Accordion Control

The working example of the following code ASP.Net video tutorial
Good step by step web page
6 Tips for working with the ASP.Net accordion

The accordion is a great control for saving real estate. Just remember that you actually have to use a set of controls to make it work.

  1. You'll need a ScriptManager. It's in the Ajax toolbox. Just drag one off and make sure that it's in the code before the Accordion. Either put it right before the Accordion or at the top of the page inside of the asp:content control.
  2. The Accordion Control. This is the outer control which tells the application you want an accordion. It's just like the ol for a list. All the other controls will go inside this control.
  3. The Panes control. This holds the actual accordion panels. It's not on the AJAX menu, you have to type it in. Just place the cursor inside the Accordion, and then type a <. You can then pick the Panes off the code hint list.
  4. The AccordionPane control. You'll need one of these for each different accordion section. All of the AccordionPanes need to be inside the Panes control.
  5. A Header section. Each accordion section needs a header, which is the content that will be displayed when that section is minimized.
  6. A Content section. Each accordion section needs a content section. This is the content that will be displayed when the header for the section is selected. The content can hold text, images, tables; almost anything you want to add.

You'll probably want to format the borders and/or backgrounds on the accordion panes, otherwise it's hard to tell they're accordions. The easiest way to do this is to use CSS classes. (If you have more than one Accordion, consider putting the classes in a theme.) Here's an example that has a couple of my favorite Accordion properties set.

The CSS

<style type="text/css">
  .accordionHeader
{
    border: 1px solid #041044;
    color: white;
    background-color: #213381;
      font-family: Arial, Sans-Serif;
      font-size: 12px;
      font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

.accordionHeader a, .accordionHeaderSelected a
{
      color: #FFFFFF;
      background: none;
      text-decoration: none;
}
 
.accordionHeader a:hover, .accordionHeaderSelected a:hover
{
      background: none;
      text-decoration: underline;
}
 
.accordionHeaderSelected
{
    border: 1px solid #041044;
    color: white;
    background-color: #3165b1;
      font-family: Arial, Sans-Serif;
      font-size: 12px;
      font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

.accordionContent
{
    background-color: white;
    border: 1px solid #041044;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

</style>
  

The ASP Code

  <cc1:Accordion ID="courseOutline" runat="server"
                   SelectedIndex="-1"
                     FadeTransitions="true" 
                     FramesPerSecond="40"    
                     TransitionDuration="250" 
                     AutoSize="None" 
                     RequireOpenedPane="false" 
                     SuppressHeaderPostbacks="true"
                     ContentCssClass="accordionContent"
                     HeaderCssClass="accordionHeader"
                     HeaderSelectedCssClass="accordionHeaderSelected" >
<Panes>
  <cc1:AccordionPane ID="AccordionPane1" runat="server">
    <Header>1. Class Description</Header>
    <Content>
 
     </Content>
  </cc1:AccordionPane>

  <cc1:AccordionPane ID="AccordionPane2" runat="server">
    <Header>2. Course Outline</Header>
    <Content>
     </Content>
  </cc1:AccordionPane>

</Panes>
</cc1:Accordion>