ورود / ثبت نام
0
0

پر کردن ListBox با استفاده از jQuery AJAX و JSON در ASP.NET

243 بازدید
ListBox

ListBox

در این مقاله به شما توضیح می دهیم که چگونه ListBox را با استفاده از  jQuery AJAX و JSON در ASP.NET پر کنید. مقاله به صورت کامل و بخش به بخش بوده و به صورت تصویری تمام مراحل برسی میکند.همراه ما باشید.

 

ساخت پایگاه داده:

ListBox

میتوانید تعدادی رکورد نیز به آن اضافه کنید.

 

ListBox

کد HTML زیر شامل ASP.Net ListBox می باشد در واقع یک ListBox ایجاد میکند.

<asp:ListBox ID="lstCustomers" runat="server">
</asp:ListBox>

برای ارتباط با دیتابیس نیاز به فضای نام زیر دارید:

سی شارپ:

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

VB.Net:

Imports System.Data
Imports System.Web.Services
Imports System.Configuration
Imports System.Data.SqlClient

The WebMethod زیر لیست مشتری ها را از جدول مشتری ها می گیرد و سپس یک generic list از ListItem class ایجاد می کند. در هر object، ListItem اسم مشتری در قسمت متنی و CustomerId در قسمت مقادیر (Value) تنظیم می شود.

[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;
        }
    }
}

VB.NET:

<WebMethod()> _
Public Shared Function GetCustomers() As List(Of ListItem)
    Dim query As String = "SELECT CustomerId, Name FROM Customers"
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As New SqlConnection(constr)
        Using cmd As New SqlCommand(query)
            Dim customers As New List(Of ListItem)()
            cmd.CommandType = CommandType.Text
            cmd.Connection = con
            con.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    customers.Add(New ListItem() With { _
                      .Value = sdr("CustomerId").ToString(), _
                      .Text = sdr("Name").ToString() _
                    })
                End While
            End Using
            con.Close()
            Return customers
        End Using
    End Using
End Function

پر کردن آیتم های ListBox در سمت مشتری (Client) با استفاده از jQuery :

در درون کنترل کننده رویداد های (event handler) اسناد (document)، ابتدا WebMethod با استفاده از عملکرد jQuery AJAX فرا خوانده می شود.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $.ajax({
        type: "POST",
        url: "Default.aspx/GetCustomers",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            var lstCustomers = $("[id*=lstCustomers]");
            lstCustomers.empty();
            $.each(r.d, function () {
                lstCustomers.append($("<option></option>").val(this['Value']).html(this['Text']));
            });
        }
    });
});
</script>

حال میتوانید پروژه را اجرا کنید.

موفق باشید.

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=16565
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
محمد نجفی
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد پر کردن ListBox با استفاده از jQuery AJAX و JSON در ASP.NET

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.