モデルリストをコントローラからJqueryまたはJavascriptで表示するには

Question

私の注文モジュールでは、すべての製品のドロップダウンリストが3つあります。

サイズの最初のドロップダウンリスト。 （ユーザが値を選択していない場合、第二及び第三のドロップダウンが表示されていない）色の

第ドロップダウンリスト：ユーザーは、ドロップダウンリストからサイズを選択した場合、2番目のドロップダウンが表示されています。しかし、私はすべての色を表示したくありません。選択した商品サイズの色のみを表示します。

最後に、数量の3番目のドロップダウンリスト。ユーザーは数量を選択してカートに送信します。

私はjquery ajaxの初心者であり、あなたの助けが必要です。

public class ColorForOrder 
{ 
    public List<ColorFromVariationVM> colorlist { get; set; } 
} 

そして第二VM：

public class ColorFromVariationVM 
    { 
     public int ID { get; set; } 
     public string Color { get; set; } 
     public int? ColorQuantity { get; set; } 
    } 

マイビュー：

<table id="example1" class="table table-bordered dt-responsive nowrap table-striped"> 
      <thead> 
       <tr> 
        <th width="20%">Product Name</th> 
        <th width="30%">Size(Height - Width - Sections)</th> 
        <th width="20%">Color</th> 
        <th width="10%">Quantity</th> 
        <th width="20%">Transaction</th> 
       </tr> 
      </thead> 
      <tbody> 
       @foreach (var item in Model) 
       { 
        <tr> 
         <td>@item.ProductName</td> 
         <td> 
          <div class="form-group" style="width: 100%;"> 
           @*@Html.DropDownListFor(x => item.SizeId, new SelectList(item.ProductSizeList, "ID", "SizeForOrder"),"Select Size", new { @class = "form-control select2",@style="width:100%", @placeholder = "" }) 
            <span class="text-danger">@Html.ValidationMessageFor(x => item.SizeId)</span>*@ 

           <select id="select-size-@item.ID" class="form-control select2" style="width: 100%;"> 
            <option selected="selected" disabled="disabled">Size</option> 
            @foreach (var size in item.ProductSizeList) 
            { 
             if (size.Quantity == null || size.Quantity == 0) 
             { 
              <option disabled="disabled">@size.SizeForOrder (Out of Stock)</option> 
             } 
             else 
             { 
              <option>@size.SizeForOrder</option> 
             } 

            } 
           </select> 
          </div> 
         </td> 
         <td> 
          <div id="color-@item.ID" class="form-group" style="width: 100%;"> 
           @*<select class="form-control select2" style="width: 100%;"> 
             <option selected="selected" disabled="disabled">Color</option> 
             <option>TXB</option> 
             <option>TXW</option> 
             <option>TXG</option> 
             <option>MATT</option> 
             <option>BRUSHED</option> 
             <option>POLISHED</option> 
            </select>*@ 
          </div> 
         </td> 
         <td> 
          <div id="quantity-@item.ID" class="form-group" style="width: 100%;"> 
           @*<select class="form-control select2" style="width: 100%;"> 
             <option selected="selected" disabled="disabled">QTY</option> 
             <option>1</option> 
             <option>2</option> 
             <option>3</option> 
             <option>4</option> 
             <option>5</option> 
             <option>6</option> 
             <option>7</option> 
            </select>*@ 
          </div> 
         </td> 
         <td> 
          @* <a href="@Url.Action("EditProduct", "Product", new { id = item.ID })" id="add-basket-@item.ID" class="btn btn-primary btn-sm" title="Edit"><i class="fa fa-fw fa-cart-plus"></i> Add to Basket</a>*@ 
          @*<a href="@Url.Action("VariationList", "Variation", new { id = item.ID, p=item.ProductName })" class="btn btn-primary btn-xs" title="Variation"><i class="icon-sitemap"></i></a>*@ 
          @* <a href="@Url.Action("Delete","Product", new { id = item.ID })" onclick="return confirm('Are you sure you want to delete this product with all variations?')" class="btn btn-danger btn-xs" title="Delete"><i class="icon-remove"></i></a>*@ 
         </td> 

        </tr> 
       } 

      </tbody> 
      <tfoot> 
       <tr> 
        <th>Product Name</th> 
        <th>Size (Height-Width-Sections)</th> 
        <th>Color</th> 
        <th>Quantity</th> 
        <th>Transaction</th> 
       </tr> 
      </tfoot> 
     </table> 

マイスクリプト：ここ

は私のモデルビューで

<script> 

    $(document).ready(function() { 

     @foreach (var item in Model) 
     { 
      <text> 
     $('select#select-size-@(item.ID)').change(function() { 

      var id = $(this).data("id"); 
      var link = "/Order/GetColorFromSize/" + @item.ID; 
      var a = $(this); 
      $.ajax({ 
       type: "GET", 
       url: link, 
       success: function(result) { 

        $("div#color-@(item.ID)").html('<select class="form-control select2" style="width: 100%;">' + 
         $.each(result,function(index,value) 
         { 
          $.each(value[0],function(indexx,valuee) 
          { 
           '<option>'+valuee[1]+'</option>' 
          }) 
         }) 
         + '</select>'); 
       } 
      }); 
     }); 
     </text> 
      } 
     }); 
</script> 

そして最後に私のコントローラ：

public List<Models.DTO.OrderDTO.ColorForOrder> GetColorFromSize(int id) 
     { 
      List<Models.DTO.OrderDTO.ColorForOrder> colormodel = rpvariation.Where(x => x.Id == id).Select(a => new Models.DTO.OrderDTO.ColorForOrder() 
      { 
       colorlist = a.OwnerProduct.Colors.Select(b => new Models.DTO.OrderDTO.ColorFromVariationVM() 
       { 
        ID = b.Id, 
        Color = b.Color.ColorName, 
        ColorQuantity = b.Product.Variations.Sum(x => x.Stock.TXB) 
       }).ToList() 
      }).ToList(); 

      return colormodel; 

     } 

Answer 1

public ActionResult GetColorFromSize(int id) 
{ 
    var colormodel = rpvariation 
     .Where(x => x.Id == id) 
     .Select(a => new Models.DTO.OrderDTO.ColorForOrder() 
     { 
      colorlist = a.OwnerProduct.Colors.Select(b => new Models.DTO.OrderDTO.ColorFromVariationVM() 
      { 
       ID = b.Id, 
       Color = b.Color.ColorName, 
       ColorQuantity = b.Product.Variations.Sum(x => x.Stock.TXB) 
      }).ToList() 
     }).ToList(); 

    return Json(colormodel, JsonRequestBehaviour.AllowGet); 
}