jquery日期选择器&；c#/aspnet-异步数据库查询_C#_Jquery_Asp.net_Ajax_Json

jquery日期选择器&；c#/aspnet-异步数据库查询

c# jquery asp.net ajax json

jquery日期选择器&；c#/aspnet-异步数据库查询,c#,jquery,asp.net,ajax,json,C#,Jquery,Asp.net,Ajax,Json,我正在使用C#，ASP.NET框架[对这个环境来说非常新]。这就是我想要实现的目标：将数据从jQuery Datepicker文本框传递到控制器分析所选范围内的日期、数据库查询异步地将查询的行发送回页面以更新内容以下是HTML： <form id="date" runat="server"> <asp:Label AssociatedControlId="from_date" Text="From:" runat="server" /> <

我正在使用C#，ASP.NET框架[对这个环境来说非常新]。这就是我想要实现的目标：

将数据从jQuery Datepicker文本框传递到控制器
分析所选范围内的日期、数据库查询
异步地将查询的行发送回页面以更新内容

以下是HTML：

<form id="date" runat="server">
    <asp:Label AssociatedControlId="from_date" Text="From:" runat="server" />
    <asp:TextBox ID="from_date" Text="" runat="server" />
    <asp:Label AssociatedControlId="to_date" Text="To:" runat="server" />
    <asp:TextBox ID="to_date" Text="" runat="server" />
</form>

要调用控制器，请执行以下操作：

protected void to_date_UpdateHandler( object sender, EventArgs e ) {
  /* from here, I would query within the ranges in the "from_date" 
     and "to_date" textboxes */
}

显然，这将导致页面刷新，但我希望异步传递数据。我应该如何实现这一目标？谢谢。

您的问题有点不清楚您正在使用哪个jQuery“datepicker”插件，因此我将继续在本例中使用jQuery UI日期选择器

首先，在使用jQuery和ASP.NET WebFroms时，您应该注意一些事情。具体地说，直到最近，当呈现服务器控件时，它们的ID都会被.NET破坏。在执行大量客户端脚本时，坚持使用CSS类通常是一个好主意，但如果必须使用IDs，则可以选择如下控件：

var $toDate = $('input[id$=to_date]');

其次，您需要通过

WebMethods

或通过配置一个ASPX页面来返回XML或JSON来与服务器通信。ASP.NETMVC确实让这变得很容易，但它在WebForms中是可能的，绝对值得您花费时间（我鄙视UpdatePanel）

现在来看一些代码

ASPX：

很好的解决方案。谢谢你，德里克！

var $toDate = $('input[id$=to_date]');

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Example ASP.NET/jQuery Datepicker</title>
    <link type="text/css" rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/redmond/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
    <script type="text/javascript" src=" http://jquery-json.googlecode.com/files/jquery.json-2.3.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.js"></script>

    <script type="text/javascript">

        // On DOM ready...
        $(function() {

            // Cache the date pickers
            var $fromPicker = $('.from_date'),
                $toPicker = $('.to_date');

            // Init the date pickers
            $fromPicker.datepicker();
            $toPicker.datepicker();

            // Handle change event for 'to' date
            $toPicker.change(function(e) {

                // Get the dates
                var fromDate = $fromPicker.datepicker('getDate');
                var toDate = $(this).datepicker('getDate')

                // prepare the data to be passed via JSON
                var dates = {
                    fromDate: fromDate,
                    toDate: toDate
                };

                // Call the web method
                $.ajax({
                    type: 'POST',
                    url: 'Default.aspx/GetDate',
                    data: $.toJSON(dates),
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: function(msg) {
                        alert(msg.d);
                    }
                });

            });

            // Log errors
            $(".log").ajaxError(function() {
                $(this).text("Error in ajax call.");
            });

        });

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager" EnablePageMethods="true" runat="server">
    </asp:ScriptManager>
    <asp:Label ID="from_date_lbl" AssociatedControlID="from_date" Text="From:" runat="server" />
    <asp:TextBox ID="from_date" CssClass="from_date" Text="" runat="server" />
    <asp:Label ID="to_date_lbl" AssociatedControlID="to_date" Text="To:" runat="server" />
    <asp:TextBox ID="to_date" CssClass="to_date" Text="" runat="server" />
    <asp:Label ID="log_lbl" CssClass="log" runat="server" />
    </form>
</body>
</html>

using System;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page
{
    [WebMethod]
    public static string GetDate(string fromDate, string toDate)
    {
        DateTime dtFromDate;
        DateTime dtToDate;

        // Try to parse the dates
        if (DateTime.TryParse(fromDate, out dtFromDate) &&
            DateTime.TryParse(toDate, out dtToDate))
        {
            // Perform calculation and/or database query

            return "success!";
        }

        return null;
    }
}