检索已使用 JavaScript 重新排序的 select 元素选项列表

Question

我有一个 names/numbers 的字典，它从我的控制器传递到我的视图。这变成：

Model.arrayPositions[x]

然后将这些添加到 select 列表中：

                <form>
                    <div class="col-xs-12">
                        <select id="ListIn" class="select-width" name="SelectionIn" multiple="multiple" size="@Model.arrayPositions.Count">
                            @foreach (var item in Model.arrayPositions)
                            {
                                if (item.Value != null)
                                {
                                    <option class="active" value="@item.Value">@Html.DisplayFor(modelItem => @item.Key)</option>
                                }
                            }
                        </select>
                    </div>
                </form>

没有值的数组项被忽略，其余的被添加到列表中。

项目可以 added/removed 或移动 up/down 列表使用 JavaScript:

function AddSelected() {
    $('#ListOut option:selected').each(function (i, selected) {
        $('#ListIn').append('<option class="active" value="1">' + selected.innerText + '</option>');
        selected.remove();
    });
}
function RemoveSelected() {
    $('#ListIn option:selected').each(function (i, selected) {
        $('#ListOut').append('<option class="inactive" value="-1">' + selected.innerText + '</option>');
        selected.remove();
    });


function MoveUp() {
    var select1 = document.getElementById("ListIn");

    for (var i = 0; i < select1.length; i++) {
        if (select1.options[i].selected && i > 0 && !select1.options[i - 1].selected)
        {
            var text = select1.options[i].innerText;
            select1.options[i].innerText = select1.options[i - 1].innerText;
            select1.options[i - 1].innerText = text;
            select1.options[i - 1].selected = true;
            select1.options[i].selected = false;
        }
    }
}

（向下移动几乎与向上移动正好相反）

（#ListOut 只是第二个列表，其中添加了值为 null 的数组项）

（现在final的值不是太重要，所以不特意保留，列表的顺序更重要）

我正在使用 Javascript 更改顺序，以避免为这样一个简单的操作不断刷新页面。

但是，一旦我按下更新按钮，我就会调用我的控制器（ASP.NET C# 中的核心）。我想知道的是如何以新顺序检索列表的最终值。

即

如果 Model.arrayPositions = {a=1,b=2,c=null,d=3}，它会将它们添加到列表中：[a,b,d]

然后我使用 javascript 删除 'a' 并向上移动 'd'，导致 [d,b]

当我按下更新按钮时，我想从视图中检索 [d,b] 的当前列表。

实现此目标的最佳方法是什么？或者，或者，可以使用哪些其他方法来实现相同的目标（请注意，如果可能，我不希望页面刷新或部分刷新）。

Answer 1

您可以使用 ajax 方法在点击您的更新按钮时点击您的控制器

jquery ajax 的语法是：-

<script>

$.ajax({
        type:'POST',
        url : 'controllerNAME/ActionNAME',
        datatype: 'json',
        data : {'parameterOne': parameterone, 'parameterTwo' : parametertwo,...},
        success : function(response)
        {
             alert(response.d)
             //put your logic here for further advancements
        }
});

</script>

检索已使用 JavaScript 重新排序的 select 元素选项列表

Retrieve a select element options list that has been re-ordered with JavaScript

javascript

c#

model-view-controller

html-select

asp.net-core