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

下拉列表工作得很好，除了一个原因。当我发回表单时，下拉列表中选择的所有值都重置为“全部”，我想保持它们被选中。我该怎么做？

4

1 回答 1

1

You must make shure that you are correctly binding your return model into the view.

I took your example and included it into a simple project, that is working ok: The controller with a simple POST:

    public ActionResult Index()
    {
        ViewBag.Message = "Welcome to ASP.NET MVC!";
        var model = new CardsFiltersViewModel();

        return View(model);
    }

    [HttpPost]
    public ActionResult Index(CardsFiltersViewModel model)
    {
        ViewBag.Message = "Welcome to ASP.NET MVC!";

        return View(model);
    }

    public ActionResult About()
    {
        return View();
    }
}

It returns the object the you presented above. The View is the exact same as your code.

@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>
    <input type="submit" name="name" value=" " />
}

With the reference to the model class object (

@model MvcApplication7.Controllers.CardsFiltersViewModel

)

于 2013-08-02T14:39:07.713 回答