基于采用最新的AJAX上载记录 [英] Load records based on the date using ajax

问题描述

我有一个日历中选择一个日期，此选中所有在该日聘用的员工应该出现在一个表中的特定日期后表示。这是我做了什么：

 公开名单＆LT;员工及GT; GetStaff（日期时间Arriva的）
    {
        名单＆LT;员工及GT;工作人员=新的名单，其中，员工及GT;（）;
        SqlConnection的连接=新...;
        SqlCommand的查询=新的SqlCommand（SELECT * FROM表1 WHERE Arriva的= @ Arriva的）;
        query.Parameters.AddWithValue（@ Arriva的，Arriva的）;
        连接。开（）;
        SqlDataReader的DT = query.ExecuteReader（）;
        而（dt.Read（））
        {
            工作人员S =新员工（）;
            s.StaffID =读卡器[ID]的ToString（）。
            s.fname =读卡器[的gname]的ToString（）。
            s.sname =读卡器[SNAME]的ToString（）。
            。s.date = Convert.ToDateTime（阅读器[日]的ToString（））的ToString（）;
            Staff.Add（多个）;
        }
        连接.Close（）;
        返回的工作人员;
    }
 

这是我的webmethod

  [WebMethod的]
    公开的IEnumerable＆LT;员工及GT; GetStaff（日期时间为准）
    {
        名单＆LT;员工及GT; S = util.GetStaff（日期）;
        返回S;
    }

        VAR ajReq =新XMLHtt prequest（）;
    $（文件）。就绪（函数（）{
        designtable（）;
        VAR的currentdate = $（'＃输入组插件）日期选择器（GETDATE）。
        getStaff（的currentdate）;
    }）;
 

  

这是我的表我删除了一些数据，使之简单   `函数designtable（数据）{               VAR选项卡='FnameSnamedate';

 表+ ='＆LT; TD＆GT; +味精[学生] .Fname +'＆LT; / TD＆GT;'; //我从型号如获得FNAME {集;} {获取;}
 

.........             }             $（'＃显示器）HTML（表）;         }`

  

这是我的ajax

 函数getStaff（日期）{
        ajReq.abort（）;
        ajReq = $阿贾克斯（{
            键入：POST，
            网址：文件夹/ filename.asmx / GetStaff
            的contentType：应用/ JSON的;字符集= UTF-8，
            日期：{日期：日期}，
            数据类型：JSON，
            成功：函数（MSG）{
                BuildTable（msg.d）;
            }
        }）;
    }
 

  

这是我如何构造我的日历

 ＆LT; D​​IV CLASS =输入组BFH-日期选择器BFH-日期选择器，切换数据切换=BFH，日期选择器＆GT;
    ＆LT;跨度类=输入组插件＆GT;＆LT;我类=glyphicon glyphicon日历＆GT;＆LT; / I＆GT;＆LT; / SPAN＆GT;
    ＆LT;输入类型=文本名称=级=表单控制的风格=宽度：400像素很重要;高度：40PX;占位符=日历/＆GT;
＆LT; / DIV＆GT;
 

  

这是我使用点击此处它不是选择日期的日历。这些都是我使用库JFiddle

解决方案

您的AJAX后不会自动沿着任何参数传递给的WebMethod 您呼叫。您需要包括这在数据设置。你应该考虑加入一个 ID 来你的文本框（我假设你添加一个名为tbDate），然后就可以通过得到的日期选择器中当前选定日期<一HREF =htt​​p://api.jqueryui.com/datepicker/#method-getDate相对=nofollow>日期选择器GETDATE ：

  VAR的currentdate = $（＃tbDate）日期选择器（GETDATE）;
 

然后添加到数据的岗位设置：

 数据：{数据：的currentdate}
 

有关共

  VAR ajReq =新XMLHtt prequest（）;
    $（文件）。就绪（函数（）{
        designtable（）;
        VAR的currentdate = $（＃输入组插件）日期选择器（GETDATE）。
        getStaff（的currentdate）;
}）;

功能getStaff（日期）{
    ajReq.abort（）;
    ajReq = $阿贾克斯（{
        键入：POST，
        网址：文件夹/ filename.asmx / GetStaff
        的contentType：应用/ JSON的;字符集= UTF-8，
        数据：{日期：日期}，
        数据类型：JSON，
        成功：函数（MSG）{
            BuildTable（msg.d）;
        }
    }）;
}
 

与小提琴更新

I have a calendar to select a date, this means after selecting a specific date all the staff employed at that date should appear in a table. this is what i have done:

   public List<Staff> GetStaff(DateTime arriva)
    {
        List<Staff> Staff= new List<Staff>();
        SqlConnection connection = new ...;
        SqlCommand query= new SqlCommand("SELECT * From table1 WHERE arriva=@arriva");
        query.Parameters.AddWithValue("@arriva", arriva);
        connection .Open();
        SqlDataReader dt= query.ExecuteReader();
        while (dt.Read())
        {
            Staff s= new Staff();
            s.StaffID= reader["ID"].ToString();
            s.fname= reader["gname"].ToString();
            s.sname= reader["sname"].ToString();
            s.date= Convert.ToDateTime(reader["date"].ToString()).ToString();
            Staff.Add(s);
        }
        connection .Close();
        return Staff;
    }

this is my webmethod

        [WebMethod]
    public IEnumerable<Staff> GetStaff(DateTime date)
    {
        List<Staff> s= util.GetStaff(date);
        return s;
    }

        var ajReq = new XMLHttpRequest();
    $(document).ready(function () {
        designtable();
        var currentDate = $('#input-group-addon').datepicker('getDate');
        getStaff(currentDate);
    });

this is my table i removed some data to make it simple `function designtable(data) { var tab= 'FnameSnamedate';

            table+= '<td>' + msg[student].Fname+ '</td>'; //I am getting Fname from Model e.g. {set;}{get;}

......... } $('#display').html(table); }`

this is my ajax

        function getStaff(date) {
        ajReq.abort();
        ajReq = $.ajax({
            type: "POST",
            url: "folder/filename.asmx/GetStaff",
            contentType: "application/json; charset=utf-8",
            date: { date: date },
            dataType: "json",
            success: function (msg) {
                BuildTable(msg.d);
            }
        });
    }

this is how i constructed my calender

    <div class="input-group bfh-datepicker bfh-datepicker-toggle" data-toggle="bfh-datepicker">
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    <input type="text" name="" class="form-control" style="width: 400px !important; height: 40px;" placeholder="Calendar" />
</div>

this is the calendar i am using Click here its not selecting the date. And these are the library i am using Library JFiddle

解决方案

Your AJAX post will not automatically pass along any parameters to the WebMethod that you are calling. You need to include this in the data setting. You should consider adding an id to your textbox (I'll assume you add one called "tbDate") and then you can get the currently selected date from the datepicker via Datepicker getDate:

var currentDate = $("#tbDate").datepicker("getDate");

Then add that to the data setting of the post:

data: { data: currentDate }

For a total of:

var ajReq = new XMLHttpRequest();
    $(document).ready(function () {
        designtable();
        var currentDate = $("#input-group-addon").datepicker("getDate");
        getStaff(currentDate);
});

function getStaff(date) {
    ajReq.abort();
    ajReq = $.ajax({
        type: "POST",
        url: "folder/filename.asmx/GetStaff",
        contentType: "application/json; charset=utf-8",
        data: { date: date},
        dataType: "json",
        success: function (msg) {
            BuildTable(msg.d);
        }
    });
}

Update with Fiddle

这篇关于基于采用最新的AJAX上载记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！