1

I have a page where it collects First Name, Second Name, City, State from the user.

First Name, Second Name -> these are text boxes. City, State -> Dropdown list.

When user enters name and selects city and state, if the user press Refresh button, whatever data entered and selected details will go away. How to retain this data even the browser gets refreshed.

Thanks, Pacchi

Haedrian
  • 4,240
  • 2
  • 32
  • 53
Pacchi
  • 57
  • 1
  • 7
  • Many people refresh the page to clear the fields in a form, so doing this could break usability. What is the problem you are trying to solve with this? – Tasos K. Nov 17 '13 at 11:37
  • If i have a lot of textbox controls for the user input and if user has already filled it, i should not loose those data as the user has to enter all the details once again. – Pacchi Nov 17 '13 at 11:41
  • Your project is Web Forms or MVC? I gave an an answer for Web Forms, but it is no good if you are using MVC. – Tasos K. Nov 17 '13 at 12:10
  • It is Web Forms only... – Pacchi Nov 17 '13 at 12:57

4 Answers4

2

Unless you store the contents as they are entered (either post them back to server with AJAX) or store them in local storage or cookies on a event such as blur then the refresh request is not going to be able to send back those fields.

You would have to write some client side code to save them and populate them again on page load but should really consider that if you store them on the local machine then they become a potential "play back" security risk, where the next person using the web page has access to the previous persons data. Also you need to consider how a user clears the data and starts again.

I would add that If the user has deliberately pressed F5 then they are really wanting to reload the page from its initial state and start again. If you're using F5 as way of getting them to refresh because part of the page need updating then consider it might be better to provide a button or link on the page in question and allow the user to click on that and then fore you to make an AJAX call to refresh that part of the page rather than the entire page.

Code Uniquely
  • 6,356
  • 4
  • 30
  • 40
0

If you are using MVC you have soultion to it. Otherwise you have to go with javascript.

Shiva Saurabh
  • 1,281
  • 2
  • 25
  • 47
0

You could use a Timer within an UpdatePanel so that in every tick of Timer1 you can save the data from the input to Session.

For example in the following markup:

<div class="row">
    <label>First Name:</label> 
    <asp:TextBox ID="FirstNameTextBox" runat="server"></asp:TextBox>
</div>
<div class="row">
    <label>Last Name:<label> 
    <asp:TextBox ID="LastNameTextBox" runat="server"></asp:TextBox>
</div>
<div class="row">
    <label>City:</label> 
    <asp:DropDownList ID="CityDropDownList" runat="server"></asp:DropDownList>
</div>
<div class="row">
    <label>State:</label> 
    <asp:DropDownList ID="StateDropDownList" runat="server"></asp:DropDownList>
</div>
<div class="row">
    <asp:Button ID="SubmitButton" runat="server" Text="Button" />
</div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Timer ID="Timer1" runat="server" Enabled="true" Interval="5000" OnTick="Timer1_Tick"></asp:Timer>
        </ContentTemplate>
    </asp:UpdatePanel>

The code behind for this would be:

protected void Page_Load(object sender, EventArgs e)
{
    if (Session["FirstName"] != null) FirstNameTextBox.Text = Session["FirstName"].ToString();
    if (Session["LastName"] != null) LastNameTextBox.Text = Session["LastName"].ToString();
    if (Session["City"] != null) CityDropDownList.SelectedValue = Session["City"].ToString();
    if (Session["State"] != null) StateDropDownList.SelectedValue = Session["State"].ToString();
}

protected void Timer1_Tick(object sender, EventArgs e)
{
    Session["FirstName"] = FirstNameTextBox.Text;
    Session["LastName"] = LastNameTextBox.Text;
    Session["City"] = CityDropDownList.SelectedValue;
    Session["State"] = StateDropDownList.SelectedValue;
}

Every time the Timer1 ticks, you can save the data from the form fields to your Session and on Page_Load(...) if there are any data in Session you could auto fill them.

Make sure to clear the data from the Session when the user actually submits the form.

Tasos K.
  • 7,979
  • 7
  • 39
  • 63
  • This is a great solution but i think it is not fair to use timer tick for a particular interval so that it saves into a session. Point to be seen is not all users refresh the page during the form submission. – Shiva Saurabh Nov 18 '13 at 06:02
  • What do you mean when you say that it is not fair? It is not the most efficient approach one could take (considering resources), but it is rather easy to implement. – Tasos K. Nov 18 '13 at 09:41
  • yeah, i mean to say that. It would be better to check only if the page refreshes rather than saving in session over an interval of 5 seconds.@codingstill – Shiva Saurabh Nov 18 '13 at 09:43
-1

JavaScript:

1) localStorage (HTMl5 browsers only) - you could save it as a property of the page's local storage allowance

2) save it in a cookie

3) append the variable to the URL hash so it's retrievable via location.hash after the refresh

Session:

1) save it as a session variable and retrieve it over AJAX each time the page loads

2) save it in a cookie (might as well do the JS approach if you're going to cookie it)

Arun Verma
  • 1
  • 1