动态 HTML 表单

Question

我想要一个具有一些固定输入的 HTML 表单，以及一些基于下拉列表选择的动态输入。我的目标：

1. 我希望这完全在浏览器中处理，而不是通过 AJAX 调用来获取下拉选择的动态“子表单”部分。
2. 我想利用 ASP.NET MVC4 附带的库（jquery、knockout 等），而不是添加第 3 方 JS 库。但是，如果前一种尝试太笨拙，我愿意添加一个 3rd 方库。

你推荐什么路径？ HTML5 对此有什么“帮助”吗？

更新 在我看来，表单的 HttpPost 不应包含未在选择框中选择的“子表单”值。现在怎么办？将额外的 div 元素存储在文档外列表中并根据需要交换它们？ 或者更好，是否有附加到提交按钮的事件，在发布之前删除未使用/不可见的 div？

Answer 1

Pure javascript 完全可以做到这一点。如果你走这条路，jQuery 会让你的生活更轻松。

这是一个如何使用 jQuery 根据下拉值显示不同表单选项的示例：

<form>
    <div>Are you in school?
        <select id="in_school">
            <option selected="selected">Please choose</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>
    <div id="in_school_yes" class="in_school_input" style="display: none;">
        What grade are you in?
        <input type="text" name="grade" />
    </div>
    <div id="in_school_no" class="in_school_input" style="display: none;">
        What year did you graduate?
        <input type="text" name="graduation_year" />
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>

<script>
$("#in_school").change(function() {
    var in_school = $(this).val();
    $(".in_school_input").hide("fast", function() {
        $("#in_school_" + in_school).show("slow");
    });
});
</script>

小提琴：http://jsfiddle.net/RDtVZ/

Answer 2

当您想要创建需要动态更改客户端的复杂 UI 时，Knockout 可以真正发挥作用。下面是一个简单示例，说明如何按照您在 Knockout 中的要求进行操作。

HTML：

 <form>
     <select name="inputSelect" data-bind="options: dataSet, optionsText: 'Name', value: selectedItem,  optionsCaption: '-- Select --'"></select>

     <input type="text" name="firstName" data-bind="value: firstName, visible: selectedItem() && selectedItem().Name == 'First Name'" /> 
     <input type="text" name="lastName" data-bind="value: lastName, visible: selectedItem() && selectedItem().Name == 'Last Name'" /> 
     <input type="text" name="age" data-bind="value: age, visible: selectedItem() && selectedItem().Name == 'Age'" /> 
</form>

JS 模型：

function Model() {
   var self = this;
   self.firstName = ko.observable('Matthew');
   self.lastName = ko.observable('Cox');
   self.age = ko.observable(26);

   self.selectedItem = ko.observable();

   self.dataSet = ko.observableArray([{ Id: 0, Name:'First Name'}, { Id: 1, Name:'Last Name'}, { Id: 2, Name:'Age'}]);
}

var vm = new Model();
ko.applyBindings(vm);

JSFiddle： http://jsfiddle.net/JmpGD/1/

解释：

我在每个输入上放置了一个visible 绑定，检查selectedItem() 的Name 属性以确定应该显示哪个项目。

在 jsfiddle 中，我使用稍微不同的方法来处理 selectedItem() 为空，这将导致 visible 绑定在尝试评估 selectedItem().Name == 'something' 时爆炸。

您可以在此处了解其工作原理

http://knockoutjs.com/documentation/with-binding.html