行を動的に追加するボタンと、行を削除する方法を備えたテーブルのあるページがあります。各行には、カスケードする 2 つのドロップダウン リストがあります。行が作成されたら、AJAX 呼び出しを使用して最初のドロップダウンに値を入力します。このドロップダウンの変更イベントで、別の AJAX 呼び出しを実行して、2 番目のドロップダウンを設定します。これはすべて正常に機能しますが、私の問題は、最初に表示されるはずのデータを画面にロードすると、ドロップダウンに AJAX 呼び出しを入力できますが、値が選択されていないことです。モデル。この状況を通常処理する方法はありますか? 以下は、私のドキュメント準備完了関数のコードです
$(document).ready(function () {
$.getJSON('@Url.Action("GetAll", "Customers")', function (customers) {
var customerSelect = $('.Customers');
customerSelect.empty();
customerSelect.append('<option value="0">Choose Customer...</option>');
$.each(customers, function (index, customer) {
customerSelect.append($('<option/>', {
value: customer.ID,
text: customer.CustomerName
}));
});
});
});
この情報が役立つ場合は、テーブルをロードする HTML コードを次に示します。
<table id="Attendees" class="table-gridview">
<thead>
<tr>
<th style="width:320px">
Customer
</th>
<th style="width:250px">
Attendee
</th>
<th>
Attended
</th>
<th>
Paid
</th>
<th style="width:120px">
Check Number
</th>
<th>
</th>
</tr>
</thead>
<tbody>
@Html.EditorFor(x => x.Attendees)
</tbody>
</table>
次のコードは、出席者用のエディター テンプレートにあるものです。
<tr class="ClassAttendee">
<td>
@Html.HiddenFor(model => model.ID)
@Html.HiddenFor(model => model.ClassID)
@Html.DropDownList("Customers", Enumerable.Empty<SelectListItem>(), new { @Class = "Customers", style="width:300px" })
</td>
<td>
@Html.DropDownListFor(
x => x.CustomerEmailID,
Enumerable.Empty<SelectListItem>(),
"Choose Attendee...",
new { @Class = "Contact", style = "width:220px" }
)
@Html.ValidationMessageFor(model => model.CustomerEmailID)
</td>
<td>
@Html.CheckBoxFor(model => model.Attended)
@Html.ValidationMessageFor(model => model.Attended)
</td>
<td>
@Html.CheckBoxFor(model => model.FeePaid, new { @Class = "FeePaid"})
@Html.ValidationMessageFor(model => model.FeePaid)
</td>
<td>
@if (Model.FeePaid != true)
{
@Html.TextBoxFor(model => model.CheckNumber, new { @Class = "CheckNumber", disabled ="true", style = "width:100px" })
}
else
{
@Html.TextBoxFor(model => model.CheckNumber, new { @Class = "CheckNumber", style = "width:100px" })
}
@Html.ValidationMessageFor(model => model.CheckNumber)
</td>
<td>
@Html.HiddenFor(x => x.Delete, new { @class = "mark-for-delete" })
@Html.LinkToRemoveNestedFormUpdateCounter("Remove", "tr.ClassAttendee", "input.mark-for-delete")
</td>
</tr>
最後に紹介するのは、AJAX 呼び出しのサーバー側コードです。
public JsonResult GetAll()
{
var customers = customerRepository
.All
.Select(p => new
{
p.ID ,
p.CustomerName
})
.OrderBy(o => o.CustomerName);
return Json(customers, JsonRequestBehavior.AllowGet);
}