2013-08-01 71 views
1

我有一個阿賈克斯jQuery的功能:ajax更新時DropdownList的重複列表?

function UpdateValue() { 
$(document.body).on("change",".quantity", function() { 
    var ProID = $(this).attr("data"); 
    var Quantity = $(this).val(); 
    $.ajax({ 
     type: "GET", url: "/Cart/UpdateValue", 
     data: { ProID: ProID, quantity: Quantity }, 
     success: function (data) { 
      $("#cartbox").html(data); 
     } 
    } 
     ); 
    $.ajaxSetup({ 
     cache: false 
    }); 
}); 
} 

呼叫UpdateValue在車控制器:

public PartialViewResult UpdateValue(Cart cart,int ProID, int quantity) 
    { 
     List<SelectListItem> items = new List<SelectListItem>(); 
     for (int i = 1; i <= 10; i++) 
     { 
      items.Add(new SelectListItem { Text = i.ToString(), 
              Value = i.ToString() }); 
     } 
     ViewBag.Items = items; 
     Product product = repository.Products.FirstOrDefault(p => p.ProductID 
                    == ProID); 
     if (product != null) 
     { 
      cart.UpdateItem(product, quantity); 
     } 
     CartIndexViewModel ptview = new CartIndexViewModel { Cart = cart, 
                   ReturnUrl = "/" }; 
     return PartialView(ptview); 
    } 

當AJAX功能成功,它將返回UpdateValue查看。但Dropdown列表總是在每一行中改變相同。如何在ajax更新後從索引視圖中傳遞選定的值?

這是我UpdateValue查看代碼:

<table id="cartbox"> 
     <thead> 
      <tr> 
       <th>Tên hàng</th> 
       <th>Số lượng</th> 
       <th>Đơn giá</th> 
       <th colspan="2" style="width:70px">Thành tiền</th> 
      </tr> 
     </thead> 
     <tbody> 
      @foreach (var line in Model.Cart.Lines) 
      { 
       <tr> 

        <td>@line.Product.Name 
        </td> 
        <td>@Html.DropDownList("Quantity", new SelectList(ViewBag.Items as System.Collections.IList, "Value", "Text", line.Quantity), new { data = line.Product.ProductID, @class = "quantity" })</td> 
        <td style="color:#3A9504;margin-left:3px">@string.Format("{0:00,0 VNĐ}", line.Product.Price)</td> 
        <td>@string.Format("{0:00,0 VNĐ}", (line.Quantity * line.Product.Price))</td> 
        <td align="center" style="width:10px"><a href="@Url.Action("RemoveFromCart","Cart",new{ProID= line.Product.ProductID, returnUrl= Request.Url.PathAndQuery})"><img src="@Url.Content("~/Content/Images/delete.png")" style="padding-right:10px" /></a></td> 
       </tr> 
      } 

     </tbody> 
     <tfoot> 
      <tr style="border-top-style:solid;border-top-color:#DFDFDF;border-top-width:1px;"> 
       <td colspan="3" align="right" style="border-right-color:#808080;border-right-style:solid;border-right-width:1px;text-align:right"><b>Tổng tiền:</b></td> 
       <td style="text-align: center"><b>@string.Format("{0:00,0 VNĐ}", Model.Cart.ComputeTotalValue())</b></td> 
       <td></td> 
      </tr> 
     </tfoot> 
    </table> 

回答

0

如果我理解你正確地那麼你的問題是,在下拉列表中更新數據後,你失去了在下拉列表中選擇?

如果是這樣,那麼你就需要把這個在JavaScript添加到您的success處理程序:

success: function (data) { 
    $("#cartbox").html(data); 
    $("#cartbox").find(".quantity").val(Quantity); 
} 
+0

不,不是改變了選擇之後,我繼續在另一行變化值。它使用相同的值更改每行的所有下拉列表。我試過'$(「#cartbox」)。find(「。quantity」).val(Quantity);'但是它不起作用。 – Luffy

+0

我很抱歉,但我不明白你的意思是「選擇沒有改變,我繼續改變價值在另一行」。如果你也發佈視圖的代碼,我會幫忙。 –

+0

我剛剛發佈了查看代碼。 – Luffy