使用AJAX webmethod从下拉列表选择中绑定jquery数据表 [英] Bind jquery datatable from dropdownlist selection using AJAX webmethod

问题描述

我有一个下拉列表中填充的项目列表，该列表来自我的数据库（sql Server），但是我想根据所选项目选择一些项目并绑定数据表。我知道使用asp.net Gridview服务器控件但不能使用Jquery DataTable。



我尝试过：



这里我尝试了什么：

1. Jquery：

 $（＃<％= ddlReservationStatus.ClientID％>）。live（更改，函数（e）{//更改类别下拉列表的值
 e.preventDefault（）; 
 $ .checkSessionExists（function（event，data）{// .pive（events，data，handler（eventObject））：event：包含JavaScript事件类型的字符串，例如click或keydown。数据：将传递给事件的数据映射handler.handler（eventObject）触发事件时执行的函数。
 if（data.sessionExists）{
 showloading（）; 
 // PageMethods这允许你引用定义方法的页面（例如：PageMethods.GetSubCategory（GetSubCategory在MyProduct.aspx.cs中找到它）。）
 PageMethods.GetSubCategory（$（＃<％= ddlReservationStatus.ClientID％>）。val（），function（response）{//响应是pagemethod返回的值
 $（＃<％ = ddlReservationStatus.ClientID％>）。html（''）; //清除下拉列表的hddddububcategory 
 var result = eval（（+ response +））; //将字符串转换为json格式
 hideloading（）; 
}）; 
} 
}）; 
}）; 

2. c＃：以下是填充下拉列表的方法：

 ReservationInfo _ReservationInfo = new ReservationInfo（）; 
列表< reservationinfo> _ReservationInfoList = _ReservationInfo.GetReservationStatus（）。ToList< reservationinfo>（）; 
 ddlReservationStatus.DataSource = _ReservationInfoList; 
 ddlReservationStatus.DataValueField =ReservationId; 
 ddlReservationStatus.DataTextField =ReservationType; 
 ddlReservationStatus.DataBind（）; 
 

3. C＃这里我试图通过Id获取预订状态并绑定Jquery Datable：

 [WebMethod（EnableSession = true）] 
公共静态字符串GetReservationStatus（int ReservationTypeID）
 {
 HelperFunctions.InitializeCulture（）; //每个ajax调用方法都需要初始化文化
 ReservationInfo _ReservationInfo = new ReservationInfo（）; 
 _ReservationInfo.ReservationTypeID = ReservationTypeID; 
列表< reservationinfo> _ReservationInfoList = _ReservationInfo.GetReservationStatusById（）。ToList< reservationinfo>（）; // List< subcategoryinfo>这可以存储多个SubCategoryInfo对象
 //_ReservationInfoList.Insert（0，new ReservationInfo {SubCategoryId = 0，SubCategoryName = Resources.Language.Select}）; 
 var serializer = new System.Web.Script.Serialization.JavaScriptSerializer（）; 
返回serializer.Serialize（_ReservationInfoList）; 
} 

4.查询：这是我的程序

 ALTER proc [dbo]。[ getReservationStatusById] 
 @ReservationTypeId int 
 as 
 begin 
 select RS.ReservationId，RS.ReservationTypeId，
 RIGHT（ReservationType，LEN（ReservationType） -  2）AS ReservationType 
来自预订RS 
内部连接房间R on R.RoomId = RS.RoomId 
内部连接ReservationType RST on RST.ReservationTypeID = RS.ReservationTypeId 
其中RS.ReservationTypeId = @ReservationTypeId 
 end< / subcategoryinfo>< / reservationinfo>< / reservationinfo>< / reservationinfo>< / reservationinfo> 

解决方案

