web 技巧

Introduction

这个项目包含多个样本阿贾克斯，如加载器，具有约束力的下拉菜单，让用户名，通过用户身份证等在这里，我将说明如何绑定下拉使用Ajax在另一个下拉式变化的事件。在此代码段，我复制了两种类型的模型绑定下拉。一个是在按钮的Click事件和其他人的更改事件的下拉式。

Using the code

以下是一个简短说明如何使用代码的文章，其中包括类名，方法，属性和任何技巧或提示。首先，创建一个数据库级的只是建立连接。然后创建表，您要绑定的下拉列表中。其次，改变连接字符串中的Web.config文件

绑定下拉使用AJAX Click事件连接字符串

<appSettings>
    <add key="ConnectionString" value=
        "Data Source=.\SQLEXPRESS;Integrated Security=yes;database=TAACS;"/>
</appSettings>

Register the page for Ajax

AjaxPro.Utility.RegisterTypeForAjax(typeofSample1));
// Write the Ajax method to bind the drop down  
[AjaxPro.AjaxMethod]
public DataSet GetDataSet()
{
    string connectionString = 
        (string)ConfigurationManager.AppSettings["ConnectionString"];
    SqlConnection myConnection = new SqlConnection(connectionString);
    SqlDataAdapter ad = new SqlDataAdapter(
        "SELECT * FROM Tabs", myConnection);
    DataSet ds = new DataSet();
    ad.Fill(ds, "Tabs");
    return ds;
}

At the HTML design page, write the JavaScript to bind

// your code is start here
<script language="JavaScript">
function GetDataSet() 
{
    Sample1.GetDataSet(callback);
}

function callback(res)
{
    var html = [];
    for(var i=0; i < res.value.Tables[0].Rows.length; i++)
    html[html.length] = 
        "<option>" + res.value.Tables[0].Rows[i].TabName + "</option>";
    document.getElementById("display").innerHTML = 
        "<select id=\"sel\">" + html.join("") + "</select>";
}
</script>

Use a System.Data.DataSet to fill a drop down box

Because you can return any object, it is possible to fill a dropdown box with only two lines. The list of countries will be fetched from the server after you have clicked on the link.

Method 1

Bind the dropdown via the dropdown change event:

<script language="JavaScript">
function GetTabSet()
{
    var countryId = document.getElementById(
        "ddlList").value;// ddlList.options[ddlList.selectedIndex].value;
    MyAjaxSample.SampleforDatabind.GetTabSet(countryId, GetTabSet_CallBack);
}

function GetTabSet_CallBack(response)
{
    if (response.error != null)
    {
        alert(response.error); 
        return;
    }
    var states = response.value; 
    if (states == null || typeof(states) != "object")
    {
        return;
    }
    var statesList = document.getElementById("ddlItemList");
    statesList.options.length = 0; 
    for (var i = 0; i < response.value.Tables[0].Rows.length; ++i)
    {
        statesList.options[statesList.options.length] = 
            new Option(response.value.Tables[0].Rows[i].TabName);
    }
}
</script>

Now, load the data from the database using Ajax:

In Code bihind 
using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HTMLControls;
using Ganesh;
 
namespace MyAjaxSample
{
    public partial class SampleforDatabind : System.Web.UI.Page
    {
        public static string connectionString = 
            (string)ConfigurationManager.AppSettings["ConnectionString"];
        public DataSet ds = new DataSet();
        DBClass MyClass = new DBClass();
        protected void Page_Load(object sender, EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax(typeof(SampleforDatabind));
            if (!IsPostBack)
            {
                ddlList.DataSource = MyClass.GetDataSet("Select * from Users");
                ddlList.DataTextField = "UserName";
                ddlList.DataValueField = "UserID";
                ddlList.DataBind();
                ddlList.Items.Add("--Select table--");
                ddlList.SelectedIndex = ddlList.Items.Count - 1;
            }
        }

        [AjaxPro.AjaxMethod]
        public DataSet GetDataSet() 
        {
            SqlConnection myConnection = new SqlConnection(connectionString); 
            SqlDataAdapter ad = new SqlDataAdapter(
                "SELECT * FROM Tabs",myConnection);
            ad.Fill(ds, "Tabs");
            return ds;
        }

        [AjaxPro.AjaxMethod]
        public DataSet GetTabSet(int UserId)
       {
           SqlConnection myConnection = new SqlConnection(connectionString);
           SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM GetRoleTabs(
               " + UserId + ")", myConnection);
           ad.Fill(ds, "Tabs");
           return ds;
       }
    }
}

Method 2

Bind the dropdown in change event:

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="~/Sample.aspx.cs" Inherits="MyAjaxSample.Sample" %>
<!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>
<title>Sample Ajax Page</title>
<script language="JavaScript">
function GetUserName()
{
    var yourid = document.getElementById("txtuserId").value;
    MyAjaxSample.Sample.GetUserName(yourid,GetUserName_callback);
}
function GetUserName_callback(response)
{
    if (response != null && response.value != null)
    {
        var user = response.value;
        alert(user);
    }
}

// Get the User Permission tabs by passing User ID
function GetUserRole()
{
    var UID = document.getElementById("ddlUser").value;
    MyAjaxSample.Sample.GetUserRole(UID,GetUserRole_callback);
}

function GetUserRole_callback(response)
{
    if (response != null && response.value != null)
    {
        var usertab = response.value;
        alert(usertab);
    }
}

function GetRoleTabs()
{
    var UrID = document.getElementById("ddlUserList").value;
    MyAjaxSample.Sample.GetRoleTabs(UrID,GetRoleTabs_callback);
}

function GetRoleTabs_callback(res)
{
    var html = [];
    for(var i=0; i < res.value.Tables[0].Rows.length; i++)
    html[html.length] = "<option>" + 
        res.value.Tables[0].Rows[i].TabName + "</option>";
    document.getElementById("display").innerHTML = 
        "<select id=\"sel\">" + html.join("") + "</select>";
}

</script>
</head>

<body>
<form id="form1" runat="server" method="post">
<div style="text-align: center">
    <table id="TABLE1" border="1" cellpadding="0" cellspacing="0" >
        <tr>
            <td style="width: 100px; height: 22px;">
                <input id="btnUser" type="button" value="User" 
                    onclick="GetUserName()" />
            </td>
            <td style="width: 100px">
                <asp:DropDownList ID="ddlUser" OnChange="GetUserRole()" 
                    runat="server" Width="132px"></asp:DropDownList>
            </td>
            <td style="width: 100px">
                <asp:DropDownList ID="ddlUserList" OnChange="GetRoleTabs()" 
                    runat="server" Width="132px" style="position: static">
                 </asp:DropDownList>
            </td>
        </tr>
    </table>
</div> 
</form>
</body>
</html>

In code behind

namespace MyAjaxSample
{ 
    public partial class Sample : System.Web.UI.Page
    {
        DBClass ObjDB = new DBClass();
        DataSet ObjDS = new DataSet();
        public SqlConnection ObjCon = 
            new SqlConnection(
            ConfigurationManager.AppSettings["ConnectionString"]);
        SqlDataReader ObjReader;
        SqlDataAdapter ObjAdapter;
        public string username,usertab;
        protected void Page_Load(object sender, EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax(typeof(Sample)); // Step 3
            if (!IsPostBack)
            {
                BindDropDown();
            }
        }

        [AjaxPro.AjaxMethod()]
        public string GetUserName(int userID)
        {
            string strSelect = 
                "select * from Users where UserID='" + userID + "'";
            ObjReader = ObjDB.GetDataReader(strSelect);
            if(ObjReader.Read())
            {
                username = 
                    ObjReader["FName"].ToString()+
                    " "+ObjReader["LName"].ToString();
            }
            return username;
        }

    public void BindDropDown()
    {
        string strSelect = "Select * from Users";
        ObjDS = ObjDB.GetDataSet(strSelect);
        ddlUser.DataSource = ObjDS;
        ddlUser.DataTextField = "UserName";
        ddlUser.DataValueField = "UserID";
        ddlUser.DataBind();
        ddlUser.Items.Add("--Select table--");
        ddlUser.SelectedIndex = ddlUser.Items.Count - 1;
        ddlUserList.DataSource = ObjDS;
        ddlUserList.DataTextField = "UserName";
        ddlUserList.DataValueField = "UserID";
        ddlUserList.DataBind();
        ddlUserList.Items.Add("--Select table--");
        ddlUserList.SelectedIndex = ddlUserList.Items.Count - 1;
    }

    [AjaxPro.AjaxMethod()]
    public string GetUserRole(string userID)
    {
        string strSelectTab="select * from GetUserRole(" + userID + ")";
        ObjReader = ObjDB.GetDataReader(strSelectTab);
        if (ObjReader.Read())
        {
            usertab = ObjReader["RoleName"].ToString();
        }
    return usertab;
    }

    [AjaxPro.AjaxMethod()] 
    public DataSet GetRoleTabs(string userID)
    {
        string strSelectTab = "Select * from GetRoleTabs(" + userID + ")";
        ObjAdapter = new SqlDataAdapter(strSelectTab,ObjCon);
        ObjAdapter.Fill(ObjDS,"Tabs");
        return ObjDS;
    }
}

The above code has been written in C#. Here, I have copied both the HTML page and the code behind file code. Remember to set the Language of your code snippet using the Language dropdown. Use the "var" button to to wrap Variable or class names in <code> tags like this.

License