Теги, созданные динамически с помощью jQuery, исчезают после публикации моей формы

Question

Моя страница создает строки динамически, используя jQuery, но когда я обновляю форму, строки исчезают.

Как сохранить динамически созданные элементы управления jquery в MVC?

Это главная страница сведений, я создаю страницу сведений для выставления счетов. У детали есть кнопка, которая при нажатии на нее покажет диалоговое окно, запрашивающее подробную информацию. После нажатия кнопки «ОК» в диалоговом окне я добавляю новую деталь в таблицу сведений с помощью Jquery. Проблема в том, что при обновлении страницы динамически созданная строка исчезает.

Answer 1

Интернет без гражданства

Все, что делается с помощью JavaScript на стороне клиента, не запоминается автоматически между перезагрузками страницы из-за отсутствия интернета без сохранения состояния. Отправка формы по почте приведет к перезагрузке страницы, поэтому изменения на стороне клиента будут забыты. Чтобы запомнить внесенные изменения, разработчику необходимо специально написать метод хранения.

Ajax

Поскольку вы уже используете JavaScript и, в частности, jQuery, можно использовать вызов ajax для уведомления сервера об изменениях, сделанных на стороне клиента.

jQuery имеет превосходную библиотеку AJAX . На странице учебников jQuery доступно несколько учебных пособий. Есть также множество веб-страниц, посвященных теме .

Пример Ajax с использованием jQuery

В качестве простого примера, когда вы добавляете дополнительную строку, вы можете вызвать функцию ajax, такую ​​как:

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

Серверная сторона

На стороне сервера вам просто нужна страница, расположенная по адресу ajax / add_row.html, чтобы немного поработать, взять переданные ей данные и добавить их в базу данных. На следующей странице перезагрузки добавленные данные могут быть помещены на страницу как обычно.

В действительности, если ваши данные более сложны, чем это, может быть лучше отправить данные в сценарий с помощью метода post.

Answer 2

Как только пользователь нажал 'ok' в диалоговой форме, и вы динамически добавили строку в таблицу, используйте Методы JQuery AJAX , чтобы вызвать метод вашего контроллера для добавления данных в контекст данных. , это будет означать, что новые строки сохраняются на стороне сервера, поэтому при обновлении страницы данные сохраняются.

, например

$('#okButton').click(function(){
  //Add row

  var data = {
    detailName: $('#detailName').val(),
    detailInfo: $('#detailInfo').val()
  };

  $.ajax({
    type: "POST",
    url: "controller/AddDetail",
    data: data,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(xml, ajaxStatus) {
    // whatever you want here
    }
  });
});

Код контроллера

public ActionResult AddDetail(string detailName, string detailInfo)
{
  //Save detail
}

Answer 3

Вы должны добавить список объектов в вашу модель. Использование jquery генерирует правильные имена для этих строк. Каждая строка должна представлять объект списка. Если вы сгенерируете эту таблицу с метками или интервалами, но не с входными данными, эти значения не будут отправлены на сервер, поэтому в этом случае вам следует создать скрытые входные данные с правильными именами (например, DynamicObjects [0] .Value1, DynamicObjects [0] .Value2, DynamicObjects [1] .Value1, DynamicObjects [1] .Value2 ...)

Класс вашей модели должен содержать свойство

IEnumerable<DynamicObject> DynamicObjects{get;set;}

причины. DynamicObject содержит реквизиты Value1 и Value2.

Таким образом, ваше действие получит ваш модельный класс с динамическими объектами.

public ActionResult Index(MyModelClass form)
{
// do something
return View(form);
}

По вашему мнению таблица должна быть построена из массива DynamicObjects.

Было ли это полезно?

Answer 4

Когда именно вы обновите страницу? Вы можете использовать сеанс, чтобы также хранить элементы, которые вы добавляете / удаляете. Я согласен, что это Ajax-операция, как предложил Фермин.

Answer 5

Используете ли вы Ajax или полный пост?

Если вы запустите полную форму сообщения, страница вернется в исходное состояние, она не будет поддерживать какие-либо изменения в dom, сделанные через javascript / jquery.