购物车中的地址显示栏页面(单独功能,超详细)

一.我这里仅仅做的是一个购物车的地址显示以及删除功能,详细注释都在代码里了,这里我就不过多介绍逻辑了,适合新手初学者阅读

二.话不多说,直接看代码吧!

1.model层

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace G5.Exam03.Day12.Models
{
    public class ShAddress
    {
        public int AId { get; set; }
        public string AName { get; set; }
        public string Area { get; set; }
        public string Dzhi { get; set; }
        public string hanSet { get; set; }
    }
}

2.dal层

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using G5.Exam03.Day12.Models;
namespace G5.Exam03.Day12.Dal
{
    public class AddressDal
    {
        DBHelper db = new DBHelper();
        //地址显示
        public List<ShAddress> GetList()
        {
            string sql = "select * from ShAddress";
            return db.GetToList<ShAddress>(sql);
        }
        //删除功能
        public int Del(int id)
        {
            string sql = $"delete from ShAddress where AId={id}";
            return db.ExecuteNonQuery(sql);
        }
    }
}

3.控制器

using G5.Exam03.Day12.Dal;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;

namespace G5.Exam03.Day12.Controllers
{
    public class AddressController : Controller
    {
        AddressDal dal = new AddressDal();
        // GET: Address
        public ActionResult Index()
        {
            return View();
        }
        public int Del(int id)
        {
            return dal.Del(id);
        }
        [HttpGet]
        public JsonResult GetList()
        {
            return Json(dal.GetList(),JsonRequestBehavior.AllowGet);
        }

        
    }
}

4.视图

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<div id="divMain">
    <img src="#"  alt="Alternate Text" />
</div>
<script>
    //文档就绪函数
    $(function () {
        Show();
    })
    //显示函数
    function Show() {
        $.ajax({
            url: "/Address/GetList",//地址
            dataType: "json",//返回到后台的数据格式
            type: "get",//获取到数据的方式
            success: function (d) {//成功就继续执行后面的代码
                //清空原有的旧数据
                $("#divMain").empty();
                //each遍历显示数据库的数据
                $(d).each(function () {
                    //字符串拼接
                    var str = '<div style="border:solid;color:lightpink;">';
                    str += '收货人:' + this.AName;
                    str += '<img src="../Img/228c96645e893848a8bd68a66c84777f.png" onclick="Del(' + this.AId + ')" Title="删除"  style="float:right;cursor:pointer;"/></br>';
                    str += '所在地区:' + this.Area +'</br>';
                    str += '地址:' + this.Dzhi + '</br>';
                    str += '手机:' + this.hanSet + '</br>';
                    str += '</div></br >';
                    //在div最后面添加要拼接上去的内容
                    $("#divMain").append(str);
                })
            }
        })
    }
    //删除功能实现
    function Del(id) {
        //弹框提示是否要删除
        if (confirm('确认删除吗?')) {
            $.ajax({
                url: "/Address/Del",//地址
                dataType: "json",//返回到后台的数据格式
                data: { id: id },//要向数据库后台发送的数据,前面是你的控制器名称,后面是你发送的值定义好的名称(我这里发送值的名称与控制器名称是一样的)
                type: "post",//获取到数据的方式 post是发送命令到数据库中,get是从数据库获取到数据
                success: function (d) {//成功就继续执行后面的代码
                    if (d > 0) {
                        alert("删除成功!");
                        //调用显示函数进行刷新页面
                        Show();
                    }
                    else {
                        alert("删除失败!");
                    }
                }
            })
        }
        else {
            return false;//选择否,返回false;
        }
        
    }
</script>

简简单单,结束了,完工,你的效果出来了吗?