如何在不使用 javascript 并为其创建模型的情况下在操作 link 中传递 select 列表值？

Question

我有一个购物车，我通过 Html 创建了一个简单的 select 数量列表。我想使用 Html.ActionLink 来获取 select 列表的值，但是如果我使用 JavaScript 将无法工作，因为它在称为产品的 PartialView 中并且页面上有多个产品。

如果没有 JavaScript，我如何获得 select 列表的值？我确实环顾四周，但没有发现任何有用的东西。还有别的办法吗？

PartialView

            <p>@Model.Description</p>
            <p id="price">@Model.Price</p>
            <p class="id hidden">@Model.GadgetID</p>
            <select name="Select" id="quantity">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
            <p>
                Html.ActionLink("Add To Cart", "AddOrder", "Home",new { qty = ?? , id = Model.GadgetID, price = Model.Price }, null )                    
            </p>

或者如果我使用 JavaScript 我怎样才能获得正确的详细信息，因为页面上有多个产品。

View 包括 PartialView.

<div class="col-lg-10 products">   
        <div class="pad">
            @foreach (var item in Model)
            {
                foreach (var gadget in item.Gadgets)
                {
                    @Html.Partial("Gadget", gadget)
                }
            }
        </div>
    </div>

JQuery

<script type="text/javascript">
$(document).ready(function () {
    $(".AddToCartBtn").click(function () {

        var _qty = $(this).find("#quantity").val();
        var _id = $(this).find(".id").val();
        var _price = $("#price").html();

        alert("qty: " + _qty + " id: " + _id + " price: " + _price);
    });
});

Answer 1

没有客户端就无法做到这一点 javascript 因为用户可以在客户端更改 select 数量下拉列表的离子。

使用 Javascript / jQuery，您可以读取 selected 选项的值，并在单击 link 时附加到查询字符串。此外，由于您将从局部视图生成相同的标记，因此不应使用硬编码的静态 ID。 html 元素的 ID 应该是唯一的。使用您当前的代码，它将为所有数量 select 元素生成相同的 ID。您可以使用 css class 并使用 closest() 和 find() 方法来访问 link 单击的元素的数量 select。

<div class="gadgetItem">

    <select name="Select" class="qtySelect">
        <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
    </select>
    @Html.ActionLink("Add To Cart", "AddOrder", "Home",
           new { @id = Model.GadgetID, price = Model.Price }, new { id="addToCart"} ) 

</div>

并在 JavaScript 中，收听 link 上的 click 事件。假设 jQuery 对页面可用，（这段代码应该放在主页上，而不是在局部视图中）

$(function(){

  $(document).on("click","#addtoCart",function(e){

    e.preventDefault();  // Stop the normal link click behaviour

    var currentUrl = $(this).attr("href");  // Get the url

     // Append the quantity value to query string
     var newUrl = currentUrl + "?qty =" + $(this).closest(".gadgetItem")
                                                 .find(".qtySelect").val();

    window.location.href=newUrl; ///Load the new page with all query strings
  });
});

另外我建议你不要从客户请求中读取价格。您应该始终根据项目的 Id 从服务器中的数据库中读回它。如果没有，我可以将查询字符串中的价格更新为 "0.0001" 并订购数千件您的产品！

如何在不使用 javascript 并为其创建模型的情况下在操作 link 中传递 select 列表值？

How to pass select list value in action link without using javascript and creating a model for it?

javascript

asp.net-mvc

jquery

actionlink