使用 ASP.NET MVC 在一个页面上创建动态主从视图

Question

这是一个设计/技术问题。

使用 ASP.NET MVC，我可以轻松地创建一个简单的应用程序，它有两个视图，一个是主视图，以只读的表格形式显示所有记录。另一个详细信息视图以创建新记录。

我的目标是将详细信息表单与表格放在同一页面上。 用户按保存输入数据，新记录将添加到表中无需切换视图和重新加载内容。它基本上应该像在 stackowerflow 中发布新答案或评论一样工作。

我通过编写自己的 jQuery 代码并使用 JSON 与控制器操作进行通信找到了这样做的方法。在 ASP.NET MVC 中创建这些动态表单的方式是这样的吗？

使用这种方法，我面临以下设计/可扩展性问题：

• 在我看来，使用 jQuery 呈现新行有点混乱。
• 如果您添加新字段，我有两个地方需要调整 - 一次在主视图中，第二次在 jQuery 脚本中。

目前我正在将新记录添加到表中，如下所示：

function addQueryField() {
      // Determine the index of the next row to insert
      var index = $("tr[id^=queryRow]").size();
      // Create DOM element for table row
      var oTr = $(document.createElement("tr")).attr("id", "queryRow" + index);
      // Create DOM element for value textbox
      var oValueTextBox = $(document.createElement("input")).attr("name", "query[" + index + "].Value").attr("id", "Value"+index).attr("type", "text"); 
    });

我基本上使用here 描述的技术。

可能有一些开箱即用的解决方案吗？

Answer 1

如果我是你我会将添加过程与更新表格“或部分页面”分开

我是这样做的：

1. 客户端点击了添加按钮
2. 我通过 jQuery 加载合适的 Create 部分视图，并可能在模态窗口中显示它
3. 客户填写表格并点击保存
4. 保存时我首先验证表单，如果一切正常，我通过 jQuery 提交它并阻止页面提交
5. 在控制器上，我执行Post 要求的操作，如果有任何ModelState 错误，则我将它们返回为JSON，让客户端java-script 代码向客户端显示这些错误李>
6. 如果服务器没有返回错误，我会通过 jQuery 更新页面“或你的表格”的部分部分，方法是 再次调用服务器，然后让Controller Action 返回部分视图而不是全页视图。

我知道有很多事情需要更多解释，但我希望这个想法很清楚