代码之家 › 专栏 › 技术社区 › Sugafree

如何在操作链接中传递选择列表值,而不使用javascript并为其创建模型?

actionlink asp.net-mvc jquery javascript

-1

Sugafree · 技术社区 · 9 年前

我有一个购物车,我通过创建了一个简单的数量选择列表 Html 。我想使用 Html.ActionLink 以获取该选择列表的值,但如果使用 JavaScript 在中无法工作,因为它位于 PartialView 称为产品,页面上有多个产品编号。

如果没有 JavaScript语言 ? 我确实环顾四周,但没有发现任何有用的东西。还有别的办法吗?

部分视图

            <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 其中包括 部分视图 .

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

1 回复 | 直到 9 年前

marc_s MisterSmith 7 年前

如果没有客户端javascript,则无法执行此操作,因为用户可以在客户端更改数量下拉列表的选择。

使用Javascript/jQuery,您可以读取所选选项的值,并在单击链接时附加到查询字符串。此外,由于将从部分视图生成相同的标记,因此不应使用硬编码的静态ID。对于html元素,Id应该是唯一的。使用当前代码,它将为所有数量选择元素生成相同的id。您可以使用css类并使用 closest() 和 find() 方法访问所单击链接的quantity 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中,收听 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"