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 - 異步數據庫查詢

回答

相關問題