使用jQuery动态创建的标记在我的表单发布后消失

我的页面使用jQuery动态创建行，但是当我刷新表单时，行就消失了

如何在MVC中保留jquery动态创建的控件？

---

这是一个主详细页，我正在创建一个账单详细页。“详细信息”有一个按钮，单击该按钮将显示一个询问详细信息的对话框。单击对话框上的ok之后，我将使用Jquery在details表中添加一个新的detail。问题是刷新页面时，动态创建的行将消失

您使用的是ajax还是完整格式的post

---

如果运行完整表单post，页面将刷新回其初始状态，它不会维护通过javascript/jquery对dom所做的任何修改。

您应该将对象列表添加到模型中。使用jquery为这些行生成正确的名称。每一行应表示列表的一个对象。如果使用标签或跨距生成此表，但不使用输入，则不会将此值发送到服务器，因此在这种情况下，您应该使用正确的名称生成隐藏的输入（例如DynamicObjects[0]。Value1，DynamicObjects[0]。Value2，DynamicObjects[1]。Value1，DynamicObjects[1]。Value2…）

您的模型类应该包含属性

IEnumerable<DynamicObject> DynamicObjects{get;set;}

视图应该从DynamicObjects arrey构建表

---

这有用吗？

互联网是无状态的

由于互联网的无状态特性，在页面重新加载之间不会自动记住在客户端使用JavaScript所做的任何事情。通过post提交表单将导致页面重新加载，从而忘记客户端更改。为了记住所做的更改，开发人员需要专门编写一个存储方法

Ajax

由于您已经在使用JavaScript，特别是jQuery，因此可以使用一个调用通知服务器客户端所做的更改

jQuery有一个极好的特性。网站上提供了一些教程。也有很多

使用jQuery的Ajax示例

作为一个简单的示例，当您添加额外的行时，可以调用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方法将数据发送到脚本。

一旦用户在对话框窗体上单击“确定”，您就可以向表中动态添加一行，然后使用该行调用控制器方法将数据添加到数据上下文中，这意味着新行保存在服务器端，因此当页面刷新时，数据将被保留

e、 g

控制器代码

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

---

你什么时候刷新页面？您还可以使用会话来存储要添加/删除的项目。我同意Fermin建议的这是一个Ajax操作。

这解释了为什么会发生这种情况，但它并没有提供解决方案。我假设可以使用jQuery动态向页面添加内容的人对web有一定程度的了解。可能是疏忽。

$('#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
}