使用ASP.NET MVC在一个页面上创建动态主 - 详细信息视图

时间:2012-06-09 23:20:59

标签: jquery ajax asp.net-mvc architecture

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

使用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所描述的技术。

那里可能有一些开箱即用的解决方案吗?

1 个答案:

答案 0 :(得分:1)

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

我这样做:

  1. 客户点击了添加按钮
  2. 我通过jQuery加载合适的Create局部视图并将其显示在模态窗口中
  3. 客户填写表单,然后点击保存
  4. 在保存时,我首先验证表单,如果一切正常,我通过jQuery提交并阻止页面提交
  5. 在Controller上,我执行Post要求的内容,如果有ModelState个错误,那么我将它们作为JSON返回,让客户端的java脚本代码显示这些客户的错误
  6. 如果没有从服务器返回错误,那么我通过再次调用服务器通过jQuery更新页面的“或你的表”部分,然后让Controller Action返回部分视图而非整页视图。
  7. 我知道有很多事情需要更多解释,但我希望这个想法很明确

相关问题