در این مقاله میخواهیم با استفاده از ajax و jquery در asp.net اطلاعات را به گرید متصل کنیم و در صورت انتخاب چک باکس اطلاعات به روز شود بدون بار گزاری مجدد صفحه

ابتدا چن چک باکس میسازیم که با کلیک روی آن اطلاعات جدید به گرید بایند شود:

<table>  
  <tr>  
    <td>  
      <div id="div1" style="width: 170px; height: 160px;">  
        <asp:CheckBox ID="chk1" runat="server" />  
        <asp:Label ID="lbl" runat="server" Text=":Legal Status Report" AssociatedControlID="chk1"></asp:Label>  
        <hr />  
         Category:  
   <br />  
        <asp:CheckBox runat="server" ID="chk2" />  
          :Fresh Recognition  
   <br />  
        <asp:CheckBox runat="server" ID="chk3" />  
          :Renewal Recognition  
   <br />  
        Legal Status Category:  
   <br />  
         <asp:DropDownList ID="drp2" Width="100px" runat="server">  
            <asp:ListItem Text="Select" Selected="True"></asp:ListItem>  
            <asp:ListItem Text="Item1"></asp:ListItem>
         </asp:DropDownList>  
      </div>  
     </td>  
   </tr>  
</table> 

حالا به شکل زیر گرید رو اضافه کنید:

<asp:GridView ID="grd" runat="server" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2">  
    <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />  
    <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />  
    <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />  
    <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />  
    <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />  
    <SortedAscendingCellStyle BackColor="#FFF1D4" />  
    <SortedAscendingHeaderStyle BackColor="#B95C30" />  
    <SortedDescendingCellStyle BackColor="#F1E5CE" />  
    <SortedDescendingHeaderStyle BackColor="#93451F" />  
</asp:GridView>  

حالا اول به صفحه خود رفرنس jquery رو اضافه میکنیم:

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 

برای اولین چک باکس کد زیر را وارد میکنیم :(زمانی که روی این چک باکس کلیک شود یک تابع به نام Load_data فراخوانی میشود )

<script>  
     $(document).ready(function () {  
         $('#chk1').click(function () {  
                 $('#grd').empty();  
                 load_Data();  
             }  
         })  
       });  
</script> 

تابع load_data را که در بالا فراخوانی شده به شکل زیر مینویسیم:

function load_Data() {  
    debugger;  
    $.ajax({  
        type: 'POST',  
        contentType: "application/json; charset=utf-8",  
        url: 'WebForm2.aspx/Get_Data',  
        data: "{}",  
        dataType: 'JSON',  
        success: function (response) {
            $('#grd').append("<tr><th>Recognition_Type </th><th>Recognition_Number </th></tr>")  
            for (var i = 0; i < response.d.length; i++) {  
                debugger;  
                $('#grd').append("<tr><td>" + response.d[i].Recognition_Type + "</td><td>" + response.d[i].Recognition_Number + "</td></tr>")  
            };  
  
        },  
        error: function () {  
  
            alert("Error");  
        }  
    });  
    return false;  
}; 

و در صفحه aspx.cs خود کد زیر را بنویسید:

(در اینجا به پایگاه داده خود متصل میشویم  و اطلاعات رو فراخوانی میکنیم)

[WebMethod]  
public static List<Info> Get_Data()  
{  
    SqlConnection conn = new SqlConnection(@"your connection");  
    DataTable dt = new DataTable();  
      
    conn.Open();  
    SqlCommand cmd = new SqlCommand("select * from testReport", conn);  
    cmd.CommandType = CommandType.Text;  
    var d = cmd.ExecuteReader();  
    dt.Load(d);  
    List<Info> list = new List<Info>();  
    Info info;  
    foreach (DataRow dr in dt.Rows)  
    {  
        info = new Info(dr["Recognition_Type"].ToString(), dr["Recognition_No"].ToString());  
        list.Add(info);  
    }  
    conn.Close();  
    return list;  
}  
  
public class Info  
{  
    public Info(string recognition_type, string recognition_number)  
    {  
        this.Recognition_Type = recognition_type;  
        this.Recognition_Number = recognition_number;  
    }  
    private string _type;  
    private string _number;  
    public string Recognition_Type  
    {  
        get { return _type; }  
        set { _type = value; }  
    }  
    public string Recognition_Number  
    {  
        get { return _number; }  
        set { _number = value; }  
    }  
}  

در صورتی که عملیات موفقیت آمیز باشد یک لیست برگردانده می شود و در غیر اینصورت پیغام خطا نمایش داده می شود ودر صورت موفقیت آمیز بودن سر فصل هایی به گرید اضافه میشود سپس داده های دریافت شده به شکل زیر به گرید اضافه خواهند شد:

success: function (response) {  
    $('#grd').append("<tr><th>Recognition_Type </th><th>Recognition_Number </th></tr>")  
    for (var i = 0; i < response.d.length; i++) {
        $('#grd').append("<tr><td>" + response.d[i].Recognition_Type + "</td><td>" + response.d[i].Recognition_Number + "</td></tr>")  
    };  
  
},  
error: function () {  
    alert("Error");  
} 

و برای چک باکس دیگر تابع دیگری فراخوانی میشود ولی ابتدا قبل از فراخوانی باید گرید خالی خالی شود:

$('#CheckBox1').click(function () {  
        $('#grd').empty();  
        load_RND_Data();  
    });
function load_RND_Data() {    
    $.ajax({    
        type: 'POST',    
        contentType: "application/json; charset=utf-8",    
        url: 'WebForm2.aspx/load_RND_Data',    
        data: "{}",    
        dataType: 'JSON',    
        success: function (response) {    
            $('#grd').append("<tr><th>Company_Name </th><th>Legal_Status_Category </th></tr>")    
            for (var i = 0; i < response.d.length; i++) {    
                $('#grd').append("<tr><td>" + response.d[i].Company_Name + "</td><td>" + response.d[i].Legal_Status_Category + "</td></tr>")    
            };    
    
        },    
        error: function () {    
            alert("Error");    
        }    
    });    
    return false;    
}; 

حالا میتونید برنامه رو اجرا کنید: