Some days ago, I have been studying some of the features of client JavaScript accessing WebService,
The powerful CodePlex package AjaxControlToolkit has been put on use for a long time,
Now, let's take a few of them for fun today,
Select and then select a CascadingDropDown and DragPanel for review.
First, you must have a basic understanding of the AjaxControlToolkit,
It was developed jointly by the Microsoft community CodePlex and Microsoft,
This includes many client, client, and server controls,
It has very powerful functions and can produce a variety of amazing effects,
After referencing the AjaxControlToolkit component, you can use these controls in your application,
The CascadingDropDown or DragPanelExtender above is one of the several controls,
Let's take a look at the example.
Better results
. Aspx. cs
Using System;
Namespace: simple introduction _ ASP. NET_AJAX
{
Public partial class Demo _ 14: System. Web. UI. Page
{
Protected void Page_Load (object sender, EventArgs e)
{
}
// The DropDownList of the ddlThird is set to automatic sending back.
Protected void ddlThird_SelectedIndexChanged (object sender, EventArgs e)
{
// Dynamically set the ImageUrl of the two Image controls
ImageBig. ImageUrl = "~ /Deon _ 14 _ Use _ Handler. ashx? ImageType = Big & BikeID = "+
DdlThird. SelectedValue;
ImageSmall. ImageUrl = "~ /Deon _ 14 _ Use _ Handler. ashx? ImageType = Small & BikeID = "+
DdlThird. SelectedValue;
}
}
}
. Aspx
<% @ Page Language = "C #" AutoEventWireup = "true"
CodeBehind = "Demo _ 14. aspx. cs"
Inherits = "simple introduction _ ASP. NET_AJAX.Demo _ 14"
EnableEventValidation = "False" %>
<% @ Register Assembly = "AjaxControlToolkit"
Namespace = "AjaxControlToolkit" TagPrefix = "PC3" %>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>
<Style type = "text/css">
. Style2
{
Font-family:;
Font-size: large;
Font-weight: bold;
Color: # 9900CC;
}
. DragPanel
{
Cursor: move;
}
</Style>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Asp: ScriptManager ID = "ScriptManager1" runat = "server">
</Asp: ScriptManager>
<Div style = "text-align: center">
<Table style = "width: 100%; height: 149px;">
<Tr>
<Td style = "text-align: right">
Select bicycle product category
</Td>
<Td style = "text-align: center">
<Asp: DropDownList ID = "ddlFirst" runat = "server" Width = "200px">
</Asp: DropDownList>
// Mainly set the attributes of CascadinDropDown. If the contextKey is not set,
// Set UseContextKey to false.
// The parameter in the WebService method on the server should not contain the contextKey item.
<PC3: CascadingDropDown ID = "ddlFirst_CascadingDropDown"
Runat = "server" Category = "First"
ContextKey = "First" EmptyText = "the current data is empty ......"
EmptyValue = "000" Enabled = "True" LoadingText = "extracting data ......"
PromptText = "Select..." PromptValue = "0000"
TargetControlID = "ddlFirst" ServicePath = "Demo _ 14 _ Use. asmx"
ServiceMethod = "GetFistDropDownListData">
</PC3: CascadingDropDown>
</Td>
</Tr>
<Tr>
<Td style = "text-align: right">
Select bicycle product category
</Td>
<Td style = "text-align: center">
<Asp: DropDownList ID = "ddlSecond" runat = "server" Width = "200px">
</Asp: DropDownList>
<PC3: CascadingDropDown ID = "ddlSecond_CascadingDropDown"
Runat = "server" EmptyText = "the current data is empty ......"
EmptyValue = "000" Enabled = "True" LoadingText = "extracting data ......"
PromptText = "Select ......"
PromptValue = "0000" TargetControlID = "ddlSecond"
Category = "Second" ContextKey = "Second"
ParentControlID = "ddlFirst" UseContextKey = "True"
ServicePath = "Demo _ 14 _ Use. asmx"
ServiceMethod = "GetSecondDropDownListData">
</PC3: CascadingDropDown>
</Td>
</Tr>
<Tr>
<Td style = "text-align: right">
Select bicycle Products
</Td>
<Td style = "text-align: center">
<Asp: DropDownList ID = "ddlThird" runat = "server" Width = "200px"
AutoPostBack = "True"
OnSelectedIndexChanged = "ddlThird_SelectedIndexChanged">
</Asp: DropDownList>
// Note that the parent control of CascadingDropDown is ddlSecond.
<PC3: CascadingDropDown ID = "ddlThird_CascadingDropDown"
Runat = "server" EmptyText = "the current data is empty ......"
EmptyValue = "000" Enabled = "True" LoadingText = "extracting data ......"
PromptText = "Select ......"
PromptValue = "0000" TargetControlID = "ddlThird"
Category = "Third" ContextKey = "Third"
ParentControlID = "ddlSecond"UseContextKey = "True"
ServicePath = "Demo _ 14 _ Use. asmx"
ServiceMethod = "GetThirdDropDownListData">
</PC3: CascadingDropDown>
</Td>
</Tr>
</Table>
<Br/>
<Br/>
<Div style = "text-align: center">
<Asp: Panel ID = "bikePanel" runat = "server" Style = "text-align:
Center "BorderColor =" # CC0066"
BorderStyle = "Dotted" BorderWidth = "2px">
<Asp: Panel ID = "dragPanel" runat = "server"
CssClass = "dragPanel" Style = "text-align: center"
BorderStyle = "Outset" BorderColor = "# 0066FF"
BorderWidth = "3" BackColor = "# CCFF66">
<Span class = "style2"> you can drag it here </span>
</Asp: Panel>
<Table border = "1">
<Tr>
<Td>
<Asp: Image ID = "ImageBig" runat = "server"/>
</Td>
<Td>
<Asp: Image ID = "ImageSmall" runat = "server"/>
</Td>
</Tr>
</Table>
</Asp: Panel>
<C0: DragPanelExtender ID = "bikePanel_DragPanelExtender"
Runat = "server" DragHandleID = "dragPanel"
Enabled = "True" TargetControlID = "bikePanel">
</PC3: DragPanelExtender>
</Div>
<Br/>
<Br/>
</Div>
</Form>
<Script type = "text/javascript" language = "javascript">
Function setBodyHeightToContentHeight (){
Document. body. style. height =
Math.max(document.doc umentElement. scrollHeight,
Document. body. scrollHeight) + "px ";
}
SetBodyHeightToContentHeight ();
$ AddHandler (window, "resize", setBodyHeightToContentHeight );
</Script>
</Body>
</Html>
The WebService called by CascadingDropDown
. Asmx
Using System;
Using System. Collections. Generic;
Using System. Web. Services;
Using System. Data. SqlClient;
Using System. Web. Configuration;
Using AjaxControlToolkit;
Namespace: simple introduction _ ASP. NET_AJAX
{
[WebService (Namespace = "http://tempuri.org/")]
[WebServiceBinding (ConformsTo = WsiProfiles. BasicProfile1_1)]
[System. ComponentModel. ToolboxItem (false)]
[System. Web. Script. Services. ScriptService]
Public class Demo _ 14 _ Use: System. Web. Services. WebService
{
String conStr = WebConfigurationManager.
ConnectionStrings ["Demo"]. ConnectionString;
Private void GetData (List <CascadingDropDownNameValue> myList, string sqlStr)
{
Try
{
Using (SqlConnection sqlCon = new SqlConnection (conStr ))
{
SqlCon. Open ();
Using (SqlCommand sqlCom = sqlCon. CreateCommand ())
{
SqlCom. CommandText = sqlStr;
Using (SqlDataReader sqlDr = sqlCom. ExecuteReader ())
{
While (sqlDr. Read ())
{
CascadingDropDownNameValue myNameValue =
New CascadingDropDownNameValue ();
MyNameValue. value = sqlDr. GetInt32 (0). ToString ();
MyNameValue. name = sqlDr. GetSqlString (1). Value;
MyList. Add (myNameValue );
}
}
}
}
}
Catch (Exception e)
{
CascadingDropDownNameValue myNameValue =
New CascadingDropDownNameValue ();
MyNameValue. value = e. Message. ToString ();
MyNameValue. name = e. Message. ToString ();
MyList. Add (myNameValue );
}
}
[WebMethod]
// Pay special attention to the three parameters and the returned type is CascadingDropDwonNameValue [].
// Return type. The parameter names must be identical.
Public CascadingDropDownNameValue [] GetFistDropDownListData (
String knownCategoryValues,
String category,
String contextKey)
{
List <CascadingDropDownNameValue> myList =
New List <CascadingDropDownNameValue> ();
String sqlStr = "SELECT product category No., name FROM bicycle product category ";
GetData (myList, sqlStr );
Return myList. ToArray ();
}
[WebMethod]
Public CascadingDropDownNameValue [] GetSecondDropDownListData (
String knownCategoryValues,
String category,
String contextKey)
{
System. Collections. Specialized. StringDictionary myDictionary =
CascadingDropDown. ParseKnownCategoryValuesString (knownCategoryValues );
If (! MyDictionary. ContainsKey ("First "))
{
Return null;
}
List <CascadingDropDownNameValue> myList =
New List <CascadingDropDownNameValue> ();
String sqlStr = String. Format (
"SELECT product category No., name FROM bicycle product category" +
"WHERE product category No. = {0}", myDictionary ["First"]);
GetData (myList, sqlStr );
Return myList. ToArray ();
}
[WebMethod]
Public CascadingDropDownNameValue [] GetThirdDropDownListData (
String knownCategoryValues,
String category,
String contextKey)
{
System. Collections. Specialized. StringDictionary myDictionary =
CascadingDropDown. ParseKnownCategoryValuesString (knownCategoryValues );
If (! MyDictionary. ContainsKey ("Second "))
{
Return null;
}
List <CascadingDropDownNameValue> myList =
New List <CascadingDropDownNameValue> ();
String sqlStr = String. Format (
"SELECT Product NO., name FROM bicycle product" +
"WHERE product category No. = {0}", myDictionary ["Second"]);
GetData (myList, sqlStr );
Return myList. ToArray ();
}
}
}
Look at A. ashx Program (this is used to obtain binary data in the database and convert it to Image Display)
Using System;
Using System. Web;
Using System. Data;
Using System. Data. SqlClient;
Using System. Web. Configuration;
Namespace: simple introduction _ ASP. NET_AJAX
{
Public class Deon _ 14 _ Use _ Handler: IHttpHandler
{
Public void ProcessRequest (HttpContext context)
{
String conStr = WebConfigurationManager. ConnectionStrings ["Demo"]. ToString ();
String imageType = context. Request. QueryString ["ImageType"]. ToString ();
String bikeID = context. Request. QueryString ["BikeID"]. ToString ();
If (String. IsNullOrEmpty (imageType ))
{
Return;
}
String sqlStr = "";
If (imageType = "Big ")
{
SqlStr = "SELECT full picture FROM bicycle product photos, bicycle products and photos" +
"WHERE bicycle products and photos. Product photo No. = bicycle product photo. Product photo no." +
"AND Bicycle products AND photos. Product NO. = @ ID ";
}
If (imageType = "Small ")
{
SqlStr = "SELECT photo thumbnails FROM photos of bicycle products, bicycle products and photos" +
"WHERE bicycle products and photos. Product photo No. = bicycle product photo. Product photo no." +
"AND Bicycle products AND photos. Product NO. = @ ID ";
}
Using (SqlConnection sqlCon = new SqlConnection (conStr ))
{
SqlCon. Open ();
Using (SqlCommand sqlCom = sqlCon. CreateCommand ())
{
SqlCom. CommandType = CommandType. Text;
SqlCom. CommandText = sqlStr;
SqlCom. Parameters. AddWithValue ("@ ID", bikeID );
Using (SqlDataReader sqlDr = sqlCom. ExecuteReader ())
{
If (sqlDr. Read ())
{
// Output binary data in Image Format
Context. Response. ContentType = "Image/PNG ";
Context. Response. BufferOutput = true;
Context. Response. Clear ();
Context. Response. BinaryWrite (sqlDr. GetSqlBytes (0). Value );
Return;
}
}
}
}
}
Public bool IsReusable
{
Get
{
Return false;
}
}
}
}
The above is the entire code,
Let's look at the results.
New data will appear in the second CascadingDropDown after bicycle product category is selected
New data will appear in the third CascadingDropDown after bicycle product category is selected
After selecting a bicycle product, a picture of the selected bicycle product will appear.
Similarly, the Panel used to display photos can be dragged.
All the above Code is relatively simple, so you can read the comments carefully if you do not understand it.
2010-1-28
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
