Session版购物车+MVC局部刷新

效果图:

加载购物车列表(局部视图)

function LoadExpenseDetailsList() {
  $("#tbExpenseDetailsList tbody").load("/Payment/LoadExpenseDetailsList");
}

<table class="table table-bordered table-striped table-condensed table-hover fixheader"
    id="tbExpenseDetailsList">
    <thead>
        <tr>
            <th>
                Operate
            </th>
            <th>
                number
            </th>
            <th>
                Expense Items
            </th>
            <th>
                Expense Items Detail
            </th>
            <th>
                Product Name
            </th>
            <th>
                Purchase Date
            </th>
            <th>
                Explain
            </th>
            <th>
                Purchaser
            </th>
            <th>
                Payment Date
            </th>
            <th>
                Amount
            </th>
            <th>
                Currency
            </th>
            <th>
                Note
            </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

@using Web.Models;
@using System.Data;
@{

    List<ExpenseDetails> list = new List<ExpenseDetails>();
    if (Session["ExpenseDetailsList"] != null)
    {
        list = Session["ExpenseDetailsList"] as List<ExpenseDetails>;
    }
    foreach (ExpenseDetails item in list)
    {

    <tr>
        <td>
            <a id="" onclick="RemoveExpenseDetailsList(@item.id)" style="cursor:pointer">Remove</a>
        </td>
        <td>
            @item.id
            <input type="hidden" name="id" value="@item.id" />
        </td>
        <td>
            @item.expenseItems
            <input type="hidden" name="ExpenseItems" value="@item.expenseItems" />
        </td>
        <td>
            @item.expenseItemsDetail
            <input type="hidden" name="ExpenseItemsDetail" value="@item.expenseItemsDetail" />
        </td>
        <td>
            @item.productName
            <input type="hidden" name="ProductName" value="@item.productName" />
        </td>
        <td>
            @if (string.IsNullOrEmpty(item.purchaseDate.ToString()))
            {
                @item.purchaseDate
            }
            else
            {
                @Convert.ToDateTime(item.purchaseDate).ToString("yyyy-MM-dd")
            }
            <input type="hidden" name="PurchaseDate" value="@item.purchaseDate" />
        </td>
        <td>
            @item.explain
            <input type="hidden" name="Explain" value="@item.explain" />
        </td>
        <td>
            @item.purchaser
            <input type="hidden" name="Purchaser" value="@item.purchaser" />
        </td>
        <td>
            @if (string.IsNullOrEmpty(item.paymentDate.ToString()))
            {
                @item.paymentDate
            }
            else
            {
                @Convert.ToDateTime(item.paymentDate).ToString("yyyy-MM-dd")
            }
            <input type="hidden" name="PaymentDate" value="@item.paymentDate" />
        </td>
        <td>
            @item.amount
            <input type="hidden" name="Amount" value="@item.amount" />
        </td>
        <td>
            @item.currency
            <input type="hidden" name="Currency" value="@item.currency" />
        </td>
        <td>
            @item.note
            <input type="hidden" name="Currency" value="@item.note" />
        </td>
    </tr>
    }
}

/// <summary>
/// 加载购物车列表数据(显示Session数据)
/// </summary>
public PartialViewResult LoadExpenseDetailsList()
{
    return PartialView("_ExpenseDetailsList");
}

