如何从剃刀视图提交具有动态列表的模型中的列表？ ASP.NET 核心 3.1

Question

首先，我有这些模型

public class Event
{
    //other properties
    public IEnumerable<EventsParticipants> ParticipantsList { get; set; }
}

public class EventsParticipants
{
    public string ParticipantId { get; set; }
    public int EventId{ get; set; }
}

ParticipantId 存储一个身份用户 ID，以便我可以关联这两个表。

我制作了这个动态列表，以便可以将用户添加到“UpdateEvent”Razor 视图中的事件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a onclick="addToList(this)">(click me)User to add into list(click me)</a>
<br/>
<select multiple id="participantsList"
style="height: 7em; overflow-y: scroll; width: 10em"></select>
<br/>
<button type="button" onclick="removeFromList()">Remove</button>
<button type="button" onclick="clearList()">Clear list</button>

    <script>
    function addToList(usuario) {
        var lista = document.getElementById("participantsList");
        var item = document.createElement("option");
        item.text = $(usuario).text()
        lista.appendChild(item);
    }
    
    function removeFromList() {
        $("#participantsList option:selected").remove();
    }

    function clearList() {
        $("#participantsList").empty();
    }
    </script>

这个列表连同关于Event 的其他属性应该被发布到数据库中。

但是在用户完成向其中添加项目后，我很难找到一种方法来获取该数据。

---

更新：

好的，在离开该项目很长时间后，我再次投入其中。 不过，我很感谢你的帮助。没有它，我将无法获得此解决方案。

我没有更改 EventsParticipants 的集合类型，但我确实修改了我的模型以提供更好的功能。

现在是这样的：

public class Participant
{
    public string Username { get; set; }
    public string Name { get; set; }
    public int EventId { get; set; }
}

现在，谈谈我的看法。我决定转储标签助手并使用 HTML 名称属性 - 这样我就可以提交具有数组语法的表单。由于它不适用于<option> 标签，所以我在提交之前制作了一些 JavaScript 来创建隐藏的 <input> 标签。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a onclick="addToList(this)">User (click to add)</a>
<br/>
<select multiple id="participants-list"
style="height: 7em; overflow-y: scroll; width: 10em"></select>
<div hidden id="submission"></div>
<br/>
<input type="submit" onclick="submitList()" value="Submit"/>
<button type="button" onclick="removeFromList()">Remove</button>
<button type="button" onclick="clearList()">Clear list</button>

    <script>
    function submitList() {
        let selectedList = $('#participants-list').children();
        for (i = 0; i < selectedList.length; i++) {
            let submissionInput = document.createElement('input');
            submissionInput.setAttribute('name', 'ParticipantsList[' + i + '].username');
            submissionInput.setAttribute('type', 'hidden');
            submissionInput.value = $(selectedList[i]).val();
            $('#submission').append(submissionInput);
        }
    }
    
    function addToList(user) {
        var list = document.getElementById("participants-list");
        var item = document.createElement("option");
        item.text = $(user).text();
        item.value = $(user).attr('id');
        list.append(item);
    }
    
    function removeFromList() {
        $("#participants-list option:selected").remove();
    }

    function clearList() {
        $("#participants-list").empty();
    }
    </script>

在控制器中，我验证用户名并填写名称属性。

我不知道这是否是设计这个的好方法，但我确实喜欢这个结果。不过，我感谢您分享的任何反馈:)。

Answer 1

如果要获取数据，有几点需要注意：

1.为选择列表设置名称（participantsList）：

<select multiple id="participantsList" name="participantsList" style="height: 7em; overflow-y: scroll; width: 10em"></select>

2.提交表单时，只会提交选中的option的值，所以需要给option设置value和selected属性。

function addToList(usuario) {
    var lista = document.getElementById("participantsList");
    var item = document.createElement("option");
    item.text = $(usuario).text();
    item.value = $(usuario).text();
    item.selected = true;
    lista.appendChild(item);
}

3.正如@Mohamed Adel 所说，使用list<string> 接受列表。

下面是一个测试：

型号：

public class Event
{
    public int Id { get; set; }
    public string Name { get; set; }
    public IEnumerable<string> ParticipantsList { get; set; }
}

查看：

@model Event

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<form asp-action="UpdateEvent" method="post">
    <div>
        <input asp-for="Id" />
    </div>
    <div>
        <input asp-for="Name" />
    </div>
    <div>
        <a onclick="addToList(this)">(click me)User to add into list(click me)</a>
        <br />
        <select multiple id="participantsList" name="participantsList"
                style="height: 7em; overflow-y: scroll; width: 10em"></select>
        <br />
        <button type="button" onclick="removeFromList()">Remove</button>
        <button type="button" onclick="clearList()">Clear list</button>
    </div>

    <div>
        <input type="submit" value="sumit" />
    </div>
</form>

@section scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>
        function addToList(usuario) {
            var lista = document.getElementById("participantsList");
            var item = document.createElement("option");
            item.text = $(usuario).text();
            item.value = $(usuario).text();
            item.selected = true;
            lista.appendChild(item);
        }

        function removeFromList() {
            $("#participantsList option:selected").remove();
        }

        function clearList() {
            $("#participantsList").empty();
        }
    </script>
}

控制器：

[HttpPost]
public IActionResult UpdateEvent(Event myevent)
{
    return View();
}

结果：

Answer 2

你可以这样做

 public class EventsDto
 {
   //other properties
   public List<string> ParticipantsIds { get; set; }
 }

然后在视图中提交后，您可以获取 ParticipantsIds 列表，您可以在它们上循环然后启动 EventsParticipants 的新对象，最后将它们添加到数据库中

@model EventsDto
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>

<a onclick="addToList(this)">(click me)User to add into list(click me)</a>
<br/>
<select asp-for="ParticipantsIds" multiple id="participantsList"
style="height: 7em; overflow-y: scroll; width: 10em"></select>
<br/>
<button type="button" onclick="removeFromList()">Remove</button>
<button type="button" onclick="clearList()">Clear list</button>


<script>
function addToList(usuario) {
    var lista = document.getElementById("participantsList");
    var item = document.createElement("option");
    item.text = $(usuario).text()
    lista.appendChild(item);
}

function removeFromList() {
    $("#participantsList option:selected").remove();
}

function clearList() {
    $("#participantsList").empty();
}
</script>