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

Posted 2023-04-13

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

【英文标题】：How to submit from a razor view a list in a model with dynamic list? ASP.NET Core 3.1

【发布时间】：2021-01-12 11:45:42

【问题描述】：

首先，我有这些模型

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>

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

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

【问题讨论】：

是否要将下拉列表发布到操作？

【参考方案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();

结果：

【参考方案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>