Add to(添加到购物车列表)

    function AddToExpenseDetails() {
        var ExpenseItems = $("#ExpenseItems").find("option:selected").text();
        var ExpenseItemsDetail = $("#ExpenseItemsDetail").find("option:selected").text();
        var ProductName = $("#ProductName").val();
        var PurchaseDate = $("#PurchaseDate").val();
        var Explain = $("#Explain").val();
        var Purchaser = $("#Purchaser").find("option:selected").text();
        var PaymentDate = $("#PaymentDate").val();
        var Amount = $("#Amount").val();
        var Currency = $("#Currency").text();
        var Note = $("#Note").val();
        if (Currency == "") {
            AlertMsg("AddToExpenseDetails", "Failure", "Withdrawal account can not be empty!");
            return;
        }
        if (Purchaser == "") {
            AlertMsg("AddToExpenseDetails", "Failure", "Purchaser can not be empty!");
            return;
        }
        if (PaymentDate == "") {
            AlertMsg("AddToExpenseDetails", "Failure", "Payment Date can not be empty!");
            return;
        }
        if (PurchaseDate == "") {
            AlertMsg("AddToExpenseDetails", "Failure", "Purchase Date can not be empty!");
            return;
        }  
        if (Explain == "") {
            AlertMsg("AddToExpenseDetails", "Failure", "Explain can not be empty!");
            return;
        }
        if (Amount == "") {
            AlertMsg("AddToExpenseDetails", "Failure", "Amount can not be empty!");
            return;
        }
        $.post("/Payment/AddExpenseDetailsInfo", {
            ExpenseItems: ExpenseItems,
            ExpenseItemsDetail: ExpenseItemsDetail,
            ProductName: ProductName,
            PurchaseDate: PurchaseDate,
            Explain: Explain,
            Purchaser: Purchaser,
            PaymentDate: PaymentDate,
            Amount: Amount,
            Currency: Currency,
            Note: Note
        }, function (data) {
            if (data == "Yes") {
                $("#ExpenditureAccount").attr("disabled", true);
                $("#ExpenseNote").attr("disabled", true);
                $("#Purchaser").attr("disabled", true);
                $("#PaymentDate").attr("disabled", true);
                $("#Explain").attr("disabled", true);
                $("#PurchaseDate").attr("disabled", true);
                $("#ProductName").val("");
                $("#Amount").val("");
                $("#Note").val("");
                LoadExpenseDetailsList();
            }
        });
    }

     /// <summary>
        ///类似 添加购物车
        /// </summary>
        [HttpPost]
        public string AddExpenseDetailsInfo(string ExpenseItems, string ExpenseItemsDetail, string ProductName, DateTime PurchaseDate, string Explain, string Purchaser, DateTime PaymentDate, decimal Amount, string Currency, string Note)
        {
            try
            {
                List<ExpenseDetails> list = new List<ExpenseDetails>();
                if (Session["ExpenseDetailsList"] != null)
                {
                    list = Session["ExpenseDetailsList"] as List<ExpenseDetails>;
                }
                ExpenseDetails entity = new ExpenseDetails();
                entity.id = list.Count + 1;
                entity.expenseItems = ExpenseItems;
                entity.expenseItemsDetail = ExpenseItemsDetail;
                entity.productName = ProductName;
                entity.purchaseDate = PurchaseDate;
                entity.explain = Explain;
                entity.purchaser = Purchaser;
                entity.paymentDate = PaymentDate;
                entity.amount = Amount;
                entity.currency = Currency;
                entity.note = Note;
                list.Add(entity);

                //decimal total = 0;
                for (int i = 0; i < list.Count; i++)
                {
                    list[i].id = i + 1;
                    //total += list[i].amount;
                }
                //ViewData["Total"] = total;
                Session["ExpenseDetailsList"] = list;
                return "Yes";

            }
            catch (Exception ex)
            {
                return "No";
            }
        }

Remove(删除购物车数据)

    function RemoveExpenseDetailsList(id) {
        $.post("/Payment/DelExpenseDetailsInfo", { id: id }, function (data) {
            if (data == "empty") {
                $("#ExpenditureAccount").attr("disabled", false);
                $("#ExpenseNote").attr("disabled", false);
                $("#Purchaser").attr("disabled", false);
                $("#PaymentDate").attr("disabled", false);
                $("#Explain").attr("disabled", false);
                $("#PurchaseDate").attr("disabled", false);
            }
            LoadExpenseDetailsList();
        });
    }

     /// <summary>
        /// 根据ID删除购物车列表数据(删除Session值)
        /// </summary>
        [HttpPost]
        public string DelExpenseDetailsInfo(int id)
        {
            if (id != 0)//id=0 清空购物车(Remove All)
            {
                List<ExpenseDetails> list = new List<ExpenseDetails>();
                if (Session["ExpenseDetailsList"] != null)
                {
                    list = Session["ExpenseDetailsList"] as List<ExpenseDetails>;
                    var item = list.Where(w => w.id == id).FirstOrDefault();
                    if (item != null)
                    {
                        list.Remove(item);
                        if (list.Count > 0)
                        {
                            for (int i = 0; i < list.Count; i++)
                            {
                                list[i].id = i + 1;
                            }
                            Session["ExpenseDetailsList"] = list;
                        }
                        else
                        {
                            Session["ExpenseDetailsList"] = null;
                        }
                    }
                }
            }
            else
            {
                Session["ExpenseDetailsList"] = null;
            }
            return Session["ExpenseDetailsList"] == null ? "empty" : "have";
        }

Save All(保存所有数据到数据库)

    function SaveAll() {
        var Issued = $("#Issued").val();
        var ExpenditureAccountID = $("#ExpenditureAccount").children(‘option:selected‘).val();
        var ExpenditureAccountInfo = $("#ExpenditureAccount").find("option:selected").text();
        var Explain = $("#Explain").children(‘option:selected‘).val();
        var Purchaser = $("#Purchaser").children(‘option:selected‘).val();
        var PaymentDate = $("#PaymentDate").val();
        var Note = $("#ExpenseNote").val();
        if (ExpenditureAccountID == "") {
            AlertMsg("SaveAll", "Failure", "Withdrawal accounts can not be empty!");
            return;
        }
        if (Purchaser == "") {
            AlertMsg("SaveAll", "Failure", "Purchaser can not be empty!");
            return;
        }
        $("#SaveAll").attr("disabled", true);
        $.post("/Payment/SaveAllExpenseDetails", {
            Issued: Issued,
            PaymentType: "Expense",
            ExpenditureAccountID: ExpenditureAccountID,
            ExpenditureAccountInfo: ExpenditureAccountInfo,
            Purchaser: Purchaser,
            Explain: Explain,
            PaymentDate: PaymentDate,
            Note: Note
        },
        function (data) {
            if (data == "true") {
                AlertMsg("SaveAll", "Success", "Save all success!");
                $("#ExpenditureAccount").attr("disabled", false);
                $("#ExpenseNote").attr("disabled", false);
                $("#Purchaser").attr("disabled", false);
                $("#PaymentDate").attr("disabled", false);
                $("#Explain").attr("disabled", false);
                $("#PurchaseDate").attr("disabled", false);
                $("#Currency").text("");
                $("#Purchaser").val("");
                $("#Explain").val("");
                $("#PaymentDate").val("");
                $("#PurchaseDate").val("");
                $("#tbExpenseDetailsList tbody").html("");
                $("#ExpenseNote").val("");
                GetBankAccount("");
            } else if (data == "empty") {
                AlertMsg("SaveAll", "Failure", "No data!");
            }
            else if (data == "false") {
                AlertMsg("SaveAll", "Failure", "Save all failure!");
            } else {
                AlertMsg("SaveAll", "Failure", data);
            }
            $("#SaveAll").attr("disabled", false);
        });
    }

        /// <summary>
        /// 保存购物车中所有数据到数据库(添加Session值到数据库)
        /// </summary>
        [HttpPost]
        public string SaveAllExpenseDetails(string Issued, string PaymentType, int? ExpenditureAccountID, string ExpenditureAccountInfo, string Purchaser, string PaymentDate, string Note, string Explain)
        {
            string CreateBy = Issued;
            DateTime CreateDate = DateTime.Now;
            string sql = "";
            int? AccountID = ExpenditureAccountID;
            string AccountName = "";
            string AccountNumber = "";
            string Currency = "";
            decimal Balance = 0;
            decimal ExpenditureAmount = 0;

            List<ExpenseDetails> list = new List<ExpenseDetails>();
            list = Session["ExpenseDetailsList"] as List<ExpenseDetails>;
            if (list != null && list.Count > 0)
            {
                foreach (ExpenseDetails item in list)
                {
                    ExpenditureAmount += item.amount;
                }
            }
            else
            {
                return "empty";
            }

            if (!string.IsNullOrEmpty(ExpenditureAccountInfo))
            {
                string[] strExpenditure = ExpenditureAccountInfo.Split(‘-‘);
                AccountName = strExpenditure[0];
                AccountNumber = strExpenditure[2];
                Balance = Convert.ToDecimal(strExpenditure[3]) - Convert.ToDecimal(ExpenditureAmount);
                Currency = strExpenditure[4];
            }

            if (Balance > 0)
            {
                sql += @"INSERT INTO dbo.Payments(PaymentType, AccountID, AccountName, AccountNumber, Expense, Income, Currency, Balance, Explain, Purchaser, PaymentDate, Note, CreateDate, CreateBy) VALUES(";
                sql += "N‘" + PaymentType + "‘,";
                sql += "N‘" + AccountID + "‘,";
                sql += "N‘" + AccountName + "‘,";
                sql += "N‘" + AccountNumber + "‘,";
                sql += "N‘" + ExpenditureAmount + "‘,";
                sql += "N‘" + 0 + "‘,";
                sql += "N‘" + Currency + "‘,";
                sql += "N‘" + Balance + "‘,";
                sql += "N‘" + Explain + "‘,";
                sql += "N‘" + Purchaser + "‘,";
                sql += "N‘" + PaymentDate + "‘,";
                sql += "N‘" + Note + "‘,";
                sql += "N‘" + CreateDate + "‘,";
                sql += "N‘" + CreateBy + "‘";
                sql += @")
";
                sql += @"UPDATE dbo.BankAccount SET Balance=" + Balance + " WHERE ID=" + AccountID + @"
";
            }
            else
            {
                return "Sorry, your credit is running low";
            }

            try
            {
                if (SQLHelper.ExecuteNonQuery(sql) > 0)
                {
                    sql = "";
                    int PaymentID = SQLHelper.ExecuteScalar("SELECT TOP(1) PaymentID FROM dbo.Payments ORDER BY CreateDate DESC");
                    foreach (ExpenseDetails item in list)
                    {
                        sql += @"INSERT INTO dbo.ExpenseDetails(PaymentID, ExpenseItems, ExpenseItemsDetail, ProductName, PurchaseDate, Explain, Purchaser, PaymentDate, Amount, Currency, Note, CreateDate, CreateBy) VALUES(";
                        sql += "N‘" + PaymentID + "‘,";
                        sql += "N‘" + item.expenseItems + "‘,";
                        sql += "N‘" + item.expenseItemsDetail + "‘,";
                        sql += "N‘" + item.productName + "‘,";
                        sql += "N‘" + item.purchaseDate + "‘,";
                        sql += "N‘" + item.explain + "‘,";
                        sql += "N‘" + item.purchaser + "‘,";
                        sql += "N‘" + item.paymentDate + "‘,";
                        sql += "N‘" + item.amount + "‘,";
                        sql += "N‘" + item.currency + "‘,";
                        sql += "N‘" + item.note + "‘,";
                        sql += "N‘" + CreateDate + "‘,";
                        sql += "N‘" + CreateBy + "‘";
                        sql += @")
";
                    }
                    if (SQLHelper.ExecuteNonQuery(sql) > 0)
                    {
                        Session["ExpenseDetailsList"] = null;
                        return "true";
                    }
                    else
                    {
                        return "false";
                    }
                }
                else
                {
                    return "false";
                }
            }
            catch (Exception)
            {
                return "false";
            }
        }

时间: 2024-08-29 03:52:33

Session版购物车+MVC局部刷新的相关文章

MVC无刷新分页(即局部刷新,带搜索,页数选择,排序功能)

我查看了很多网站,大部分评论分页都是局部刷新的,可大部分电商商品展示分页都是有刷新页面的,于是我便做了一个商品展示无刷新分页的例子.接下来我就将做一个模仿淘宝已买到的宝贝功能,不过我的是无刷新分页的. 至于为何要用无刷新分页(局部刷新)呢,我个人觉得有几点原因: 提高用户体验,无刷新分页网页看起来相对静止,滚轮不会跳到上面,加载速度比较快: 减轻网站服务器压力,返回局部页面(其中无需包含样式和脚本)肯定比返回整个页面要来的轻松: 还有个分页的好处就是减轻数据库的压力,返回几行的数据肯定比返回所有

ASP.NET MVC 4实现局部刷新

 废话不多说,直接讲我的思路: 利用Ajax+PartialView时间局部刷新. 首先在页面上引用了一个PartialView,当用Ajax更新数据时需要同时更新整个PartialView内容. Ajax代码: $.ajax({ url: "url", type: "Post", data: { "sectionid": sectionId, "questions": ids.join(",") },

局部刷新登录页面的实现方法

局部刷新的登录就是在一个页面上有一个登录框,登录之后交给后台异步处理,处理完成之后会在前端显示出来登录的用户信息,最常见的例子就是登陆优酷的时候我们可以看到URL登录之后没有变化(事实上,优酷用的方式不是局部刷新的方式,很明显可以看到整个页面刷新了,所以优酷的实现方式就是不是局部刷新,但是一时间没有找到例子).最近打算做一个博客的网站的项目,登录这里想要提供给用户提供一个更加良好的体验,就想到了利用ajax实现局部刷新,但是又想到了第二次登录的时候会需要判断登录过之后需要直接显示用户信息而不是登

IOS开发——UI进阶篇(四)全局刷新,局部刷新,左滑操作,左滑出现更多按钮,进入编辑模式,批量删除,自定义批量删除

首先创建项目,在storyboard如下布局控件,设置好约束 然后创建cell模型类XMGWineCell数据模型类XMGWine创建UITableView,设置数据源协议,实现数据源方法懒加载数据这些在前面已经做过很多次了,代码就不一一写了 一.全局刷新 1.添加单组数据并全局刷新 - (IBAction)add { // 添加模型数据 XMGWine *wine = [[XMGWine alloc] init]; wine.money = @"20.5"; wine.name =

页面刷新 整个页面刷新和局部刷新

整个页面刷新 1.页面自动刷新:把如下代码加入<head>区域中 <meta http-equiv="refresh" content="20"> 其中20指每隔20秒刷新一次页面. 2.页面自动跳转:把如下代码加入<head>区域中 <meta http-equiv="refresh" content="20;url=“#"> 其中20指隔20秒后跳转到#页面 3.页面自动刷新

struts2+json+jquery局部刷新实现注册验证

struts2+json+jquery局部刷新实现注册验证 1.项目需要导入的jar包 在web项目的WebRoot/WEB-INF/lib目录下导入以下包 2.在src目录下建立包com.entity,里面建立java类:UserInfo.java .  MailSenderInfo.java UserInfo.java package com.entity; import java.io.Serializable; /** * 说明:用户实体类 * @author wangcunhuazi

Ajax 异步局部刷新

Ajax 异步局部刷新 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 实现json 字符串与 JavaScrip 对象得相互转换 JSON.parse()和 JSON.stringify() 1.序列化(将JavaScrip 转换为 json)使用 JSON.st

动态生成能够局部刷新的验证码【AJAX技术】---看了不懂赔你钱

在开发JavaWeb应用时,动态生成能够局部刷新的验证码是一项必须的功能,在这里我们将会详细的讲解如何实现这一功能. 一.涉及技术 该功能需要用到AJAX异步传输技术,这样能保证在点击"看不清,重新获取验证码"按钮时,能够不刷新页面其它内容而局部刷新验证码图片内容. 还需要用到Servlet技术,这里会在Servlet的GET方法中通过Java内置的画图工具绘制一个验证码图片,可以在HTML的<img/>标签中的src属性获取缓存图片资源. 二.各个页面及代码 1.inde

problem:vue组件局部刷新,在组件销毁(destroyed)时取消刷新无效问题

场景: 一个群发消息列表(数组) 列表下有多条消息(元素) 每条正在发送的消息数据状态需要实时刷新,发送完成时需要显示成功提示符合且不需要刷新,然后3秒消失.首次显示列表时,已经成功的状态不显示这个成功提示符. 1.定位确定采用局部刷新 2.进入消息列表请求获取列表数据的接口,完成发送的消息不需显示完成状态 3.正在发送的消息首次渲染时就调用setTimeout轮询刷新当前消息的接口,完成时,显示完成状态(新增一个完成状态的字段) 4.页面销毁时,还在发送的消息也取消刷新 误区: 1.每条消息没