MVC3使用AJAX进行复杂模型绑定和验证 - 获取动态图

时间:2012-06-29 16:45:28

标签: asp.net-mvc-3

假设我有一些类似于此的模型对象:

public class FooModel
{
    [Required]
    public string Name { get; set; }
    [StringLength(100)]
    public string Description { get; set; }
    public bool HasBar { get; set; }
    public BarModel Bar { get; set; }
}

public class BarModel
{
    [Required]
    public string Name { get; set; }
    [StringLength(100)]
    public string Description { get; set; }
    public bool HasWidgets { get; set; }
    public IEnumerable<WidgetModel> Widgets { get; set; }
}

public class WidgetModel
{
    [Required]
    public string Name { get; set; }
    [StringLength(100)]
    public string Description { get; set; }
    public string Type { get; set; }
    public bool Active { get; set; }
}

我想为FooModel构建一个视图,在检查HasBar输入后,将加载Bar的部分视图,并完成验证(不显眼)。如果选中Bar的{​​{1}},则会加载包含用于将类型HasWidgets的项添加到表单数据的接口的部分视图。

单击表单的提交按钮时,我希望将完整的图表传递给控制器​​。

我以为我可以使用编辑器模板做这样的事情,但是我的子对象没有以一种被解析为图形的一部分的方式命名(我希望因为它们是在事实之后被添加而不是意识到他们是更大模特的一部分。)

是否有支持此类事情的机制/模式?我知道它有点递归,但是我必须重新发明轮子才能正确命名所有内容吗?

2 个答案:

答案 0 :(得分:1)

如果您的用户界面允许此解决方案,我建议您先将所有模型加载到视图中,但隐藏&#34; Bar&#34; (以及&#34; Widget&#34;)部分(使用CSS隐藏)。然后使用JavaScript / jQuery显示它们。

即使&#34; Bar&#34;需要加载数据取决于&#34; Foo&#34;属性值(以及&#34; Widget&#34;取决于&#34; Bar&#34;),在第一步加载所有元素总是更容易,然后通过Javascript或AJAX调用填充它们

答案 1 :(得分:1)

创建以下内容:

  • 返回BarModel的操作
  • 返回WidgetModel
  • 的操作
  • 接受整个图表或任何主对象的操作

检索单个组件,并在完成提交主操作后。

public JsonResult GetBar(string name)
{
    var bar = //get bar
    return Json(bar);
}

public JsonResult GetWidget(string name)
{
    var widget = //get widget 
    return Json(widget);
}

[HttpPost]
public ActionResult SaveGraph(GraphModel graph)
{
    // save graph.Bar
    // save graph.Widget
    // save graph.Foo

    return ViewResult(graph);   // or redirect, JSON, etc.
}

在您的客户端上,无论您的原始视图模型是什么,都可以构建并发布对象。

var graph = { Bar: { ... },
              Foo: { ... },
              Widget: { ... } 
            }

$.ajax({ url: '/mycontroller/savegraph',
         method: 'post',
         data: graph,
         success: function(resp) {
             // yay!
         }
      });