2

いくつかの固定入力と、ドロップダウンに基づいて選択されるいくつかの動的入力を持つHTMLフォームが必要です。私の目標：

  1. ドロップダウンで選択された動的な「サブフォーム」部分をフェッチするためのAJAX呼び出しではなく、これがブラウザーで完全に処理されることをお勧めします。
  2. サードパーティのJSライブラリを追加するのではなく、ASP.NET MVC4に付属しているライブラリ（jquery、ノックアウトなど）を活用したいと思います。ただし、前者の試みが不器用な場合は、サードパーティのライブラリを追加したいと思います。

どのパスをお勧めしますか？HTML5にはこれに対する「ヘルプ」がありますか？

更新 フォームのHttpPostには、選択ボックスで選択されていない「サブフォーム」の値を含めるべきではないことに気づきました。今何？余分なdiv要素をドキュメント外のリストに保存し、必要に応じて交換しますか？ または、おそらくはるかに良いのは、投稿する前に未使用/非表示のdivを削除するイベントを送信ボタンに添付することです。

4

2 に答える 2

4

純粋な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/

于 2012-11-17T00:55:16.383 に答える
2

クライアント側を動的に変更する必要がある複雑なUIを作成したい場合、ノックアウトは非常に優れています。これは、ノックアウトで求めていることを実行する方法の簡単な例です。

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/

説明：

のNameプロパティをチェックする各入力にvisibleバインディングを設定して、selectedItem()表示するアイテムを決定します。

jsfiddleでは、わずかに異なるアプローチを使用しselectedItem()てnullを処理します。これにより、visibleを評価しようとしたときにバインディングが爆発しますselectedItem().Name == 'something'。

あなたはそれがどのように機能するかについてここで読むことができます

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

于 2012-11-17T05:28:41.750 に答える