从视图传递下拉值到Mvc控制器

时间:2015-11-27 07:24:11

标签: jquery asp.net-mvc asp.net-mvc-4

我正在尝试将选定的下拉值从我的视图传递给控制器​​。我使用过Mvc Music Store的购物车功能。

问题:首先我能够在参数和商店中传递“大小”,但是当我添加了SetColor()时,它不起作用。

我是初学者,还有其他办法吗?

控制器

public ActionResult AddToCart(int id , string Size, string Color)
    {
        var addedAlbum = storeDB.Products.Single(prod => prod.ProductId == id);
        string size = Size;
        string color = Color;
        var cart = ShoppingCart.GetCart(this.HttpContext);
        cart.AddToCart(addedAlbum, size, color);
        return RedirectToAction("Index");
    }

查看

<span class="row">

   <script src="https://code.jquery.com/jquery-1.7.1.js"></script>
   <script type="text/javascript">
      var ProductId = @Model.ProductId;
      var productSize = null;
      var productColor = null;
      function SetSize() {
        productSize = $("#Size").val();
      }

      function SetColor() {
        productColor = $("#Color").val();
      }

      function AddToCart(){
        window.location  = "/ShoppingCart/AddToCart?id=" + ProductId + "&Size=" + productSize + "&Color=" + productColor;
      }

   </script>

    @Html.LabelFor(m => m.Size)
    <select onchange="SetSize()" id="Size" required>
      <option>--Select Size--</option>
      @foreach (var size in Model.Size.Split(','))
      {
        <option value="@size">@size</option>
      }
    </select>

    @Html.LabelFor(m => m.Colors)
    <select onchange="SetColor()" id="Color" required>
      <option>--Select Color--</option>
      @foreach (var color in Model.Colors.Split(','))
      {
       <option value="@color">@color</option>
      }
    </select>

<button type="button" class="btn btn-fefault" onclick="AddToCart()">  Add to cart</button>

1 个答案:

答案 0 :(得分:2)

由于你在全球范围内拥有变量,我猜你在调用AddToCart()函数时会以某种方式获得更新。我会提到在重定向之前调用函数的第一个解决方案:

function AddToCart(){
    SetSize(); // call here to set size
    SetColor(); // call here to set color

    window.location  = "/ShoppingCart/AddToCart?id=" + ProductId + 
                       "&Size=" + productSize + "&Color=" + productColor;
}

您必须改为分配值:

function AddToCart(){
    productSize = $("#Size").val();
    productColor = $("#Color").val();
    window.location  = "/ShoppingCart/AddToCart?id=" + ProductId + 
                       "&Size=" + productSize + "&Color=" + productColor;
}

根据你的评论,你可以做的只是在调用函数中传递this的大小和颜色:

onchange="SetSize(this)"
onchange="SetColor(this)"

然后在您可以更新的功能中:

function SetSize(sizeElem) {
  productSize = sizeElem.value;
}

function SetColor(colorElem) {
  productColor = colorElem.value;
}