Jquery日期拾取器&c#/ asp.net -异步数据库查询

本文关键字：net asp 异步 查询 数据库 日期 Jquery | 更新日期: 2023-09-27 18:12:56

我正在使用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>

我在客户端有这个代码片段来处理更改事件:

var dates = $('#from_date, #to_date').datepicker({
                if ( this.id == "to_date" )
                    $('#to_date').change();
            });

调用控制器

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日期拾取器&c#/ asp.net -异步数据库查询

从你的问题来看，你使用的是哪个特定的jQuery '日期选择器'插件有点不清楚，所以我将继续使用jQuery UI日期选择器作为这个例子。

首先，在使用jQuery和ASP时应该注意一些事情。净WebFroms。特别是，直到最近，当服务器控件被呈现时，它们的id会被。net弄乱。在编写大量客户端脚本时，坚持使用CSS类通常是个好主意，但如果必须使用id，则可以选择如下控件:

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

其次，您需要通过WebMethods或通过配置ASPX页面返回XML或JSON与服务器通信。ASP。. NET MVC确实使这很容易，但在WebForms中是可能的，绝对值得你花时间(我讨厌UpdatePanels)。

现在来看一些代码。

ASPX: 

<%@ 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>

ASPX.CS 

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;
    }
}
相关文章：