小白白的ASP.NET詳情頁
阿新 • • 發佈：2020-08-06
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace MODEL { public class Product { public int PId { get; set; } public string PName { get; set; } public string PImages { get; set; } public string PNo { get; set; } public Decimal Price { get; set; } } }Model
using MODEL; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace DAL { public class ProductDAL { DBHelper db = new DBHelper(); //顯示查詢 public List<Product> GetProducts() { string sql = " select * from Product where 1=1 "; return db.GetToListDal<Product>(sql); } //商品詳情 public Product GetProductByID(int id) { string sql = " select * from Product "; if (id!=0) { sql += $" where PId={id}"; } return db.GetToList<Product>(sql)[0]; } } }
using MODEL; using DAL; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace BLL { public class ProductBLL { ProductDAL dal = new ProductDAL(); //顯示查詢 public List<Product> GetProducts() { return dal.GetProducts(); } //商品詳情 public Product GetProductByID(int id) { return dal.GetProductByID(id); } } }Bll
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using BLL;
using MODEL;
namespace Exercise_API.Controllers
{
public class ProductController : ApiController
{
ProductBLL bll = new ProductBLL();
[HttpGet]
public IHttpActionResult GetProducts(string name)
{
var list = bll.GetProducts();
if (!string.IsNullOrEmpty(name))
{
list = list.Where(x => x.PName.Contains(name)).ToList();
}
return Json(list);
}
//商品詳情
[HttpGet]
public IHttpActionResult GetProductByID(int id)
{
return Json(bll.GetProductByID(id));
}
}
}
controller
@{ ViewBag.Title = "Show"; } <h2>商品顯示</h2> <script src="~/Scripts/jquery-3.4.1.min.js"></script> <script> $(function () { Show(); }) function Show() { var name = $("#textCha").val(); $.ajax({ url: "http://localhost:50262/api/Product/GetProducts?name=" + name, type: "get", dataType: "json", success: function (d) { $("#tb").empty(); $(d).each(function () { var list = '<tr>' list += '<td>' + this.PNo + '</td>' list += '<td><img width="100" height="80" src="' + this.PImages + '" /></td>' list += '<td>' + this.PName + '</td>' list += '<td>' + this.Price + '</td>' list += '<td><input type="button" data-toggle="modal" data-target="#addClass" class="btn btn-success btn btn-sm" value="詳情" onclick="XQ(' + this.PId + ')" />' list += '<input type="button" onclick="AddShopping(\'' + this.PNo + '\')" value="新增購物車" />' list += '</td > ' list += '</tr>' $("#tb").append(list); }) } }) } function AddShopping(id) { $.ajax({ url: "http://localhost:50262/api/ShoppingCar/AddShoppingCar?Productpno=" + id, type: "post", dataType: "json", success: function (d) { if (d>0) { alert("新增購物車成功"); } } }) } function XQ(id) { $.ajax({ url: "http://localhost:50262/api/Product/GetProductByID/" + id, type: "get", dataType: "json", success: function (d) { $("#lbPno").text(d.PId); $("#img").attr("src", d.PImages); $("#lbPname").text(d.PName); $("#lbPrice").text(d.Price); } }) } </script> <table class="table"> <tr> <td>商品名稱:<input id="textCha" type="text" /></td> <td style="float:right"> <input type="button" class="btn btn-success btn btn-sm" value="查詢" onclick="Show()" /> <input class="btn btn-danger btn btn-sm" onclick="location.href='/ShoppingCar/ShoppingShow'" type="button" value="我的購物車" /> </td> </tr> </table> <table class="table"> <thead> <tr> <th>商品編號</th> <th>商品圖片</th> <th>商品名稱</th> <th>商品價格</th> <th>操作</th> </tr> </thead> <tbody id="tb"> </tbody> </table> <div> </div> <!-- 商品詳情模態窗 --> <div class="modal fade" id="addClass" tabindex="-1" role="dialog" aria-labelledby="XXX" style="position: absolute;top: 0;left: 0"> <div class="modal-dialog" role="document"> <div class="modal-content"> <form action="." method="post" class="form-horizontal"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title">商品詳情</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">商品編號:</label> <div class="col-sm-6"> <label for="inputEmail3" id="lbPno" class="col-sm-3 control-label"></label> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">商品圖片:</label> <div class="col-sm-6"> <img src="" width="100" height="80" id="img" /> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">商品名稱:</label> <div class="col-sm-6"> <label for="inputEmail3" id="lbPname" class="col-sm-3 control-label"></label> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">商品價格:</label> <div class="col-sm-6"> <label for="inputEmail3" id="lbPrice" class="col-sm-3 control-label"></label> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> </div> </form> </div> </div> </div>Html