آموزش دریافت اطلاعات DropDown توسط Json در Asp.Net

در این پست می خواهیم چگونگی دریافت اطلاعات از پایگاه داده در DropDown به روش json و Ajax در Asp.Net را اموزش دهیم.

روش های مختلفی برای اتصال یک دراپ دان لیست وجود دارد در طراحی صفحات وب . امروز میخواهیم یکی از این روش ها که با استفاده از json می باشد این کار را انجام دهیم.

ابتدا یک پروژه از نوع asp ایجاد میکنیم و داخل ان یک فرم اضافه و مانند زیر کد نویسی می کنیم .

 
<form id="form1" runat="server">
    <asp:DropDownList ID="ddliranganj" runat="server">
    </asp:DropDownList>
</form>

حال یک جدول در پایگاه خود به صورت زیر با مقادیر مشخص ایجاد میکنیم.

CREATE TABLE [dbo].[Customers] (
    [CustomerId] INT           IDENTITY (1, 1) NOT NULL,
    [Name]       NVARCHAR (50) NOT NULL,
    PRIMARY KEY CLUSTERED ([CustomerId] ASC)
);

سپس به صفحه کلاینت می رویم و برای شروع ابتدا فضای نام های زیر را اضافه می کنیم.

using System.Data;
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;

در ادامه یک تابع از نوع استاتیک ایجاد می کنیم، از نوع webmethod و به صورت زیر کدنویسی می کنیم و کوئری مورد نظر را برای واکشی اطلاعات از جدول را می نویسیم.

[WebMethod]
public static List<ListItem> GetCustomers()
{
    string query = "SELECT CustomerId, Name FROM Customers";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            List<ListItem> customers = new List<ListItem>();
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    customers.Add(new ListItem
                    {
                        Value = sdr["CustomerId"].ToString(),
                        Text = sdr["Name"].ToString()
                    });
                }
            }
            con.Close();
            return customers;
        }
    }
}

سپس با فرم برگشته و برای اجرای json اسکریپت زیر را به فرم خود اضافه می کنیم.

<script type="text/javascript">
        $(function () {
            $.ajax({
                type: "POST",
                url: "CS.aspx/GetCustomers",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var ddlCustomers = $("[id*=ddliranganj]");
                    ddlCustomers.empty().append('<option selected="selected" value="0">انتخاب کنید </option>');
                    $.each(r.d, function () {
                        ddlCustomers.append($("<option></option>").val(this['Value']).html(this['Text']));
                    });
                }
            });
        });
</script>

نکته: براساس دراپ دان لیست خود دستور انتخاب مقدار را در کد قرار دادیم.

نتیجه حاصل شده :