在下拉菜单中存储多个选项，以在MVC中选择一个值

Question

我正在使用MVC，并使用ViewData处理值。 我在控制器中有代码

 IList<SelectListItem> sizeList = new List<SelectListItem>();
 foreach (var item in sizeInfo)
  {
  SelectListItem listItem = new SelectListItem();
  listItem.Value = item._price.ToString();
  listItem.Text = item._sizeOption;
  sizeList.Add(listItem);
  }
  ViewData["SizeList"] = sizeList;
  productInstance.SizeCount = true;

但是如何与文本和值（即列表项的价格和大小选项）一起存储基于下拉菜单中用户选择的其他值。

我的下拉菜单将此ViewData提取为

 @Html.Raw(@Html.DropDownList("SizeList", ViewData["SizeList"] as SelectList, new { @id = "ddsize1" }))

如何根据用户对特定下拉列表的选择，添加除文本和值以外的其他属性？

Answer 1

控制器：

您可以再列出一个列表，其中包含价格和所需的属性。 将该列表放在视图的隐藏字段中。

IList<SelectListItem> CustomList = new List<SelectListItem>();
foreach (var item in sizeInfo)
{
 SelectListItem listItem = new SelectListItem();
 listItem.Value = item.yourattribue.ToString();
 listItem.Text = item._sizeOption;
 sizeList.Add(listItem);
}
ViewData["CustomList"] = CustomList;

鉴于：

       @using  (Html.BeginForm())
          {
         <div id="divPrice1"style="display:none">
        <table>
        <tr>
        <td class="divSizehPrice" style="text-align:right">@Html.Raw(@Model.dtcurrentCurrency.Rows[0]["HTMLENTITY"])</td>
        <td class="divSizehPrice" style="width:24%; text-align:left; color:Red;"><div id="PriceDiv1"></div></td>
        <td class="divSearchRRPPrice" style="text-align:right"><div id="divOffer">RRP&nbsp;@Html.Raw(@Model.dtcurrentCurrency.Rows[0]["HTMLENTITY"])</div></td>
        <td class="divSearchRRPPrice" style="width:70%; text-align:left"><div id="PriceDiv2"></div></td>
        </tr>
        </table>                    
    </div>
    <table style="width:100%">
    <tr>         
        @if (@Model.SizeCount == true)
        {
            <td><label>Size:&nbsp;</label></td>
            <td>
            <span style="display:none;">
            @Html.DropDownList("CustomList", ViewData["customList"] as SelectList, new { @id = "ddPrice" })
            </span>
            @Html.Raw(@Html.DropDownList("SizeList", ViewData["SizeList"] as SelectList, new { @id = "ddsize1" }))
            </td>
        }
        else
        {
            if (@Model.dtProduct.Rows[0]["Size"] != null)
            {
                if (@Model.dtProduct.Rows[0]["Size"].ToString().Length > 0)
                {
                    <td colspan=2><p><label>Size:</label>@Model.dtProduct.Rows[0]                    ["Size"]</p></td>
                }
            }
        }         
    </tr>                    
    </table>
    <br />
    <a href="@Url.Action("Currency", "Product")">Change currency</a>
    <br />
    @Html.Hidden("ProductId", @Model.dtProduct.Rows[0]["ProductId"])
    @Html.Hidden("ProductPriceId", @Model.dtProduct.Rows[0]["ProductPriceId"])
    @Html.Hidden("ProductPrice", @APrice)
    @Html.Hidden("tempPrice", null, new { @id = "tempPrice" })
    @Html.Hidden("ddlSize",null, new { @id="ddlSizeId" })

    <input type="submit" value="Add to Shopping Cart" data-theme="f" />
    }

javascript / jquery：

<script type="text/javascript">
$('#ddsize1').change(function () {
    var selectedValue = $('option:selected', $(this)).val();
    var selectedText = $('#ddsize1 option:selected').text();
    document.getElementById('ddlSizeId').value = selectedText;
    var offerPrice = @Model.offerPrice;
    if( offerPrice == 0)
    {
        var price = selectedValue * @Model.dtcurrentCurrency.Rows[0]["EXCHANGERATE"];
        $("#priceTable1").hide();
        document.getElementById('tempPrice').value=price.toFixed(2);
        document.getElementById('PriceDiv1').innerHTML = price.toFixed(2);
        $("#divPrice1").show();
        $("#divOffer").hide();
       // return false;
    }
    else{
        var el = document.getElementById("ddPrice");
        for(var i=0; i<el.options.length; i++) 
        {
            var txtPrice = el.options[i].text;
            var priceMatch = selectedValue * 1;
            var MatchPrice = priceMatch.toFixed(2);
          if ( txtPrice == MatchPrice ) {
            $("#priceTable1").hide();
            var txtOfferPrice = el.options[i].value * @Model.dtcurrentCurrency.Rows[0]["EXCHANGERATE"];
            var txtOriginalPrice = el.options[i].text * @Model.dtcurrentCurrency.Rows[0]["EXCHANGERATE"];
            document.getElementById('tempPrice').value = txtOfferPrice.toFixed(2);
            document.getElementById('PriceDiv1').innerHTML = txtOfferPrice.toFixed(2);
            document.getElementById('PriceDiv2').innerHTML = txtOriginalPrice.toFixed(2);
            $("#divPrice1").show();
          }
        }
    }
});
 </script>

在型号中：

public string tempPrice {get;set;}

现在，您可以在控制器中访问您的属性。 我希望它将帮助您解决所有问题。