体验 Microsoft Visual Studio 2008 之 AJAX 应用

Microsoft Visual Studio 2008新增很多功能，这里仅对AJAX应用谈谈自己的应用体验（提供示例文件下载）。

1、使用 Calendar 控件

 Microsoft Visual Studio 2008之前的版本中，Web 的Calendar可谓是个鸡肋，在许多场合并不适用，因此多数网站开发者只好找第三方控件满足应用需求。现在，Calendar通过AJAX可以很好地满足需求了。

使用很简单，在页面上添加一个ScriptManager，然后再添加一个UpdatePanel，在UpdatePanel中添加一个Calendar控件（初始状态Visible为False）和一个TextBox（用于写入选择的日期）和一个Button（用于显隐日历），接下来经过简单编程就可实现比较好的效果。

 

//按钮事件（单击按钮时会显示或隐藏日历）：

 protected void Button1_Click(object sender, EventArgs e)
        {
            this.Calendar1.Visible = !this.Calendar1.Visible;
        }

//用户更改选择日期时事件

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
        {
            this.TextBox1.Text = this.Calendar1.SelectedDate.ToString();//显示选择的日期
            this.Calendar1.Visible = false;
        }

 

这样，一个无页面刷新的日期选择应用就完成了，怎么样，很简单吧？

当然为了整体页面的和谐，最好将控件添加到一个DIV中，其HTML代码如下：

<div id="calendarDiv" style="position:absolute;top:0px;left:0px;z-index:99">
                                <asp:Calendar ID="Calendar1" runat="server" BackColor="#CCFFFF"
                    onselectionchanged="Calendar1_SelectionChanged" Visible="False">
                </asp:Calendar>
                </div>
值得称道的还有如果你的网站属性设置目标Framework是.NET Framework 3.5，则使用AJAX无需做任何配置。

主要后台代码如下：

 public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            this.Calendar1.Visible = !this.Calendar1.Visible;
        }
        protected void Calendar1_SelectionChanged(object sender, EventArgs e)
        {
            this.TextBox1.Text = this.Calendar1.SelectedDate.ToString();
            this.Calendar1.Visible = false;
        }

      
    }

2、三级联动下拉菜单

三级联动菜单中使用AJAX也是非常常见的应用，同样的，在Microsoft Visual Studio 2008下可以很方便地实现，比如我们要实现

省、市、县的三级联动，可以这样进行：在页面上添加一个ScriptManager，然后再添加一个UpdatePanel，在UpdatePanel中添加三个DropDownList控件。第一个DropDownList绑定“省”的数据，且设置其AutoPostBack为True；第二个绑定“市”的数据，

且设置其AutoPostBack为True；第三个绑定“县”的数据即可。在此示例中，我们采用XML数据源，主要后台代码如下：

 

 public partial class dropDownList : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                ShowParent(HttpContext.Current.Server.MapPath("~/App_Data/data.xml"));
            }
        }

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            this.DropDownList2.DataSource=GetChildValue(HttpContext.Current.Server.MapPath("~/App_Data/data.xml"),"/WebService/province",this.DropDownList1.SelectedValue);
            this.DropDownList2.DataBind();
        }

        protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
        {
            this.DropDownList3.DataSource = GetChildValue(HttpContext.Current.Server.MapPath("~/App_Data/data.xml"), "/WebService/province/city", this.DropDownList2.SelectedValue);
            this.DropDownList3.DataBind();
        }

        private void ShowParent(string xmlFilePath)
        {
            XmlDocument xmldoc = new XmlDocument();
            xmldoc.Load(xmlFilePath);

            XmlElement root = xmldoc.DocumentElement;//根节点
            XmlNodeList xmlNodeList = root.ChildNodes;

            this.DropDownList1.Items.Add("请选择");
            foreach (XmlNode node in xmlNodeList)
            {
                this.DropDownList1.Items.Add(node.Attributes["name"].Value);
            }

            xmldoc = null;
        }

        private string[]  GetChildValue(string xmlFilePath,string xpath,string attribValue)
        {
            string[] result = null;
            XmlDocument xmldoc = new XmlDocument();
            xmldoc.Load(xmlFilePath);

            XmlElement root = xmldoc.DocumentElement;//根节点
             ...

            xmldoc = null;
            return result;
        }

    
    }

完整示例代码下载地址：http://download.csdn.net/source/965348