提交表单后,在强类型下拉列表中保留选定的值

时间:2013-08-02 14:23:22

标签: c# asp.net-mvc html.dropdownlistfor

在视图中,我使用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 个答案:

答案 0 :(得分:1)

您必须确保将返回模型正确绑定到视图中。

我拿了你的例子并把它包含在一个简单的项目中,这是正常的: 控制器只有一个简单的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();
    }
}

它返回您在上面显示的对象。 视图与您的代码完全相同。

@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=" " />
}

引用模型类对象(

  

@model MvcApplication7.Controllers.CardsFiltersViewModel