Question

我具有一项功能，当使用jQuery单击按钮时，我可以附加选择html。我已经有一个选择，该选择使用asp-item标签帮助器用我的对应模型填充它。我使用的平台是asp-net core 2.2，我的页面使用的是剃刀页面。

我的问题是如何编辑jQuery，以便当我单击按钮时，asp项已加载到select中？

这是我的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.

单击加号按钮。它应该添加一行dropdownlist，每行都包含从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; }
    }
}

Answer 1

这是一个演示，可以从服务器动态获取部分视图。

在您的PageModel中创建处理程序OnGetDropdownListAsync(int tc)：

public class YourPageModel : PageModel
{
    ... other handler methods, e.g. OnGet() render the Index

    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/Shared/Selection.cshtml" , new DropdownListViewModel{
            Drivers = list,
            Index = tc,
        });
    }
}

DropdownListViewModel是保存数据的普通ViewModel：

public class DropdownListViewModel{
    public IList<SelectListItem> Drivers{get;set;}
    public int Index {get;set;}
}

将jQuery中的原始html代码段移动到新的局部视图文件中：/Pages/Shared/Selection.cshtml

@using App.Pages
@model DropdownListViewModel

<div> 
    <select class="form-control dropdown" name="[@Model.Index].DriverID" asp-items="@Model.Drivers">
        <option> Select a driver </option>
    </select>
</div>

最后，更改您的JavaScript以发送ajax请求并以以下方式更新UI：

$("#AddButton").click(function () {
    tc = tc + 1;
    $("#totalContacts").val(tc)
    $.ajax('?handler=DropdownList',{
        method:"GET",
        data:{ tc: tc },
        success:function(d){ $(".addselection").append(d); }
    });
});

[编辑]

您正在隐式将正确的ViewData传递给<partial>，这会导致这种类型的错误。您需要将其更改为：
```
<partial name="/Pages/TestingPages/_SecondPage.cshtml" model="@Model.DropdownListViewModel" />
```
您所指的是没有jQuery的细长ajax。请将script更改为<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>。
您正在为#AddButton绑定一个事件，然后创建该元素。您需要将js包装到$(document).ready(function(){ .... }中。您还可以在script元素之后手动创建#AddButton。或者，如果您使用默认的<script>，则将@section Scripts{}放入Layout中，这将使脚本在页面加载后生效。
您还没有初始化tc变量。

简而言之，您需要修复以下错误：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function(){
        var tc = 0;
        $("#AddButton").click(function () {
            tc = tc + 1;
            $("#totalContacts").val(tc)
            $.ajax('?handler=DropdownList', {
                method: "GET",
                data: { tc: tc },
                success: function (d) { $(".addselection").append(d); }
            });
        });
    });
</script>

...

<div class="addselection">
    <partial name="/Pages/TestingPages/_SecondPage.cshtml" model="@Model.DropdownListViewModel" />
</div

如何附加带有asp-item标签帮助程序的选择

1 个答案: