ASP.NET @Html.TextBoxFor : How to not lose value user entered in case page is refreshed?

Question

I am using MVC hmtl helper syntax for textbox i.e.@Html.TextBoxFor(m => m.Id). I have quite lengthy form with multiple textboxes, radio buttons and drop downs.

Problem is that when I am refreshing the page, the values filled in the controls i.e. textbox,dropdown,radio-buttons filled get lost.

How can I avoid this and restore the filled values of the form even if user refreshes the page? Any other method than localstorage/cookies etc.?

Just want to explore if there is any other way to resolve this. — Sahil Sharma, Jun 17 '17 at 13:54
@sahil the state of the page must be saved, plain and simple — Brian Ogden, Jun 17 '17 at 14:06
@BrianOgden: How can i do that? any example? can this be done by viewbag,viewstate etc.? It would be really useful if you can share some example — Sahil Sharma, Jun 17 '17 at 14:09
@sahil using cookies or localstorage, plenty of examples online — Brian Ogden, Jun 17 '17 at 14:22
@sahil why do you have this requirement? Any user knows that if you refresh the page you strongly risk losing your work, you should warn user when they attempt to leave the page, a refresh is a form of leaving the current page and requesting it again or clicking another web link https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes — Brian Ogden, Jun 17 '17 at 15:32

hasan · Answer 1 · 2017-06-17T14:33:37.690

0

you can create your jquery custom method with sessionStorage and you can add it to jquery.fn object to keep your form data even after page refresh

(function($){

   // To Load your form values from sessionStorage, and set sessionStorage when value is changed.

  $.fn.keepValue = function(name) {
    if(!name) {
      name= "";
    }
    return this.each(function() {
      var $this = $(this);
      var id = $this.attr('id');
      var storage_name = namespace + id;
      var value;

      // Store form changes in a cookie
      $this.change(function() {
         sessionStorage.setItem(storage_name, $this.val());
      });

      value = sessionStorage.getItem(id);

      // Don't overwrite value if it's already exist
      if(!$this.val()) {
        $this.val(name + value);
      }
    });
  };
})(jQuery); 

$(document).ready(function(){
  $('#YourElementId').keepValue();
});

edited Jun 17 '17 at 14:33

answered Jun 17 '17 at 14:09

hasan

3,484
1
16
23

I believe session or local storage is a better option for storing form data. Cookies are sent in the header every time a request is made, so they should be reserved for smaller sets of data, like tokens. – Bobby Speirs Jun 17 '17 at 14:22
The OP clearly states the requirement that the solution not use cookies or localstorage, albeit it is probably not possible to save the state of the page without localstorage or cookies – Brian Ogden Jun 17 '17 at 14:24
@Brian maybe OP can hold form data with using model and can return view with this model in controller – hasan Jun 17 '17 at 14:28
@BrianOgden thanks for information i have updated my answer with sessionStorage – hasan Jun 17 '17 at 14:34
@BrianOgden they are almost same but there is a difference between localStorage and sessionStorage. this links explain how different they are – hasan Jun 17 '17 at 23:42
A bit of semantics I think localStorage and sessionStorage both extend Storage. There is no difference between them except for the intended "non-persistence" of sessionStorage – Brian Ogden Jun 18 '17 at 00:07
Yes you are right there is a permanance difference and I guess this is the reason why we cant say they are equal. by the way i had forgotten to add link in my previous comment. https://stackoverflow.com/questions/5523140/html5-local-storage-vs-session-storage – hasan Jun 18 '17 at 00:10

ASP.NET @Html.TextBoxFor : How to not lose value user entered in case page is refreshed?

1 Answers1