[英]ASP.NET MVC Dynamic Forms
任何人都可以建议用ASP.NET MVC开发动态表单的好方法吗?
我在页面上有级联下拉列表(下拉列表中的选项取决于在上一个下拉列表中选择的值)。
所有值都来自数据库。
如何使用ASP.NET MVC实现此类行为?
当然,我希望在提交表单时收到控制器中的所有值。
您可以使用我的FormFactory库轻松完成此操作。
默认情况下,它反映视图模型以生成PropertyVm[]
数组:
```
var vm = new MyFormViewModel
{
OperatingSystem = "IOS",
OperatingSystem_choices = new[]{"IOS", "Android",};
};
Html.PropertiesFor(vm).Render(Html);
```
但您也可以以编程方式创建属性,因此您可以从数据库加载设置,然后创建PropertyVm
。
这是Linqpad脚本的片段。
```
//import-package FormFactory
//import-package FormFactory.RazorGenerator
void Main()
{
var properties = new[]{
new PropertyVm(typeof(string), "username"){
DisplayName = "Username",
NotOptional = true,
},
new PropertyVm(typeof(string), "password"){
DisplayName = "Password",
NotOptional = true,
GetCustomAttributes = () => new object[]{ new DataTypeAttribute(DataType.Password) }
}
};
var html = FormFactory.RazorEngine.PropertyRenderExtension.Render(properties, new FormFactory.RazorEngine.RazorTemplateHtmlHelper());
Util.RawHtml(html.ToEncodedString()).Dump(); //Renders html for a username and password field.
}
```
这是一个演示站点 ,其中包含您可以设置的各种功能的示例(例如嵌套集合,自动完成,日期选择器等)
如果你需要在表单中有一些动态字段,最好的方法是使用一些高级的javascript框架,如Angular , Backbone , Knockout等。
如果你需要或多或少的东西,你就可以使用Knockout了。 对于更高级的场景,我会推荐Angular,但这是我个人的偏好。
以下是使用Knockout的动态表单的简单实现:
var model = { users: ko.observableArray(), addUser: function() { this.users.push({ name: ko.observable() }); } }; ko.applyBindings(model);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div data-bind="foreach: users"> <input type="text" data-bind="value: name" /><br /> </div> <button data-bind="click: addUser">Add user</button> <ul data-bind="foreach: users"> <li data-bind="text: name"></li> </ul>
这更棘手。 也许最好也是最简单的方法是使用Ajax并将JSON发布到ASP.NET MVC Action。 首先,您需要从表单中获取JSON对象。 淘汰赛很简单:
var json = ko.toJSON(model);
现在,当我们知道如何从表单获取JSON时,下一步是将数据发送到Action。 jQuery非常适合:
$.ajax({
type: "POST",
url: "@Url.Action("AddUser")",
data: ko.toJSON(model).users, // Serialize to JSON and take users array
accept: 'application/json',
success: function (data) { alert("Done!"); } // Your success callback
});
在我们的例子中,我们基本上发送一个字符串数组,因此ASP.NET MVC操作应该如下所示:
[HttpPost]
public JsonResult AddUser(List<string> users)
{
return Json(data); // return something
}
这绝对不是如何实现动态表单的唯一选择,但我认为它非常有效。 希望能帮助到你。
您可以使用FormCollection作为参数来接收来自表单的所有数据:
[HttpPost]
public ActionResult ActionName(FormCollection collection)
{
//collection["inputName"];
}
我会为下拉列表和其他字段的每个选项创建部分视图。 比控制器,将根据下拉值返回html的这些部分:
public class FormFieldsController : Controller
{
public ActionResult Index(string dropDownOption)
{
if(dropDownOption == "Option1")
return PartialView("PartialForOption1");
etc.//
}
}
然后只需使用jquery Ajax调用它,并在下拉列表的值发生变化时附加当前表单以及操作结果。
$.ajax("/FormFields/Index",
{
async: false,
data: { dropDownOption: $('#dropDownId').value()},
success: function(data) {
if (callback == null) {
$("#form").append(data);
} else {
callback(data);
}
},
error: function() {
alert('Error');
},
type: 'GET',
timeout: 10000
}
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.