0

ビューでは、次のようなモデルに強く型付けされた 3 つのドロップダウン リストを使用しています。

@using (Html.BeginForm())
{
    <p>Filter by rarity: @Html.DropDownListFor(_item => _item.mRarity, Model.mRarityList, new {@id = "cardRarity"})
        Filter by type: @Html.DropDownListFor(_item => _item.mType, Model.mTypeList, new {@id = "cardType"})
        Filter by color: @Html.DropDownListFor(_item => _item.mColor, Model.mColorList, new {@id = "cardColor"})
    </p>
}

物が表示されるビューは次のとおりです。

@model PagedList.IPagedList<MvcMagicAdmin.Utilities.CardDisplay>

@{
    ViewBag.Title = "Cards Display Results";
}

<h2>
    Cards Display Results
</h2>

<script type="text/javascript">
    $(document).ready(function () {

        $('#cardRarity').change(function () {
            var showCardRarity = $(this).val();
            alert(showCardRarity);
            var showCardType = $('#cardType').val();
            var showCardColor = $('#cardColor').val();
            refreshResults(showCardRarity, showCardType, showCardColor);
        });
        $('#cardType').change(function () {
            var showCardType = $(this).val();
            alert(showCardType);
            var showCardRarity = $('#cardRarity').val();
            var showCardColor = $('#cardColor').val();
            refreshResults(showCardRarity, showCardType, showCardColor);
        });
        $('#cardColor').change(function () {
            var showCardColor = $(this).val();
            alert(showCardColor);
            var showCardRarity = $('#cardRarity').val();
            var showCardType = $('#cardType').val();
            refreshResults(showCardRarity, showCardType, showCardColor);
        });

        function refreshResults(rarity, type, color) {
            $.get("@Url.Action("DisplayCardsResults", "Card")", {
                _page: 1,
                _sortOrder: "@ViewBag._sortOrder",
                _rarity: rarity,
                _type: type,
                _color: color,
            }, function(data) {
                $("#resultsDiv").html(data);
            });
        }
    });
</script>

<div>
    <div class="float-left">
        <p>@Html.ActionLink("Make a new search", "SearchCardsAdvanced")</p>
    </div>
    <div class="float-right">
        <p><span class="bold baseFontSize">Legend: </span>Details @Html.Image("~\\Images\\Functional\\Icons\\detailsIcon.jpg", "details", new { @class = "centerVert" } ) 
        Edit @Html.Image("~\\Images\\Functional\\Icons\\editIcon.png", "edit", new {@class = "centerVert"} )
        Delete @Html.Image("~\\Images\\Functional\\Icons\\trashIcon.png", "delete", new {@class = "centerVert"} )</p>
    </div>
    <div class="clear"></div>  
</div>

@{
    Html.RenderAction("FilterCardsResults", "PartialViews");
}

<div id="resultsDiv">
    @{
        Html.RenderPartial("ResultsTable", Model);
    }
</div>

そうです、モデルの元のリストに含まれていないモデルを渡すため、別のコントローラーから部分ビューを呼び出しています。

ビューは次のように生成されます。

private static readonly CardsFilters mCardsFilters = new CardsFilters();

public ActionResult FilterCardsResults()
{
    return PartialView("Filters/FilterCardsResults", mCardsFilters);
}

データが構築されるモデルは次のとおりです。

public class CardsFilters
{
    public string mRarity { get; set; }
    public IEnumerable<SelectListItem> mRarityList { get; set; }

    public string mType { get; set; }
    public IEnumerable<SelectListItem> mTypeList { get; set; }

    public string mColor { get; set; }
    public IEnumerable<SelectListItem> mColorList { get; set; }

    public CardsFilters()
    {
        List<SelectListItem> items = new List<SelectListItem>
            {
                new SelectListItem() {Value = "All", Text = "All"},
                new SelectListItem() {Value = "Land", Text = "Land"},
                new SelectListItem() {Value = "Common", Text = "Common"},
                new SelectListItem() {Value = "Uncommon", Text = "Uncommon"},
                new SelectListItem() {Value = "Rare", Text = "Rare"},
                new SelectListItem() {Value = "Mythic Rare", Text = "Mythic Rare"},
                new SelectListItem() {Value = "Special", Text = "Special"}
            };

        mRarityList = new SelectList(items, "Value", "Text");

        items = new List<SelectListItem>
            {
                new SelectListItem(){ Value = "All", Text = "All"},
                new SelectListItem(){ Value = "Artifact", Text = "Artifact"},
                new SelectListItem(){ Value = "Instant", Text = "Instant"},
                new SelectListItem(){ Value = "Creature", Text = "Creature"},
                new SelectListItem(){ Value = "Land", Text = "Land"},
                new SelectListItem(){ Value = "Planeswalker", Text = "Planeswalker"},
                new SelectListItem(){ Value = "Enchantment", Text = "Enchantment"},
                new SelectListItem(){ Value = "Sorcery", Text = "Sorcery"},
                new SelectListItem(){ Value = "Tribal", Text = "Tribal"},
            };

        mTypeList = new SelectList(items, "Value", "Text");

        items = new List<SelectListItem>
            {
                new SelectListItem(){ Value = "All", Text = "All"},
                new SelectListItem(){ Value = "White", Text = "White"},
                new SelectListItem(){ Value = "Red", Text = "Red"},
                new SelectListItem(){ Value = "Green", Text = "Green"},
                new SelectListItem(){ Value = "Blue", Text = "Blue"},
                new SelectListItem(){ Value = "Black", Text = "Black"},
                new SelectListItem(){ Value = "Gold", Text = "Gold"},
                new SelectListItem(){ Value = "Colorless", Text = "Colorless"},
            };

        mColorList = new SelectList(items, "Value", "Text");
    }
}

最後に、コントローラで呼び出される post メソッド:

public ActionResult DisplayCardsResults(int? _page, string _sortOrder, string _rarity = "", string _type = "", string _color = "")
{
    ViewBag._rarity = _rarity;
    ViewBag._color = _color;
    ViewBag._type = _type;

    if (Request.HttpMethod != "GET")
    {
        _page = 1;
    }

    if (mListCards.Count == 0)
    {
        TempData[MessageDomain.Tags.TEMPDATA_MESSAGE_ERROR] = NODATAFILTERERRORMESSAGE;
    }

    int pageNumber = (_page ?? 1);

    if (Request.IsAjaxRequest())
    {
        mListCardsToShow = GetListCardsToShow(_rarity, _color, _type);

        return PartialView("ResultsTable", mListCardsToShow.ToPagedList(pageNumber, ValueDomain.PAGE_SIZE));
    }

    if (mListCardsToShow.Count > 0)
    {
        mListCardsToShow = SortListOrder(_sortOrder, mListCardsToShow);
        return View(mListCardsToShow.ToPagedList(pageNumber, ValueDomain.PAGE_SIZE));
    }

    if (mListCards.Count > 0)
    {
        mListCards = SortListOrder(_sortOrder, mListCards);
    }

    return View(mListCards.ToPagedList(pageNumber, ValueDomain.PAGE_SIZE));
}

ドロップダウンリストは、1 つの理由を除いて、非常にうまく機能します。フォームをポストバックすると、ドロップダウンリストで選択されたすべての値が「すべて」にリセットされ、それらを選択したままにしたいと思います。どうすればこれを行うことができますか?

4

1 に答える 1