Home/ Questions/Q 6768213
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T15:02:54+00:00

I am working with the C#, ASP.NET framework [very new to this environment]. This

  • 0

I am working with the C#, ASP.NET framework [very new to this environment]. This is what I want to achieve:

  • Pass data from jQuery Datepicker textbox to controller
  • Parse the date, database query from the selected range
  • Asynchronously, send queried rows back to page to update content

Here is the 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>

I have this snippet on the client side to handle the change event:

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

To call in the controller:

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

Obviously, this will cause a page refresh, but I want to pass the data along asynchronously. How should I go about achieving this? Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s a little unclear from your question which particular jQuery ‘datepicker’ plugin you are using, so I will proceed to use the jQuery UI date picker for this example.

    First off, there are some things you should be aware of when working with jQuery and ASP.NET WebFroms. Specifically, up until very recently, when server controls are rendered, their IDs get mangled by .NET. It is usually a good idea to stick to CSS classes when doing lots of client side scripting, but if you must use IDs, you can select controls like so:

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

    Secondly, you will need to communicate with the server via WebMethods or by configuring an ASPX page to return XML or JSON. ASP.NET MVC really makes this easy, but it’s possible in WebForms and definitely worth your time (I despise UpdatePanels).

    Now to some code.

    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;
    }
}
    • 0