Question

My page creates rows dynamically using jQuery but when I refresh the form, the rows are gone.

How can I preserve the jquery dynamically created controls in MVC?

It’s a master detail page, I am creating a billing detail page. The details has a button which when you click it will show a dialog box asking detail info. After clicking ok on the dialog box I am adding a new detail on details table using Jquery. The problem is when you refresh the page, the dynamically created row disappears.

Answer 1

The Internet is Stateless

Anything done with JavaScript on the client side is not automatically remembered between page reloads due to the stateless nature of the internet. Submitting a form via post will result in a page reload so client-side changes are forgotten. To remember the changes made, the developer needs to specifically code a storage method.

Ajax

As you are using JavaScript and specifically jQuery already, an ajax call could be used to notify the server of the changes made client side.

jQuery has an excellent AJAX library. Several tutorials are avalailable at the jQuery tutorials page. There are also plenty of web pages devoted to the subject.

Ajax example using jQuery

As a simple example, when you add the extra row you could call an ajax function such as:

$.ajax({
  url: 'ajax/add_row.html?user_id=100&data=new-data',
  success: function(data) {
    alert('Adding of the row was acknowledged.');
  }
});

Server side

On the server side, you simply need a page located at ajax/add_row.html to do a little bit of work, taking the data passed to it and adding it to the database. On the next page reload, the added data can be put onto the page as usual.

In reality, if your data is more complex than this, it may be better to send the data to the script via the post method.