MVC3 与 AJAX 和验证的复杂模型绑定 - 获取动态图

Question

假设我有一些类似这样的模型对象：

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 的HasWidgets，它将加载一个局部视图，其中包含一个用于将WidgetModel 类型的项添加到表单数据的接口。

当点击表单的提交按钮时，我想要一个完整的图表传递给控制器​​。

我想我可以用编辑器模板做这样的事情，但是我的子对象的命名方式不会被解析为图形的一部分（我希望是因为它们是在事后添加的，而不是意识到它们是更大模型的一部分）。

是否有支持这种事情的机制/模式？我知道这有点递归，但我是否必须重新发明轮子才能正确命名所有内容？

Answer 1

如果您的 UI 允许此解决方案，我建议您首先将所有模型加载到视图中，但隐藏“Bar”（以及“Widget”）部分（使用 CSS 隐藏）。然后使用 JavaScript/jQuery 展示它们。

即使“Bar”需要根据“Foo”属性值加载数据（而“Widget”取决于“Bar”），在第一步加载所有元素，然后通过 Javascript 填充它们总是更容易或 AJAX 调用。

Answer 2

创建以下内容：

• 返回 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!
         }
      });