我的页面使用 jQuery 动态创建行，但是当我刷新表单时，行消失了。
如何在 MVC 中保留 jquery 动态创建的控件？
这是一个主详细信息页面，我正在创建一个结算详细信息页面。详细信息有一个按钮，当您单击它时将显示一个对话框，询问详细信息。在对话框上单击确定后，我正在使用 Jquery 在详细信息表上添加新的详细信息。问题是当您刷新页面时，动态创建的行消失了。
【问题讨论】：
标签： jquery asp.net-mvc
互联网是无状态的
由于互联网的无状态特性，在页面重新加载之间不会自动记住在客户端使用 JavaScript 完成的任何操作。通过 post 提交表单将导致页面重新加载，因此会忘记客户端更改。要记住所做的更改，开发人员需要专门编写存储方法。
Ajax
由于您已经在使用 JavaScript，特别是 jQuery，因此可以使用 ajax 调用来通知服务器客户端所做的更改。
jQuery 有一个出色的AJAX library。 jQuery tutorials page 提供了一些教程。还有很多web pages devoted to the subject。
使用 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 方法将数据发送到脚本。
【讨论】：
一旦用户在对话框表单上单击“确定”并且您在表格中动态添加一行，请使用 JQuery AJAX methods 调用您的控制器方法以将数据添加到您的数据上下文中，这意味着新行保存在服务器端，因此在刷新页面时将保留数据。
例如
$('#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
}
【讨论】：
您应该将对象列表添加到模型中。使用 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 arrey 构建表格。
这有帮助吗？
【讨论】：
您使用的是 ajax 还是完整形式的帖子？
如果你运行一个完整的表单帖子，页面将刷新到它的初始状态，它不会维护通过 javascript/jquery 对 dom 所做的任何修改。
【讨论】：
具体什么时候刷新页面？您可以使用 Session 来存储您正在添加/删除的项目。我同意这是 Fermin 建议的 Ajax 操作。
【讨论】：