如何在我传递给视图的ViewModel集合中获得jQuery可选对象的值，以作为有序列表进行迭代

How can I get the value of a jQuery selectable object in a ViewModel collection I passed to my view to be iterated through as an ordered list?

本文关键字：对象 迭代 列表 jQuery 视图 集合 ViewModel      更新时间：2023-09-26

卷积问题，我知道。为了我自己的学习目的，我正在开发一个小型MVC应用程序，经过这么多的搜索，我还是停留在了这一点上。我的观点是这样的（注意ItemList是一个列表）：

@model PackItOut.ViewModels.IndexViewModel
<ol id="item-list-20">
                @foreach (var i in Model.ItemList)
                {
                    <li class="ui-widget-content">
                        @switch (i.Category)
                        {
                            case "Food":
                                <i class="fa fa-cutlery" aria-hidden="true"></i>
                                break;
                            case "Shelter":
                                <i class="fa fa-tree" aria-hidden="true"></i>
                                break;
                            case "First Aid":
                                <i class="fa fa-medkit" aria-hidden="true"></i>
                                break;
                            case "Clothing":
                                <i class="fa fa-child" aria-hidden="true"></i>
                                break;
                            case "Fluid":
                                <i class="fa fa-tint" aria-hidden="true"></i>
                                break;
                            case "Weather":
                                <i class="fa fa-bolt" aria-hidden="true"></i>
                                break;
                            default:
                                break;
                        }
                        @i.Name
                    </li>
                }
            </ol>
<button class="btn btn-danger change-item" id="remove-item-btn"><i class="fa fa-trash" aria-hidden="true"></i> Remove Item</button>

Javascript就是这样的：

$(document).ready(function() {
var theItemList = $("ol[id*='item-list-']");
$(theItemList).selectable({
    selected: function(event, ui) {
        $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected");
    },
    stop: function () {
        var hasSelection = $(".ui-selected");
        if (hasSelection != null)
            $(".change-item").css('visibility', 'visible');
        else
            $(".change-item").css('visibility', 'hidden');
    }
});
$("#remove-item-btn").on("click", function (event) {
    var targetItem = document.getElementsByClassName("ui-selected");
    if (targetItem == null)
        alert('Please select an item to remove.');
});
});

理想情况下，在.on（"单击"）中，我希望传入目标项所表示的对象，这样我就可以从ViewModel集合中删除该项，但我在获取实际对象而不仅仅是HTML时遇到了问题。欢迎您不仅对这个问题，而且对您在这个片段中看到的任何其他问题提出任何建议。提前谢谢。

我要看看我的水晶球并预测未来。一旦你完成了删除功能，你就会希望能够添加到列表中，对吧？好消息是，有一个名为BeginCollectionItem的NuGet包和Steve Sanderson的相关博客文章专门针对这个场景——在MVC中从列表中添加和删除项目。

我不会写一个完整的解决方案，因为已经完成了，但我最近自己使用这个包实现了这一点。SO上有几个涉及这个包的答案，应该有助于你开始。这个特别好。

然而，在回答您的特定问题时，您可以执行链接答案中提到的操作，只需删除与列表项相关的div：

HTML/Razor:

@model PackItOut.ViewModels.IndexViewModel
<div id="editorRows">
    <ol id="item-list-20">
        @foreach (var i in Model.ItemList)
        {
            <div class="editorRow">
                <li class="ui-widget-content">
                    @switch (i.Category)
                    {
                        case "Food":
                            <i class="fa fa-cutlery" aria-hidden="true"></i>
                            break;
                        case "Shelter":
                            <i class="fa fa-tree" aria-hidden="true"></i>
                            break;
                        case "First Aid":
                            <i class="fa fa-medkit" aria-hidden="true"></i>
                            break;
                        case "Clothing":
                            <i class="fa fa-child" aria-hidden="true"></i>
                            break;
                        case "Fluid":
                            <i class="fa fa-tint" aria-hidden="true"></i>
                            break;
                        case "Weather":
                            <i class="fa fa-bolt" aria-hidden="true"></i>
                            break;
                        default:
                            break;
                    }
                    @i.Name
                </li>
                <button class="btn btn-danger deleteRow"><i class="fa fa-trash" aria-hidden="true"></i> Remove Item</button>
            </div>
        }
    </ol>
</div>

JavaScript:

$('#editorRows').on('click', '.deleteRow', function () {
    $(this).closest('.editorRow').remove();
});

尽管您将不得不使用HTML元素，因为您不能在<ol>中嵌套<div>。

相关文章：