Jquery 显示产品的价格和数量

Jquery 显示产品的价格和数量,jquery,json,ajax,asp.net-mvc,Jquery,Json,Ajax,Asp.net Mvc,我是Asp.NETMVC的新手,面临这个问题。 我有两个下拉列表公司和产品 当我选择公司及其产品时,它会使用jquery显示在下表中。 现在我想从数据库中显示所选产品的数量和价格。 我正在这样做 这是我的控制器代码 [Authorize] [AllowAnonymous] public ActionResult Details() { ViewBag.Companies = db.Companies.ToList(); return View(); }

我是Asp.NETMVC的新手,面临这个问题。 我有两个下拉列表公司和产品 当我选择公司及其产品时,它会使用jquery显示在下表中。 现在我想从数据库中显示所选产品的数量和价格。 我正在这样做

这是我的控制器代码

 [Authorize]
 [AllowAnonymous]       
 public ActionResult Details()
 {
   ViewBag.Companies = db.Companies.ToList();
   return View();
   }
   private IList<Product> GetProduct(int CompanyId)
   {
   var data = db.Products.Where(m => m.CompanyId == CompanyId).ToList();
   return data;
 }

[AcceptVerbs(HttpVerbs.Get)]
  public JsonResult LoadProductsByCompanyId(string CompanyId, string cn)
 {
  Cname = cn;
  var ProductList = this.GetProduct(Convert.ToInt32(CompanyId));
  var ProductsData = ProductList.Select(m => new SelectListItem()
  {
   Text = m.ProductName,
   Value = m.ProductId.ToString(),
  });
   return Json(ProductsData, JsonRequestBehavior.AllowGet);
 }

  [AcceptVerbs(HttpVerbs.Post)]
  public JsonResult GetProductById(string ProductId)
   {
   sampledb4Entities db = new sampledb4Entities();
   int pid = Convert.ToInt32(ProductId);
   var Product = db.Products.Where(x => x.ProductId == pid).SingleOrDefault();
   return Json(Product, JsonRequestBehavior.AllowGet);
   }
  
这是我的视图代码

<script>
  $("#ddProduct").change(function () {
  var trr = document.createElement("tr");
  $(trr).append("<td>" + $("#dd_Company option:selected").text() + "</td>").append("<td>" + $("#ddProduct option:selected").text() + "</td>");
  $(".producttable").append(trr);
    }); 
  </script>

  <script>
  $("#ddProduct").change(function () {
      var pid = $(this).val();
      var model = { ProductId: pid };
      $.ajax({
      type: "Post",
      Url: "/UserLogin/GetProductById",
      dataType: "JSON",
      contentType: "application/JSON;charset=utf-8",
      data: JSON.stringify(model),
           cache: false,
           success: function (data) {
           var trr = document.createElement("tr");
           $(trr).append("<td>" + $("#dd_Company option:selected").text() + "</td>").
           append("<td>" + ProductQuantity + "</td>").
           append("<td>" + ProductPrice + "</td>")
           ;
            $(".producttable").append(trr);
             }
             })
            });
            </script>

    <div class="producttable">
    <table>
    <tr>
     <th>
      @Html.DisplayNameFor(model => model.CompanyName)  
     </th>
     <th>
         @Html.DisplayNameFor(model => model.ProductName)
   </th>
        <th>
            Product Quantity
        </th>
        <th>
            Product Price
       </th>     
         </tr>
</table>
  </div>