使用 AJAX 向下拉列表添加值

• 下载源代码 - 33.1 KB

引言

本文将介绍如何使用 AJAX 向下拉菜单添加项目。

背景

我在这里使用了 AjaxPro2.dll 和 C# 语言。在“值”文本框中，输入值并按“保存”按钮。该值将保存在 SQL Server 表中，然后从该表中检索并填充到下拉菜单中，而无需回发。

使用代码

从上面的链接下载源代码。在 SQL Server 中创建一个名为 testing 的表，包含以下字段：ID、Name。ID 作为 identity Int，Name varchar(50)。

在 web.config 文件中，包含您创建表 testing 的数据库的名称。

运行应用程序。

// In Code behind add the code like this
namespace MyAjaxSample
{
public partial class Testing :System.Web.UI.Page 
{
    public static string connectionString = 
      (string)ConfigurationManager.AppSettings["ConnectionString"]; 
    public DataSet ds = new DataSet(); 
    DBClass MyClass = new DBClass(); 
    public SqlDataAdapter ObjSDA; 
    public SqlCommand sc; 
    protected void Page_Load(object sender, EventArgs e) 
    {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(Testing)); 
        if (!IsPostBack) 
        { 
            SqlConnection myConnection = new SqlConnection(connectionString); 
            ObjSDA = new SqlDataAdapter("Select * from Testing", myConnection);
            ObjSDA.Fill(ds); 
            DropDownList1.DataSource = ds; 
            DropDownList1.DataTextField = "Name"; 
            DropDownList1.DataValueField = "ID"; 
            DropDownList1.DataBind(); 
            DropDownList1.Items.Add("--Select table--");
            DropDownList1.SelectedIndex = DropDownList1.Items.Count - 1; 
        } 
    } 
    [AjaxPro.AjaxMethod] 
    public DataSet Inserting(string Name) 
    { 
        SqlConnection myConnection = new SqlConnection(connectionString); 
        string strQuery = "Insert into Testing Values('" + Name + "')"; 
        int res = MyClass.ExecuteQry(strQuery); 
        ObjSDA = new SqlDataAdapter("Select * from Testing", myConnection);
        ObjSDA.Fill(ds);
        return ds; 
    } 
} 
}

在脚本端，您添加以下代码

<script language="javascript">
function Inserting()
{
    if(document.getElementById("TextBox2").value == "")
    {
        alert('Enter the name'); 
    }
    else
    {
        var name = document.getElementById("TextBox2").value;
        MyAjaxSample.Testing.Inserting(name,InsertData_callback);
    }
}

function InsertData_callback(response)
{
    if (response != null && response.value != null)
    {
        var List = document.getElementById("DropDownList1");
        List.options.length = 0; 
        for (var i = 0; i < response.value.Tables[0].Rows.length; ++i)
        {
            List.options[List.options.length] = 
              new Option(response.value.Tables[0].Rows[i].Name,
              response.value.Tables[0].Rows[i].ID);
        }
        document.getElementById("TextBox2").value ="";
    }
}
</script>

这是数据库类

namespace Ganesh
{
public class DBClass
{
    SqlConnection ObjCon = 
      new SqlConnection(
      ConfigurationManager.AppSettings["ConnectionString"]);
    public SqlCommand sc;
    public SqlDataAdapter sda;
    public SqlDataReader sdr;
    public DataSet ds;
    public int res;

    public DBClass()
    {
    //
    // TODO: Add constructor logic here
    //
    }

    public int ExecuteQry(string qry)
    {
        if (ObjCon.State == ConnectionState.Open) ObjCon.Close();
            ObjCon.Open();
        sc = new SqlCommand(qry, ObjCon);
        int res = sc.ExecuteNonQuery();
        ObjCon.Close();
        return res;
    }
}

尝试一下，并告诉我您的建议。谢谢。