后台读取前台下拉框选项值(DropDownList)

纠结于到底是原创还是转载发表，考虑再三，最终还是选择以转载发表，本文参考来自于【fanfengchimo】的

http://blog.csdn.net/fanfengchimo/article/details/2078101的博客文章

及【jack86514】的http://blog.csdn.net/jack86514/article/details/1906436的博客文章。

本人的开发环境为win7+vs2010旗舰版+IE9

现文章整合后如下

1.vs2010创建web网站

2.default.aspx

@H_403_22@<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> var httpRequest; //输入编辑框失去焦点时，触发ajax加载下拉框(DropDownList)事件 function TextChanged() { var obj = document.getElementById("txtInput"); var pra = "2"; createXMLHttpRequest(); //调用doContents函数 httpRequest.onreadystatechange = doContents; //根据不同的PRA值来调用不同的服务端方法 httpRequest.open('GET',"request.aspx?pra=" + pra,true); httpRequest.send(null); } //将ajax返回数据加载到下拉框(DropDownList)中 function doContents() { if (httpRequest.readystate == 4) { if (httpRequest.status == 200) { var str = httpRequest.responseText; AddDropDownListItem(str); } } //添加数据到下拉框(DropDownList)中 function AddDropDownListItem(str) { var objItem = str.split('@'); var obj = document.getElementById("ddlSelectList"); obj.options.length = 0; var i; for (i = 0; i < objItem.length; i++) { var item = objItem[i].split(';'); if (item[0] != "" && item[1] != "") { obj.options.add(new Option(item[0],item[1])); } } obj.options.options[0].selected = true; document.getElementById('Hidden1').value = obj.options[0].innerText; } } //创建XMLHttpRequest对象 function createXMLHttpRequest() { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); //httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } //将选中下拉框(DropDownList)的值赋给隐藏控件(Hidden1) function func1() { var itemText; var obj = document.getElementById("ddlSelectList"); for (var i = 0; i < obj.options.length; i++) { if (obj.options[i].selected) { itemText = obj.options[i].innerText; document.getElementById('Hidden1').value = itemText; } } } </script> </head> <body> <form id="form1" runat="server"> <div> </div> <p> <input id="txtInput" type="text" onblur="TextChanged();"/> <asp:DropDownList ID="ddlSelectList" runat="server" Height="34px" Width="208px" onchange="func1();"> </asp:DropDownList> <input id="Hidden1" type="hidden" name="Hidden1" /> </p> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" /> </form> </body> </html>

注意本页面中需要在第一行增加【EnableEventValidation="false"】,以解决页面出现【回发或回调参数无效】的问题。具体见下图

3.default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Button1_Click(object sender,EventArgs e)
    {
        Response.Write(Request.Form["Hidden1"]);
    }
}

4.request.aspx @H_403_22@<%@ Page Language="C#" AutoEventWireup="true" CodeFile="request.aspx.cs" Inherits="request" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html> 5.request.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class request : System.Web.UI.Page
{
    protected void Page_Load(object sender,EventArgs e)
    {
        Response.Clear();
        string pra = Request.QueryString["pra"].ToString();

        if (pra == "1")
        {
            Response.Write(GetString1());
        }
        else
        {
            Response.Write(GetString2());
        }
        Response.End();
    }

    private string GetString1()
    {
        return "First;1@Second;2@";
    }

    private string GetString2()
    {
        return "Third;1@Nine;2@Ten;3@";
    }
}

以上代码已在上述开发环境进行测试。现记录下来，方便以后查找。目前后台(button事件)代码每次读取前台【Hidden1】隐藏控件的数值时，页面都会刷新一次，个人感觉实用性不是很好。

后台读取前台下拉框选项值(DropDownList)

猜你在找的Ajax相关文章