< blockquote>（＃<％= ddlReservationStatus.ClientID％>）。live（更改，函数（e）{//更改类别下拉列表的值
e.preventDefault（）;

.checkSessionExists（function（event，data）{// .pive（events，data，handler（eventObject））：event：A包含JavaScript事件类型的字符串，例如click或keydown。data：将传递给事件handler.handler（eventObject）的数据映射在触发事件时执行的函数。
if（data.sessionExists）{
showloading（）;
// PageMethods这允许你引用定义方法的页面（例如：PageMethods.GetSubCategory（GetSubCategory在MyProduct.aspx.cs中找到它）。）
PageMethods.GetSubCategory（

（＃<％= ddlReservationStatus.ClientID％>）。val（），function（response）{// response是pagemethod返回的值

I have a list of items populated in a dropdownlist which is coming from my database(sql Server), However I want to select some of the items based on the item selected and bind the datatable . I know doing it with asp.net Gridview server control but not with a Jquery DataTable.

What I have tried:

Here What I tried:
1. Jquery:

$("#<%=ddlReservationStatus.ClientID %>").live("change", function (e) {//when u change the value of Category dropdown
            e.preventDefault();
            $.checkSessionExists(function (event, data) {//.live( events, data, handler(eventObject) ):event:A string containing a JavaScript event type, such as "click" or "keydown." data:A map of data that will be passed to the event handler.handler(eventObject)A function to execute at the time the event is triggered.
                if (data.sessionExists) {
                    showloading();
                    // PageMethods this is allow you to refer the page where the method is defined(eg.: PageMethods.GetSubCategory(GetSubCategory find it inside MyProduct.aspx.cs).)
                    PageMethods.GetSubCategory($("#<%=ddlReservationStatus.ClientID %>").val(), function (response) {//response is the value return by pagemethod
                        $("#<%=ddlReservationStatus.ClientID %>").html(''); //clear the html of dropdown ddlsubcategory
                        var result = eval("(" + response + ")"); //converts the string to json format
                        hideloading();
                    });
                }
                });
            });

2. c# : Here is how am populating the dropdownlist:

ReservationInfo _ReservationInfo = new ReservationInfo();
           List<reservationinfo> _ReservationInfoList = _ReservationInfo.GetReservationStatus().ToList<reservationinfo>();
           ddlReservationStatus.DataSource = _ReservationInfoList;
           ddlReservationStatus.DataValueField = "ReservationId";
           ddlReservationStatus.DataTextField = "ReservationType";
           ddlReservationStatus.DataBind();

3. C# here am trying to get reservation status by Id and bind the Jquery Datable:

[WebMethod(EnableSession = true)]
    public static string GetReservationStatus(int ReservationTypeID)
    {
        HelperFunctions.InitializeCulture();//initialize culture is required in every ajax call methods
        ReservationInfo _ReservationInfo = new ReservationInfo();
        _ReservationInfo.ReservationTypeID = ReservationTypeID;
        List<reservationinfo> _ReservationInfoList = _ReservationInfo.GetReservationStatusById().ToList<reservationinfo>();//List<subcategoryinfo> this can store multiple SubCategoryInfo objects
        //_ReservationInfoList.Insert(0, new ReservationInfo { SubCategoryId = 0, SubCategoryName = Resources.Language.Select });
        var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        return serializer.Serialize(_ReservationInfoList);
    }

4. Query: And this is my procedure

ALTER proc [dbo].[getReservationStatusById]
@ReservationTypeId int
as
begin
   select RS.ReservationId, RS.ReservationTypeId, 
   RIGHT(ReservationType, LEN(ReservationType) - 2) AS ReservationType
   from Reservation RS 
   inner join Room R on R.RoomId = RS.RoomId
   inner join ReservationType RST on RST.ReservationTypeID = RS.ReservationTypeId
   where RS.ReservationTypeId = @ReservationTypeId
end</subcategoryinfo></reservationinfo></reservationinfo></reservationinfo></reservationinfo>

解决方案

("#<%=ddlReservationStatus.ClientID %>").live("change", function (e) {//when u change the value of Category dropdown e.preventDefault();

.checkSessionExists(function (event, data) {//.live( events, data, handler(eventObject) ):event:A string containing a JavaScript event type, such as "click" or "keydown." data:A map of data that will be passed to the event handler.handler(eventObject)A function to execute at the time the event is triggered. if (data.sessionExists) { showloading(); // PageMethods this is allow you to refer the page where the method is defined(eg.: PageMethods.GetSubCategory(GetSubCategory find it inside MyProduct.aspx.cs).) PageMethods.GetSubCategory(

("#<%=ddlReservationStatus.ClientID %>").val(), function (response) {//response is the value return by pagemethod

这篇关于使用AJAX webmethod从下拉列表选择中绑定jquery数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！