HTML でオンライン登録フォームを作成しています。一部のフィールドは、値のコレクションに基づいて、knockout.js の foreach データ バインディングを使用して動的に追加されます。すべてのテキスト フィールドとコレクションを追加できるように、jquery 部分を完成させました。
フォームの動的部分は次のようになります。
<div class="form_section" ID="FamilyMembers" style="display:none;" >
<div class="wFamilyMember" data-bind="foreach: $root.familyMembers" >
<h2>Family Member <span data-bind="text: ($index() + 1)"></span> Information</h2>
<div class='form_section'>
<div class="eccform_column">
<div class="eccform_label">First Name*</div>
<div class="eccform_field"><input class="fmFirstName" title="First Name" type="text" data-bind="value:FirstName" /></div>
</div>
<div class="eccform_column">
<div class="eccform_label">Last Name *</div>
<div class="eccform_field"><input class="fmLastName" title="Last Name" data-bind="value:LastName"/></div>
</div>
</div>
<div class="form_section">
<div class="eccform_column">
<div class="eccform_label">Family Role*:</div>
<div class="eccform_dropdowns"><select class='fmFamilyRole' data-bind="options: $root.familyRoles, optionsText:'roleName', optionsValue:'value', value:FamilyRole"></select> </div>
</div>
<div class="eccform_column">
<div class="eccform_label">Age Group*:</div>
<div class="eccform_dropdowns"><select class='fmAgeGroup' data-bind="options:$root.ageGroups, optionsText:'groupName', optionsValue:'value', value:AgeGroup"></select></div>
</div>
<div class="eccform_checkbox_items">
<div class="eccform_checkbox"><input type="checkbox" class="fmLunchTicket" data-bind="checked: LunchTicket">Lunch Ticket ($5 for children, $10 for adults)</div>
<div class="eccform_checkbox"><input type="checkbox" class="fmSeminarTicket" data-bind="checked: SeminarTicket" >Seminar Ticket ($40)</div>
</div>
</div>
<div class="form_section">
<div class="eccform_column_button">
<button data-bind="click: $root.removeFamilyMember">Remove</button>
</div>
</div>
</div>
<button data-bind="click: $root.addFamilyMember">Add Family Member</button>
</div>
<div class="form_section" ID="Exhibitors" style="display:none;">
<div class='wExhibitor' data-bind="foreach: $root.exhibitors">
<h2>Exhibitor <span data-bind="text: $index() + 1"></span> Information</h2>
<div class="eccform_section">
<div class="eccform_column">
<div class="eccform_label">First Name*</div>
<div class="eccform_field"><input class="exFirstName" title="First Name" data-bind="value:FirstName" /></div>
</div>
<div class="eccform_column">
<div class="eccform_label">Last Name*:</div>
<div class="eccform_field"><input class="exLastName" title="Last Name" data-bind="value:LastName" /></div>
</div>
</div>
<div class="eccform_section">
<div class="eccform_column_exhibitor">
<div class="eccform_checkbox"><input type="checkbox" class="exLunchTicket" data-bind="checked: LunchTicket">Lunch Ticket ($10)</div>
</div>
<div class="eccform_column_exhibitor">
<div class="eccform_checkbox"><input type="checkbox" class="exSeminarTicket" data-bind="checked: SeminarTicket">Seminar Ticket ($40)</div>
</div>
<div class="eccform_column_removebutton">
<button data-bind="click: $root.removeExhibitor">Remove Exhibitor</button>
</div>
</div>
</div>
<button data-bind="click:$root.addExhibitor">Add Exhibitor</button>
</div>
問題は、C# で値を取得しようとすると、これらの動的に追加された値を読み取ることができないように見えることです。このコードを使用して値を読み取ります。
List<string> oFirstNames = ConvertFromEnumerable(Request.Form.AllKeys.Where(x => x.StartsWith("exFirstName")));
List<string> oLastNames = ConvertFromEnumerable(Request.Form.AllKeys.Where(x => x.StartsWith("exLastName")));
List<string> oLunchTickets = ConvertFromEnumerable(Request.Form.AllKeys.Where(x => x.StartsWith("exLunchTicket")));
List<string> oSeminarTickets = ConvertFromEnumerable(Request.Form.AllKeys.Where(x => x.StartsWith("exSeminarTicket")));
これは、以前は javascript を使用して新しい要素を動的に追加していたときに機能しましたが、現在は機能しません。常に null または空の文字列セットを返します。まったく間違った角度からアプローチしているように感じますが、正しい角度がわかりません。代わりにビューモデルからデータを取得する方法を見つける必要がありますか? 洞察はありますか?