How to maintain ajax text box calander control value after save button clicked

Question

I am using asp.net text box control for date picking..for that, i am using ajax calander extender. Here, is facing issue that, date control values will be clearing after save button clicked...here I want to maintain the date values till I manually cleared... How to maintain this value after saving....

Answer 1

The date selected in such a text box should persist, and should not need any extra special code to persist such values.

Perhaps you disabled viewstate for the given controls, or given page?

So, say this markup:

I dropped in 2 text boxes, and then added the date popup extender.

The resulting markup is thus this:

        <div style="float:left">

            <h3>Enter start date</h3>
            <asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox>

            <ajaxToolkit:CalendarExtender ID="txtStartDate_CalendarExtender" runat="server" BehaviorID="txtStartDate_CalendarExtender" TargetControlID="txtStartDate">
            </ajaxToolkit:CalendarExtender>

        </div>

        <div style="float:left;margin-left:35px">

            <h3>Enter end date</h3>
            <asp:TextBox ID="txtEndDate" runat="server"></asp:TextBox>

            <ajaxToolkit:CalendarExtender ID="txtEndDate_CalendarExtender" runat="server" BehaviorID="txtEndDate_CalendarExtender" TargetControlID="txtEndDate">
            </ajaxToolkit:CalendarExtender>

        </div>

        <div style="clear:both"></div>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Submit"
            OnClick="Button1_Click"
            />
        <br />
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>

And now my code behind is this:

        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            DateTime dtStart = DateTime.Parse(txtStartDate.Text);
            DateTime dtEnd = DateTime.Parse(txtEndDate.Text);

            string sResult =
                $@"Start date = {dtStart.ToString("D")} <br/>
                End date = {dtEnd.ToString("D")}";

            Label1.Text = sResult;

        }

And the result is this:

So, as above shows, I was able to click the button a 2nd time, and the 2 text boxes did not lose their values.

Perhaps you have on the page load event some code to clear the text boxes. However, do keep in mind that the page load event will run each and every time you click on a button, so if you have typical setup code in the page load event, it will run each and every time BEFORE your button code click event code stub runs.

As a result, you in 99 out of 100 web pages you create?

You need to wrap the first time and your control setup code you have in the page load event in a !IsPostBack block of code.

Hence, like this:

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                // here this code ONLY runs on the very first
                // page post back

                // code here can setup controls, load data

                txtStartDate.Text = ""; // clear start date
                txtEndDate.Text = "";   // clear end date
            }
        }

So, note how I clear out the start and end date in above. However, having wrapped the page setup code (our load event) with a if (!IsPostBack) then such code will only run on the first page load.

So, if you have some text box setup code in the page load event? It will run each and every time, and runs before your button code stub. Hence, if I don't use the above !IsPostBack code block?

Then my page will not work, since when I click the button, page load event fires first, and THEN your button click code runs. Failing above, then the 2 textboxes would be cleared each time.

Answer 2

Maintaining the value of an AJAX text box calendar control after clicking a save button typically involves some JavaScript and possibly server-side handling depending on your application architecture. Here's a general approach you can follow:

1. Store the Value: Before saving, store the current value of the calendar control somewhere accessible after the page reloads. You can use cookies, local storage, or session storage for this purpose. JavaScript will help in capturing the value.
2. Reload the Page: After clicking the save button, you'll typically reload the page to reflect the changes. When the page reloads, the calendar control will reset to its default value.
3. Restore the Value: Upon reloading the page, you'll need to retrieve the stored value and set it back to the calendar control. This step requires JavaScript to manipulate the DOM.

Here's a basic example using JavaScript and session storage:

html

<!DOCTYPE html>

<html>

<head>

<title>Calendar Example</title>

<script>

    // Function to save the calendar value to session storage

    function saveCalendarValue() {

        var calendarInput = document.getElementById("calendarInput");

        sessionStorage.setItem("calendarValue", calendarInput.value);

    }

    // Function to restore the calendar value from session storage

    function restoreCalendarValue() {

        var calendarInput = document.getElementById("calendarInput");

        var savedValue = sessionStorage.getItem("calendarValue");

        if (savedValue) {

            calendarInput.value = savedValue;

        }

    }

    // Call restore function when the page loads

    window.onload = restoreCalendarValue;

</script>

</head>

<body>

<input type="text" id="calendarInput" />

<button onclick="saveCalendarValue()">Save</button>

</body>

</html>

In this example:

saveCalendarValue() is called when the save button is clicked. It saves the value of the calendar input to session storage.

restoreCalendarValue() is called when the page loads. It retrieves the saved value from session storage and sets it back to the calendar input.

This is a basic example. In a real-world scenario, you might need to adjust it based on your specific requirements and the framework you're using. For instance, if you're using ASP.NET with AJAX, you might need to handle the value persistence in the server-side code as well.