如何在操作鏈接中傳遞選擇列表值而不使用JavaScript併爲其創建模型？

-1

我有一個購物車，我通過Html爲數量創建了一個簡單的選擇清單。我想使用Html.ActionLink來獲取該選擇列表的值，但是如果我使用JavaScript將無法正常工作，因爲它位於名爲product的PartialView之內，並且頁面上有多個產品。如何在操作鏈接中傳遞選擇列表值而不使用JavaScript併爲其創建模型？

我怎樣才能得到該選擇列表的價值沒有JavaScript？我環顧四周，但沒有發現任何有用的東西。有沒有其他方法？

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

來源

2016-09-21 Sugafree

你只是不能這樣做沒有js =） –

，我怎麼能用'JavaScript'做到這一點 – Sugafree

如果你不想使用JavaScript，那麼把一個正確生成的下拉列表放在FormMethod.Get中並提交你的'AddOrder（）'方法。但無論如何，這是在改變數據，所以你應該做一個POST，而不是GET。使用鏈接不合適。（並在局部視圖是irelevant） –

你不能做沒有客戶端的JavaScript，因爲用戶可以在客戶端更改數量下拉菜單的選擇。

使用java script/jquery，您可以讀取所選選項的值，並在單擊鏈接時追加到查詢字符串。此外，由於您將從部分視圖生成相同的標記，因此不應使用硬編碼的靜態ID。 Id的html元素應該是唯一的。使用您當前的代碼，它將爲所有數量選擇元素生成相同的ID。您可以使用css類並使用closest()和find()方法訪問所單擊鏈接的數量選擇元素。

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

and in JavaScript，listen to the click event on the link。假設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 quarystring 
    var newUrl = currentUrl + "?qty =" + $(this).closest(".gadgetItem") 
               .find(".qtySelect").val(); 



    window.location.href=newUrl; ///Load the new page with all querystrings 


    }); 

});

而且我建議你不要從客戶端讀取請求的價格。您應該始終根據項目的ID從服務器中的數據庫中讀取數據。如果沒有，我可以將查詢字符串中的價格更新爲"0.0001"並訂購成千上萬的產品!!!!!

來源

2016-09-21 19:36:29 Shyju

但它不會在'部分視圖'工作。我怎樣才能解決這個問題？ – Sugafree

它應該仍然適用於局部視圖，因爲您的JavaScript代碼將在最終呈現的HTML頁面上執行。 – Shyju

但是最終的渲染視圖會有6個addToCart按鈕，6個數量和6個價格。或者，如果我將'JavaScript'代碼放入'PartialView'中，它會如何工作？我不認爲這是做這件事的好方法 – Sugafree

如何在操作鏈接中傳遞選擇列表值而不使用JavaScript併爲其創建模型？

回答

相關問題