Блог

Главная - Вопросы по программированию - jquery datepicker

jquery datepicker

#c# #jquery #asp.net #ajax #json

#c# #jquery #asp.net #аякс #json

Вопрос:

Я работаю с 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 */
}

Очевидно, это приведет к обновлению страницы, но я хочу передавать данные асинхронно. Как мне добиться этого? Спасибо.

Ответ №1:

Из вашего вопроса немного неясно, какой именно плагин jQuery ‘datepicker’ вы используете, поэтому я продолжу использовать средство выбора даты пользовательского интерфейса jQuery для этого примера.

Во-первых, есть некоторые вещи, о которых вы должны знать при работе с jQuery и ASP.NET Веб-страницы. В частности, вплоть до недавнего времени, когда серверные элементы управления отображаются, их идентификаторы искажаются .NET. Обычно при выполнении большого количества сценариев на стороне клиента рекомендуется придерживаться классов CSS, но если вам необходимо использовать идентификаторы, вы можете выбрать элементы управления следующим образом:

 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) amp;amp;
            DateTime.TryParse(toDate, out dtToDate))
        {
            // Perform calculation and/or database query

            return "success!";
        }

        return null;
    }
}

Комментарии:

1. Отличное решение. Спасибо @Derek!

Метки: