blocks|key|76719|text|试试这个http://mvcdynamicforms.codeplex.com/releases/view/43320吧，应该会有帮助的|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|76720|entityMap|0|LINK|mutability|MUTABLE|url|http://mvcdynamicforms.codeplex.com/releases/view/43320^0|4|1J|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>Try this <a href="http://mvcdynamicforms.codeplex.com/releases/view/43320" rel="nofollow">http://mvcdynamicforms.codeplex.com/releases/view/43320</a> 
it should be helpful</p>


blocks|key|293944|text|我将为下拉列表和其他字段的每个选项创建部分视图。而不是controller，它将根据dropdown值返回html的以下部分：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|293945|public+class+FormFieldsController+:+Controller
{
++++public+ActionResult+Index(string+dropDownOption)
++++{
++++++++if(dropDownOption+==+"Option1")
+++++++++++return+PartialView("PartialForOption1");
+++++++etc.//
++++}
}|code-block|syntax|javascript|293946|然后只需使用jquery+Ajax调用它，并在dropdown+changes的值之后将操作结果附加到当前表单。|offset|length|293947|$.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
++++}
);|293948|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jQuery.ajax/|1|http://api.jquery.com/change/^0|0|0|D|4|0|W|7|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]|$I|12|J|13|1|14]]|A|$]]|$1|K|3|L|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>I would create partial views for each option of the dropdown and additional fields.
Than controller, that will return such parts of html according to dropdown value:</p>

<pre><code>public class FormFieldsController : Controller
{
    public ActionResult Index(string dropDownOption)
    {
        if(dropDownOption == "Option1")
           return PartialView("PartialForOption1");
       etc.//
    }
}
</code></pre>

<p>Then just call it with jquery <a href="http://api.jquery.com/jQuery.ajax/" rel="nofollow">Ajax</a> and append your current form with result of action, when the value of dropdown <a href="http://api.jquery.com/change/" rel="nofollow">changes</a>.</p>

<pre><code>$.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
    }
);
</code></pre>


blocks|key|293986|text|如果您需要在表单中包含一些动态字段，对您来说最好的方法是使用一些高级javascript框架，如Angular、Backbone、Knockout等。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|293987|如果你需要一些或多或少简单的东西，使用Knockout就足够了。对于更高级的场景，我会推荐Angular，但这只是我个人的偏好。|293988|下面是一个使用Knockout的动态表单的简单实现：|293989|​|293990|var+model+=+{
++++users:+ko.observableArray(),
++++addUser:+function()+{
++++++++this.users.push({+name:+ko.observable()+});
++++}
};

ko.applyBindings(model);|code-block|syntax|javascript|293991|<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>|293992|293993|那么，ASP.NET+MVC呢？|293994|这就更棘手了。也许最好也是最简单的方法是使用Ajax并将JSON发布到ASP.NET+MVC+Action。首先，您需要从表单中获取一个JSON对象。对于knockout，它非常简单：|293995|var+json+=+ko.toJSON(model);|293996|现在，当我们知道如何从表单中获取JSON时，下一步是将数据发送到Action。jQuery非常适合做这件事：|293997|$.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
});|293998|在我们的例子中，我们基本上发送了一个字符串数组，因此ASP.NET+MVC+action应该看起来像这样：|293999|[HttpPost]
public+JsonResult+AddUser(List<string>+users)
{
++++return+Json(data);+//+return+something
}|294000|这绝对不是实现动态表单的唯一选择，但我认为它非常有效。希望能有所帮助。|294001|entityMap|0|LINK|mutability|MUTABLE|url|https://angularjs.org/|1|http://backbonejs.org/|2|http://knockoutjs.com/|3|https://jquery.com/^0|1C|7|0|1K|8|1|1T|8|2|0|0|0|0|0|0|0|0|0|0|13|6|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1L|8|@]|9|@$A|1M|B|1N|1|1O]|$A|1P|B|1Q|1|1R]|$A|1S|B|1T|1|1U]]|C|$]]|$1|D|3|E|5|6|7|1V|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1W|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|1X|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|1Y|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|L|7|1Z|8|@]|9|@]|C|$M|N]]|$1|Q|3|I|5|6|7|20|8|@]|9|@]|C|$]]|$1|R|3|S|5|6|7|21|8|@]|9|@]|C|$]]|$1|T|3|U|5|6|7|22|8|@]|9|@]|C|$]]|$1|V|3|W|5|L|7|23|8|@]|9|@]|C|$M|N]]|$1|X|3|Y|5|6|7|24|8|@]|9|@$A|25|B|26|1|27]]|C|$]]|$1|Z|3|10|5|L|7|28|8|@]|9|@]|C|$M|N]]|$1|11|3|12|5|6|7|29|8|@]|9|@]|C|$]]|$1|13|3|14|5|L|7|2A|8|@]|9|@]|C|$M|N]]|$1|15|3|16|5|6|7|2B|8|@]|9|@]|C|$]]|$1|17|3|-4|5|6|7|2C|8|@]|9|@]|C|$]]]|18|$19|$5|1A|1B|1C|C|$1D|1E]]|1F|$5|1A|1B|1C|C|$1D|1G]]|1H|$5|1A|1B|1C|C|$1D|1I]]|1J|$5|1A|1B|1C|C|$1D|1K]]]]

<p>If you need to have some dynamic fields in your form, the best way for you would be to use some advanced javascript frameworks like <a href="https://angularjs.org/" rel="nofollow">Angular</a>, <a href="http://backbonejs.org/" rel="nofollow">Backbone</a>, <a href="http://knockoutjs.com/" rel="nofollow">Knockout</a> etc.</p>

<p>If you need something more or less simple it is enough for you to use Knockout. For more advanced scenarios I would recommend Angular, but this is my personal preference.</p>

<p>Here is a simple implementation of a dynamic form with Knockout:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var model = {
    users: ko.observableArray(),
    addUser: function() {
        this.users.push({ name: ko.observable() });
    }
};

ko.applyBindings(model);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"&gt;&lt;/script&gt;
&lt;div data-bind="foreach: users"&gt;
    &lt;input type="text" data-bind="value: name" /&gt;&lt;br /&gt;
&lt;/div&gt;
&lt;button data-bind="click: addUser"&gt;Add user&lt;/button&gt;

&lt;ul data-bind="foreach: users"&gt;
    &lt;li data-bind="text: name"&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>

<h2>Now, what about ASP.NET MVC?</h2>

<p>This is more tricky. Perhaps the best and the easiest way would be to use Ajax and post JSON to ASP.NET MVC Action. First of all, you'll need to get a JSON object from your form. With knockout it's very simple:</p>

<pre><code>var json = ko.toJSON(model);
</code></pre>

<p>Now, when we know how to get JSON from form, next step is to send your data to an Action. <a href="https://jquery.com/" rel="nofollow">jQuery</a> is perfect for that:</p>

<pre><code>$.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
});
</code></pre>

<p>In our case we basically send an array of strings, thus ASP.NET MVC action should look like that:</p>

<pre><code>[HttpPost]
public JsonResult AddUser(List&lt;string&gt; users)
{
    return Json(data); // return something
}
</code></pre>

<p>This is definitely not the only one option of how to implement dynamic forms, but I think it's pretty effective. Hope it helps.</p>


blocks|key|76877|text|使用我的FormFactory库可以很容易地做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|76878|默认情况下，它会根据视图模型进行反射，以生成PropertyVm[]数组：|style|CODE|76879|```javascript|code-block|syntax|javascript|76880|var+vm+=新MyFormViewModel|76881|{|76882|OperatingSystem+=+"IOS",|76883|OperatingSystem_choices+=+new[]{"IOS",+"Android",};|76884|}；|76885|超文本标记语言(Html.PropertiesFor).Render；|76886|76887|但是您也可以通过编程方式创建属性，这样您就可以从数据库加载设置，然后创建PropertyVm。|76888|这是来自Linqpad脚本的代码片段。|76889|76890|//导入-打包FormFactory|76891|//导入-打包FormFactory.RazorGenerator|76892|void+Main()|76893|76894|var+properties+=+new[]{|76895|++++new+PropertyVm(typeof(string),+"username"){|76896|++++++++DisplayName+=+"Username",|76897|++++++++NotOptional+=+true,|76898|++++},|76899|++++new+PropertyVm(typeof(string),+"password"){|76900|++++++++DisplayName+=+"Password",|76901|++++++++NotOptional+=+true,|76902|++++++++GetCustomAttributes+=+()+=>+new+object[]{+new+DataTypeAttribute(DataType.Password)+}|76903|++++}|76904|};|76905|var+html+=+FormFactory.RazorEngine.PropertyRenderExtension.Render(properties,+new+FormFactory.RazorEngine.RazorTemplateHtmlHelper());+++|76906|Util.RawHtml(html.ToEncodedString()).Dump();+//Renders+html+for+a+username+and+password+field.|76907|}|76908|76909|有一个demo+site，里面有你可以设置的各种功能的例子(例如，嵌套集合，自动完成，日期选择器等)。|76910|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/mcintyre321/FormFactory|1|http://formfactory.apphb.com/^0|4|B|0|0|M|C|0|0|0|0|0|0|0|0|0|10|A|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|3|9|1|0^^$0|@$1|2|3|4|5|6|7|2G|8|@]|9|@$A|2H|B|2I|1|2J]]|C|$]]|$1|D|3|E|5|6|7|2K|8|@$A|2L|B|2M|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|2N|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|2O|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|2P|8|@]|9|@]|C|$]]|$1|Q|3|R|5|J|7|2Q|8|@]|9|@]|C|$K|L]]|$1|S|3|T|5|J|7|2R|8|@]|9|@]|C|$K|L]]|$1|U|3|V|5|6|7|2S|8|@]|9|@]|C|$]]|$1|W|3|X|5|6|7|2T|8|@]|9|@]|C|$]]|$1|Y|3|-4|5|J|7|2U|8|@]|9|@]|C|$K|L]]|$1|Z|3|10|5|6|7|2V|8|@$A|2W|B|2X|F|G]]|9|@]|C|$]]|$1|11|3|12|5|6|7|2Y|8|@]|9|@]|C|$]]|$1|13|3|I|5|J|7|2Z|8|@]|9|@]|C|$K|L]]|$1|14|3|15|5|6|7|30|8|@]|9|@]|C|$]]|$1|16|3|17|5|6|7|31|8|@]|9|@]|C|$]]|$1|18|3|19|5|6|7|32|8|@]|9|@]|C|$]]|$1|1A|3|P|5|6|7|33|8|@]|9|@]|C|$]]|$1|1B|3|1C|5|J|7|34|8|@]|9|@]|C|$K|L]]|$1|1D|3|1E|5|J|7|35|8|@]|9|@]|C|$K|L]]|$1|1F|3|1G|5|J|7|36|8|@]|9|@]|C|$K|L]]|$1|1H|3|1I|5|J|7|37|8|@]|9|@]|C|$K|L]]|$1|1J|3|1K|5|J|7|38|8|@]|9|@]|C|$K|L]]|$1|1L|3|1M|5|J|7|39|8|@]|9|@]|C|$K|L]]|$1|1N|3|1O|5|J|7|3A|8|@]|9|@]|C|$K|L]]|$1|1P|3|1Q|5|J|7|3B|8|@]|9|@]|C|$K|L]]|$1|1R|3|1S|5|J|7|3C|8|@]|9|@]|C|$K|L]]|$1|1T|3|1U|5|J|7|3D|8|@]|9|@]|C|$K|L]]|$1|1V|3|1W|5|J|7|3E|8|@]|9|@]|C|$K|L]]|$1|1X|3|1Y|5|J|7|3F|8|@]|9|@]|C|$K|L]]|$1|1Z|3|20|5|J|7|3G|8|@]|9|@]|C|$K|L]]|$1|21|3|22|5|6|7|3H|8|@]|9|@]|C|$]]|$1|23|3|-4|5|J|7|3I|8|@]|9|@]|C|$K|L]]|$1|24|3|25|5|6|7|3J|8|@]|9|@$A|3K|B|3L|1|3M]]|C|$]]|$1|26|3|-4|5|6|7|3N|8|@]|9|@]|C|$]]]|27|$28|$5|29|2A|2B|C|$2C|2D]]|2E|$5|29|2A|2B|C|$2C|2F]]]]

<p>You can do this very easily using my <a href="https://github.com/mcintyre321/FormFactory" rel="noreferrer">FormFactory</a> library.</p>

<p>By default it reflects against a view model to produce a <code>PropertyVm[]</code> array:</p>

<p>```</p>

<pre><code>var vm = new MyFormViewModel
{
    OperatingSystem = "IOS",
    OperatingSystem_choices = new[]{"IOS", "Android",};
};
Html.PropertiesFor(vm).Render(Html);
</code></pre>

<p>```</p>

<p>but you can also create the properties programatically, so you could load settings from a database then create <code>PropertyVm</code>. </p>

<p>This is a snippet from a Linqpad script. </p>

<p>```</p>

<pre><code>//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 = () =&gt; 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.
}
</code></pre>

<p>```</p>

<p>Theres a <a href="http://formfactory.apphb.com/" rel="noreferrer">demo site</a> with examples of the various features you can set up (e.g. nested collections, autocomplete, datepickers etc.)</p>


blocks|key|294037|text|您可以使用FormCollection作为参数来接收来自表单的所有数据：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|294038|[HttpPost]
public+ActionResult+ActionName(FormCollection+collection)
{
++++//collection["inputName"];
}|code-block|syntax|javascript|294039|entityMap|0|LINK|mutability|MUTABLE|url|https://msdn.microsoft.com/en-us/library/system.web.mvc.formcollection(v=vs.118).aspx^0|5|E|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>You can use <a href="https://msdn.microsoft.com/en-us/library/system.web.mvc.formcollection(v=vs.118).aspx" rel="noreferrer">FormCollection</a> as a parameter to receive all data that comes from the form:</p>

<pre><code>[HttpPost]
public ActionResult ActionName(FormCollection collection)
{
    //collection["inputName"];
}
</code></pre>


<p>Can anyone suggest a good way to develope dynamic forms with ASP.NET MVC?</p>

<p>I have cascading dropdowns on the page (options in the dropdown depends on the value, selected in the previous dropdown).</p>

<p>All the values come from the database. </p>

<p>How can I implement such behavior using ASP.NET MVC?</p>

<p>Of course I'd like to receive all the values in the controller when I submit my form.</p>


ASP.NET MVC Dynamic Forms

数据库

Android

JSON

有没有人能推荐一个用ASP.NET开发动态表单的好方法？我在页面上有级联下拉列表(下拉列表中的选项取决于在前面的下拉列表中选择的值)。所有的值都来自数据库。如何使用ASP.NET MVC实现这样的行为？当然，我希望在提交表单时收到控制器中的所有值。

问ASP.NET MVC动态表单
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ASP.NET MVC动态表单EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ASP.NET MVC动态表单
EN