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; }
}

Entity Framework はブリッジ テーブルを作成しますが、エンティティ間の関係を管理するためのビューの足場としてはあまり役に立ちません。

そのため、の編集ビューと作成ビューでは、このチュートリアルReportの機能を実装して、割り当てられたカテゴリと使用可能なカテゴリを含む 2 つの MultiSelectList ボックスを作成しました。カテゴリは、あるリストから別のリストに移動され、いくつかの JavaScript と、コントローラーのカスタム コードを使用して、データベースを更新します。

これは正常に動作していますが、私が本当に必要としているのはドラッグ アンド ドロップ アプリケーションです。ユーザーは、Category利用可能なカテゴリを含むサイドバーからをドラッグしReportて、それを割り当てることができます。

JQuery Draggable and 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.CategoriesMVC と Entity Framework を使用して、コレクションにデータを入力し、HTML5 のドラッグ アンド ドロップ機能でデータベースを更新する最良の方法は何ですか? ヘルプや優れたチュートリアルへのリンクをいただければ幸いです。

更新: assignedCategories に適切なフォーム入力フィールドを使用していませんでした。モデル バインダーは ID ではなく名前を探しています。そのため、assignedCategories は null でした。そのため、非表示の入力フィールドを作成name="assignedCategories"し、割り当てられたカテゴリにカテゴリがドロップされるたびに JavaScript で値を更新します。これで、割り当てられた CategoryID のリストを収集し、コントローラーで処理できるようになりました。

それでも、これを行うためのより良い方法があるはずです。割り当てられたカテゴリをドロップするには、どのようなフォーム入力を使用できますか?

4

0 に答える 0