[英]ASP.NET Core 2.1 Populating dropdownlist created by jquery
我有這個按鈕,當單擊該按鈕時,將創建一個包含多個下拉列表的新div行。 如何從加載到我的視圖的viewmodel中填充這些下拉菜單?
@model App.Data.ViewModels.FilterDocumentsViewModel
<button type="button" class="btn btn-outline-secondary" data-toggle="collapse" data-target="#datatable-search-input-container-rowtwo" aria-expanded="false" aria-controls="datatable-search-input-container-rowtwo">
<i class="fa fa-plus"></i>
</button>
$("#datatable-search-input-container-rowone-coltwo").on("click", "#add-row", function (e) {
var htmlElements = "<div class='col-sm-10 row'>";
htmlElements = htmlElements + "<div class='col-sm-3 search-spacing'>";
htmlElements = htmlElements + "<label>Document Categories</label>";
htmlElements = htmlElements + "<select class='form-control' name='CategoryId[]' asp-items='@Model.Categories'>Select Category</select>"
htmlElements = htmlElements + "<label>Document Fields</label>";
htmlElements = htmlElements + "<select class='form-control' name='FieldId[]' asp-items='@Model.DocumentFields'>Select Document Fields</select>"
htmlElements = htmlElements + "</div>";
htmlElements = htmlElements + "</div>";
$(htmlElements).appendTo("#datatable-search-input-container-rowone-colone-sub");
return false;
});
我上面的內容只創建了一個空的下拉列表。 另外,是否可以對文檔類別進行onchange,以重新填充文檔字段?
編輯:基於@TetsuyaYamamotos的答案,這就是我所做的
PartialView:
@model App.Data.ViewModels.FilterDocumentsViewModel
<div class="col-sm-12 row">
<div class="col-sm-3 search-spacing">
<label>Document Categories</label>
@Html.DropDownListFor(m => m.CategoryId, (SelectList)Model.Categories, "Select Category", new { @class = "form-control Categories" })
</div>
<div class="col-sm-3 search-spacing">
<label>Document Fields</label>
@Html.DropDownListFor(m => m.FieldId, (SelectList)Model.DocumentFields, "Select Field", new { @class = "form-control Fields" })
</div>
<div class="col-sm-3 search-spacing">
<label for="Data">Data</label>
<input type="text" id="Data" placeholder="Search" />
</div>
</div>
jQuery的:
function refreshDropdown(Input) {
$.ajax({
url: "@Url.Action("GetFields", @ViewContext.RouteData.Values["controller"].ToString())",
method: "POST",
data: JSON.stringify(Input),
contentType: "application/json",
success: function (result) {
$(".Fields").empty();
$(".Fields").append("<option value>Select Field</option>");
$.each(result.fields, function (key, value) {
$(".Fields").append("<option value="+value.Id+">"+value.Name+"</option>");
});
},
error: function (error) {
console.log(error);
}
});
}
$("#datatable-search-input-container").on("change", ".Categories", function (e) {
console.log("changed");
selected = $(".Categories").find(":selected").val();
var form_data = selected;
refreshDropdown(form_data);
return false;
});
添加行:
$("#datatable-search-input-container-rowone-coltwo").on("click", "#add-row", function (e) {
$.ajax({
url: "@Url.Action("AddSearchFilterRow", @ViewContext.RouteData.Values["controller"].ToString())",
method: "GET",
contentType: "application/json",
success: function (result) {
$(result).appendTo("#datatable-search-input-container-rowone-colone-sub");
},
error: function (error) {
console.log(error);
}
});
return false;
});
剩下的唯一問題是,唯一起作用的onchange是主要變量,而不是更改時添加的jquery
您可以將數據從viewmodel獲取到javascript對象中,然后使用jquery遍歷該數據
var modelCategories = @Html.Raw(Json.Encode(Model.Categories));
var modelDocumentFields =@Html.Raw(Json.Encode(Model.DocumentFields));
$("#datatable-search-input-container-rowone-coltwo").on("click", "#add-row", function (e) {
var htmlElements = "<div class='col-sm-10 row'>";
htmlElements = htmlElements + "<div class='col-sm-3 search-spacing'>";
htmlElements = htmlElements + "<label>Document Categories</label>";
htmlElements = htmlElements + "<select class='form-control' name='CategoryId[]'>;
htmlElements += "<option>Select Category</option>";
$.each(modelCategories, function(i,v){
htmlElements += `<option value="${v.CategoryId}">${v.CategoryName}</option>`
});
htmlElements = htmlElements + "</select>";
htmlElements = htmlElements + "<label>Document Fields</label>";
htmlElements = htmlElements + "<select class='form-control' name='FieldId[]'>;
htmlElements += "<option>Select Document Fields</option>";
$.each(modelCategories, function(i,v){
htmlElements += `<option value="${v.FieldId}">${v.FieldNameName}</option>`
});
htmlElements = htmlElements + "</select>";
htmlElements = htmlElements + "</div>";
htmlElements = htmlElements + "</div>";
$(htmlElements).appendTo("#datatable-search-input-container-rowone-colone-sub");
return false;
});
ASP.NET Core MVC標記幫助程序的行為類似於@Html.DropDownListFor()
幫助程序,它們@Html.DropDownListFor()
現在服務器端,應將其視為asp-for
服務器端屬性。 您需要使用包含要追加的元素的局部視圖,並伴隨一個控制器操作方法來返回它,如下例所示:
SelectPartialView.cshtml
@model App.Data.ViewModels.FilterDocumentsViewModel
<div class='col-sm-10 row'>
<div class='col-sm-3 search-spacing'>
<label>Document Categories</label>
<select class='form-control category' asp-for='CategoryId' asp-items='@Model.Categories'>Select Category</select>
<label>Document Fields</label>
<select class='form-control field' asp-for='FieldId' asp-items='@Model.DocumentFields'>Select Document Fields</select>
</div>
</div>
控制器動作
public IActionResult GetSelectList()
{
// do something
return PartialView("SelectPartialView");
}
然后使用AJAX回調將部分視圖元素附加到目標元素中:
$("#datatable-search-input-container-rowone-coltwo").on("click", "#add-row", function (e) {
$.get('@Url.Action("GetSelectList", "ControllerName")', function (result) {
$("#datatable-search-input-container-rowone-colone-sub").append(result);
});
});
關於級聯的<select>
標記幫助器,您需要在兩個下拉列表中定義class
選擇器,並使用AJAX填充選項列表:
$('.category').on('change', function() {
$.ajax({
type: 'GET',
url: '@Url.Action("GetFields", "ControllerName")',
data: { CategoryId: $(this).val() },
success: function (result) {
$('.field').empty();
$.each(result, function (i, item) {
// replace 'item.Value' and 'item.Text' from corresponding list properties into model class
$('.field').append('<option value="' + item.Value + '"> ' + item.Text + ' </option>');
});
},
error: function (xhr, status, err) {
// error handling
}
});
});
控制器動作
public IActionResult GetFields(int CategoryId)
{
// populate SelectListItem here
return new JsonResult(list);
}
級聯<select>
元素的另一個示例可以在這里找到:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.