1

我正在使用 MVC 5 和 Entity Framework 6 创建一个 Web 应用程序，用户可以在其中提交报告并为其分配一个类别。一个报告可以有多个类别，一个类别可以有多个报告，因此是多对多关系。

public class Report
{
    public int ReportID { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }

    public virtual ICollection<Category> Categories { get; set; }
}

public class Category
{
    public int CategoryID { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }

    public virtual ICollection<Report> Reports { get; set; }
}

实体框架创建了桥表，但在构建视图以管理实体之间的关系方面不是很有帮助。

因此，对于编辑和创建视图，Report我已经实现了本教程中的功能，以创建两个包含指定类别和可用类别的 MultiSelectList 框。使用一些javascript和控制器中的自定义代码将类别从一个列表移动到另一个列表，我更新了数据库。

这工作正常，但我真正想要的是拖放应用程序，用户可以在其中将Category具有可用类别的侧边栏拖动Report到分配它。

我安装了 JQuery Draggable 和 Droppable 插件，但后来发现了 HTML5 拖放功能。我找到了许多不错的教程，并设法在页面上获得了一些基本的拖放功能，但没有一个教程涉及更新底层数据库。现在我真的很难找到一种将分配的类别传回控制器的好方法，就像我对列表框所做的那样。

这是我到目前为止所拥有的：

// sidebar with available categories
<aside>
    <label class="control-label">Available Categories</label>
    <br/>
    <ul class="AvailableCategories">
        @foreach (var cat in ViewBag.availCats)
        {
            <li value="@cat.CategoryID" class="category">@cat.CategoryTitle</li>
        }
    </ul>
</aside>

// form group with selected categories
<div class="form-group">
    @Html.LabelFor(model => model.Categories, "Categories", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <ul class="AssignedCategories" id="assignedCategories" style="width:500px;height:100px;border:1px solid black">
        </ul>
    </div>
</div>

// make the elements draggable/sortable
$(function () {
    $('.AvailableCategories').sortable({
        connectWith: '.AssignedCategories'
    });

    $('.AssignedCategories').sortable({
        connectWith: '.AvailableCategories'
    });
});

// old functionality with listboxes
<div class="form-group col-md-4">
    <label class="control-label">Categories Assigned</label>
    @Html.ListBox("selectedOptions", (MultiSelectList)ViewBag.selCats, new { @class = "form-control" })
</div>

// controller
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "ReportID,Name,Description,CategoryID")] Report report, string[] selectedOptions, string[] assignedCategories)
{
    // selectedOptions is populated from the old listboxes
    // assignedCategories is always null
}

这可以将一个列表从一个列表拖放Category到另一个列表，但是当Report保存它时，我无法在 ReportController ActionResult 中捕获分配的类别并更新数据库。我创建了一个参数string[] assignedCategories，希望它能够id="assignedCategories"像对列表框那样绑定，但这个参数始终是null.

Report.Categories使用 MVC 和实体框架使用 HTML5 拖放功能填充集合和更新数据库的最佳方法是什么？任何帮助或指向一个好的教程的链接将不胜感激。

更新： 我没有为assignedCategories 使用正确的表单输入字段，模型绑定器正在寻找名称，而不是ID。这就是assignedCategories 为空的原因。因此，我创建了一个隐藏的输入字段，name="assignedCategories"并且每次在分配的类别中删除类别时，我都会使用 javascript 更新值。现在我可以收集分配的 CategoryID 列表并在控制器中处理它。

尽管如此，必须有更好的方法来做到这一点。我可以使用哪种表单输入来删除分配的类别？

4

0 回答 0