MVC收藏的实现

-------------------------------------------------添加界面

@{
ViewBag.Title = "Detail";
}

<a href="/Home/Index">首页</a> > <a href="/Product/Index">商品列表</a>><h2>商品id是：@ViewBag.Id</h2>
<input type="hidden" id="hidpid" value="@ViewBag.Id">

<input type="button" value="加入购物车" onclick="addCart()" />
<script src="~/Scripts/jquery-3.4.1.js"></script>

<script>
function addCart() {

$.ajax({
url: "/Product/AddCart?id=" + $("#hidpid").val(),
type: "post",
dataType: "json",
success: function (res) {
if (res > 0) {
alert("添加购物车成功");
}
}
})
}

</script>
-------------------------------------------------显示界面（分页）
@{
ViewBag.Title = "Index";
}

<h2>Index</h2>

<table class="table table-bordered">
<thead>
<tr>
<td>商品id</td>
<td>商品名称</td>
<td>商品价格</td>
<td>操作</td>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>商品id</td>
<td>商品名称</td>
<td>商品价格</td>
<td><a href="/Product/Detail?id=1">详情</a></td>
</tr>
</tbody>
</table>
<div>
<span>总条数：<span id="spCount"></span></span>
<input type="hidden" id="hidpageindex" value="1" />
<input type="button" value="上一页" onclick="page(1)" />
<input type="button" value="下一页" onclick="page(2)" />
</div>

<script src="~/Scripts/jquery-3.4.1.js"></script>
<script>
$(function () {
getList(0, 0, "", 2, 1);
})

//type 1 表示上一页 2 表示下一页
function page(type) {
var currIndex = parseInt($("#hidpageindex").val());
if (type == 1) {
currIndex = currIndex - 1;
if (currIndex < 1) {
currIndex = 1;
}
} else {
currIndex = currIndex + 1;
}

getList(0, 0, "", 2, currIndex);
}

function getList(brandId, categoryid, name, pageSize, pageIndex) {
$.ajax({
url: "http://localhost:3847/api/ApiProduct/GetProductInfos?brandId=" + brandId + "&categoryid=" + categoryid + "&name=" + name + "&pageSize=" + pageSize + "&pageIndex=" + pageIndex,
type: "get",
dataType: "json",
success: function (res) {
$("#tb").html("");
$("#spCount").text(res.Count);
$.each(res.List, function (index, item) {
var trs = "
<tr>
<td>"+ item.Id + "</td>
<td>"+ item.ProductName + "</td>
<td>"+ item.Price + "</td>
<td><a href='/Product/Detail?id="+ item.Id + " '>详情</a></td>
</tr>";
$("#tb").append(trs);
});

//$(res.List).each(function (index, item) {
// var trs = "
// <tr>
// <td>"+ item.Id + "</td>
// <td>"+ item.ProductName + "</td>
// <td>"+ item.Price + "</td>
// </tr>";
// $("#tb").append(trs);
//})

$("#hidpageindex").val(pageIndex);
}
})
}
</script>
----------------------------------------------------------API
using CartDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace CartDemo.Controllers
{
public class ApiProductController : ApiController
{

/// <summary>
/// 获取商品集合
/// </summary>
/// <param name="brandId">品牌id</param>
/// <param name="categoryid">分类id</param>
/// <param name="name">商品名称</param>
/// <param name="pageSize">每页几条</param>
/// <param name="pageIndex">第几页</param>
/// <returns></returns>
public PageInfo GetProductInfos(int brandId = 0, int categoryid = 0, string name = "", int pageSize = 2, int pageIndex = 1)
{
var list = new List<ProductInfo>(); //此处应该是从数据库中查询出来的数据
list.Add(new ProductInfo() { Id = 1, Name = "手机", BrandId = 1, CategoryId = 1, Price = 10 });
list.Add(new ProductInfo() { Id = 2, Name = "u盘", BrandId = 1, CategoryId = 2, Price = 20 });
list.Add(new ProductInfo() { Id = 3, Name = "手提电脑", BrandId = 2, CategoryId = 3, Price = 30 });
list.Add(new ProductInfo() { Id = 4, Name = "机械硬盘", BrandId = 2, CategoryId = 1, Price = 40 });
list.Add(new ProductInfo() { Id = 5, Name = "手机壳", BrandId = 3, CategoryId = 2, Price = 50 });

//开始写查询
//1 按品牌
if (brandId > 0)
{
list = list.Where(c => c.BrandId == brandId).ToList();
}

//2 按分类
if (categoryid > 0)
{
list = list.Where(c => c.CategoryId == categoryid).ToList();
}

//3 按名称
if (!string.IsNullOrEmpty(name))
{
list = list.Where(c => c.Name.Contains(name)).ToList();
}

// list = list.OrderBy(c => c.Price).ToList();

//写分页 ,每页2条

// 第1页 跳过0条，取2条
// 第2页 跳过2条，取2条
// 第3页 跳过4条，取2条
// 第4页 跳过6条，取2条

int count = list.Count;

list = list.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList();

return new PageInfo()
{
Count = count,
List = list
};
}

}
}
------------------------------------------------------------控制器

using CartDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Helpers;
using System.Web.Mvc;

namespace CartDemo.Controllers
{
public class ProductController : Controller
{
// GET: Product
/// <summary>
/// 获取商品列表
/// </summary>
/// <returns></returns>
public ActionResult Index()
{

return View();
}

/// <summary>
/// 详情页面
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public ActionResult Detail(int id)
{
ViewBag.Id = id;
return View();
}

/// <summary>
/// 添加购物车方法
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
[HttpPost]
public int AddCart(int id)
{
var res = 0;

HttpCookie cookie = new HttpCookie("购物车商品-" + id);
cookie.Value = id.ToString();
cookie.Expires = DateTime.Now.AddDays(1);
Response.Cookies.Add(cookie);

return res;
}

}
}