【发布时间】：2020-02-20 06:03:58
【问题描述】：
我有一个功能，当使用 jQuery 单击按钮时，我会附加一个选择 html。我已经有一个选择，它使用一个 asp-item 标记助手来用我的相应模型填充它。我正在使用的平台是 asp-net core 2.2，我正在为我的页面使用剃须刀页面。
我的问题是如何编辑我的 jQuery，以便当我单击按钮时，asp-item 已经加载到选择中？
这是我的 jQuery 代码：
$("#AddButton").click(function () {
tc = tc + 1;
$("#totalContacts").val(tc)
$(".addselection").append('<div> <select class="form-control" name="[' + (tc) + '].DriverID" asp-for="TripDrivers.DriverID" asp-items="Model.DriverList" > <option value = ""> Select a driver </option></select></div>')
});
这是我的 OnGet 加载项目
public IActionResult OnGet()
{
DriverList = _context.Drivers.Select(a =>
new SelectListItem
{
Value = a.ID.ToString(),
Text = a.FullName
}).ToList();
}
这是我的第一个问题，如果有任何语法错误或信息缺失，请多多包涵。如有需要，我会添加它们。
编辑：Here is the design I'm trying to do.
单击加号按钮后。它应该添加一行下拉列表，每个下拉列表中的选项都是从 OnGet 方法的列表中加载的。
另一个编辑：根据用户@itminus 的说明，我创建了一个示例页面和一个部分视图来应用下面给出的代码。
这是我的 FirstPage.cshtml 的样子
@page
@model MasigasigTrackingSystem.Pages.TestingPages.FirstPageModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>FirstPage</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script>
$("#AddButton").click(function () {
tc = tc + 1;
$("#totalContacts").val(tc)
$.ajax('?handler=DropdownList', {
method: "GET",
data: { tc: tc },
success: function (d) { $(".addselection").append(d); }
});
});
</script>
</head>
<body>
<button id="AddButton" class="btn" type="button">+</button>
@*<select asp-for="Mode" asp-items="Model.DropdownListViewModel.Drivers" class="form-control">
<option value="">Select a driver</option>
</select>*@
<div class="addselection">
<partial name="_SecondPage.cshtml" />
</div>
</body>
</html>
我的FirstPageModel
namespace MasigasigTrackingSystem.Pages.TestingPages
{
public class FirstPageModel : PageModel
{
private readonly MasigasigTrackingSystem.Data.ApplicationDBContext _context;
public FirstPageModel(MasigasigTrackingSystem.Data.ApplicationDBContext context)
{
_context = context;
}
[BindProperty]
public Drivers Drivers { get; set; }
public List<SelectListItem> DriverList { get; set; }
[BindProperty]
public DropdownListViewModel DropdownListViewModel { get; set; }
public void OnGet()
{
DriverList = _context.Drivers.Select(a =>
new SelectListItem
{
Value = a.ID.ToString(),
Text = a.FullName
}).ToList();
DropdownListViewModel = new DropdownListViewModel();
DropdownListViewModel.Drivers = DriverList;
}
public IActionResult OnGetDropdownListAsync(int tc)
{
var list = _context.Drivers.Select(a => new SelectListItem
{
Value = a.ID.ToString(),
Text = a.FullName,
}).ToList(); // or filter by Where( ... tc...).ToList()
return Partial("/Pages/TestingPages/_SecondPage.cshtml", new DropdownListViewModel
{
Drivers = list,
ID = tc,
});
}
}
}
我的部分_SecondPage
@using MasigasigTrackingSystem.Models
@model DropdownListViewModel
<div>
<select class="form-control dropdown" name="[@Model.ID].DriverID" asp-items="@Model.Drivers">
<option> Select a driver </option>
</select>
</div>
我的DropdownlistViewModel
namespace MasigasigTrackingSystem.Models
{
public class DropdownListViewModel
{
public int ID { get; set; }
public IList<SelectListItem> Drivers { get; set; }
}
}
【问题讨论】：
-
只是好奇：为什么不在浏览器中加载页面之前在服务器上渲染
<select>？ -
@itminus 有可能吗？我正在尝试做的有点像动态表单，我可以根据用户需要输入的项目数量添加或删除下拉列表。
-
您的原始代码将不起作用，因为
<select asp-for ... asp-items>只能在服务器端呈现。我不确定你想做什么。但我认为如果您想动态渲染select，可以使用ajax 并返回select部分视图。 -
嗨@itminus。我已经编辑了上面的问题，看看它是否有助于让您了解我想要完成的工作。如果你的答案还是和以前一样。我可以要求提供可以为我指明正确方向的 ajax 代码示例吗？
-
我创建了一个演示供您参考。如果您有任何问题，请随时更新我。
标签： javascript jquery asp.net asp.net-core razor