jquery datepicker＆c＃/ aspnet - 异步数据库查询

我正在使用C＃，ASP.NET框架[非常新的环境]。这就是我想实现：从jQuery的日期选择器的文本框jquery datepicker＆c＃/ aspnet - 异步数据库查询

将数据传递给控制器
从选定范围解析日期，数据库查询
异步发送查询行返回页面更新内容

下面是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>

我对客户的sid这个片段E要办理变更事件：

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 */ 
}

显然，这将导致页面刷新，但我想通过数据一起异步。我应该如何去实现这个目标？谢谢。

来源

2011-11-01 rabid_zombie

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

首先，有些事情在使用jQuery和ASP.NET 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; 
    } 
}

来源

2011-11-02 02:14:17

的最佳解决方案。谢谢@Derek！ –

jquery datepicker＆c＃/ aspnet - 异步数据库查询

回答

相关问题