如何从 Select2() 下拉列表中将 ItemName 推送到我的数据库 (SQL)

Question

我是 asp.net 剃须刀页面上的新人

这是我的Html

<div class="form-group row">
                <div class="col-4">
                    <select class="form-control" id="itemslist" name="itemName" asp-items="Model.Itemslist">
                        <option value="SSS"></option>
                    </select>
                    <input class="form-control" type="hidden" name="itemName"asp-for="Expiree.ItemName"  />
                    <br />
                    <br />
                    @if (ViewData["Message"] != null)
                    {
                        <script type="text/javascript">
                            window.onload = function ()
                            {
                          alert("@ViewData["Message"]");
                             };
                        </script>
                    }
                </div>

这是我的脚本部分

@section scripts
{
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#itemslist").select2();
        });
        $("body").on("change", "#itemslist", function () {
            $("input[name=itemName]").val($(this).find("option:selected").text());
        });
    </script>

}

这是我的页面模型

namespace SparkAuto.Pages.Expire
{
    public class CreateeModel : PageModel
    {
        private readonly ApplicationDbContext _db;
        public CreateeModel(ApplicationDbContext db)
        {
            _db = db;
        }
        public SelectList Itemslist { get; set; }
        [BindProperty]
        public Expiree Expiree { get; set; }
        public IActionResult OnGet()
        {
            this.Itemslist = new SelectList(_db.Items, "Id", "Name");


            return Page();
        }
        public async Task<IActionResult> OnPostAsync()
        {
           
            _db.Expiree.Add(Expiree);
            await _db.SaveChangesAsync();

            return RedirectToPage("Index");
        }
    }
}

最后这是我的错误，我在数据库的 itemName 中得到 Null

这是我使用的可搜索 select2 下拉列表的屏幕截图

我在此下拉列表中搜索了 3K 个项目，选择后需要推送项目名称

Answer 1

您可以使用select绑定Expiree的id，绑定ItemName隐藏输入：

过期：

public class Expiree {
        public int ItemId { get; set; }
        public string ItemName { get; set; }
    }

html:

<select class="form-control" id="itemslist" asp-for="Expiree.ItemId" asp-items="Model.Itemslist">
        <option value="SSS"></option>
    </select>
    <input class="form-control" type="hidden" asp-for="Expiree.ItemName" />

js:

@section scripts
{
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#itemslist").select2();
        });
        $("body").on("change", "#itemslist", function () {
            $("#Expiree_ItemName").val($(this).find("option:selected").text());
        });
    </script>

}

如何从 Select2() 下拉列表中将 ItemName 推送到我的数据库 (SQL)

How can I push ItemName to my database(SQL) from Select2() dropdown list

asp.net-core

jquery-select2