Question

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

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

这是一个主要的详细信息页面，我正在创建一个结算明细页面。详细信息有一个按钮，当您单击它时将显示一个询问详细信息的对话框。在对话框中单击“确定”后，我将使用Jquery在详细信息表上添加新的详细信息。问题是当您刷新页面时，动态创建的行会消失。

Answer 1

互联网是无国籍的

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

<强>的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方法将数据发送到脚本。

Answer 2

用户在对话框表单上单击“确定”并动态向表中添加一行后，使用JQuery AJAX methods调用控制器方法将数据添加到数据上下文中，这将意味着

表示新的行已保存在服务器端，因此在刷新页面时，数据将被保留。

e.g。

$('#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 arrey构建表。

这有用吗？

Answer 4

您使用的是ajax还是完整的帖子？

如果您运行完整的表单帖子，页面将刷新回其初始状态，它将不会对通过javascript / jquery制作的dom进行任何修改。

Answer 5

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

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

5 个答案: