在MVC中为选定值的下拉列表中存储多个选项

时间:2014-01-30 08:39:59

标签: c# asp.net-mvc-4 drop-down-menu

使用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" }))

如何根据特定选定下拉列表的用户选择添加除文本和值之外的其他一个属性。?

1 个答案:

答案 0 :(得分:0)

控制器:

你可以再拿一个清单,它包含你想要的价格和属性。 将该列表放在视图中的隐藏字段中。

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

现在您可以在控制器中访问您的属性。我希望它能帮到你的问题。