Session版購物車+MVC局部刷新_ZenDei技術網路在線

效果圖：大致代碼： 1 <script type="text/javascript"> 2 $(function () { 3 LoadOrderDetailList(); 4 }); 5 function AddToOrderDetailInfo() { 6 $("#AddToOrderDeta ...

效果圖：

大致代碼：

 1 <script type="text/javascript">
 2     $(function () {
 3         LoadOrderDetailList();
 4     });
 5     function AddToOrderDetailInfo() {
 6         $("#AddToOrderDetail").attr("disabled", true);
 7         var form = $("#form_Create").serialize();
 8         $.post("/Sample/AddToOrderDetail", form, function (msg, status) {
 9             if (msg.Result == "OK") {
10                 $("#hShipDate").val($("#ShipDate").val());
11                 $("#ShipDate").attr("disabled", true);
12                 $("#hReceiptDate").val($("#ReceiptDate").val());
13                 $("#ReceiptDate").attr("disabled", true);
14                 $("#TrackingNumber").attr("readonly", true);
15                 $("#Note").attr("readonly", true);
16                 $("#ProductName").val("");
17                 $("#Qty").val("");
18                 $("#dNote").val("");
19                 AlertMsg("AddToOrderDetail", "success", msg.Message);
20             } else {
21                 AlertMsg("AddToOrderDetail", "Failure", msg.Message);
22             }
23             $("#AddToOrderDetail").attr("disabled", false);
24             LoadOrderDetailList();
25         });
26     }
27     function LoadOrderDetailList() {
28         $("#tbOrderDetailsList tbody").load("/Sample/LoadOrderDetailList");
29     }
30     function RemoveOrderDetail(id) {
31         $.post("/Sample/RemoveOrderDetail", { id: id }, function (data) {
32             if (data == "empty") {
33                 $("#ShipDate").attr("disabled", false);
34                 $("#ReceiptDate").attr("disabled", false);
35                 $("#TrackingNumber").attr("readonly", false);
36                 $("#Note").attr("readonly", false);
37             }
38             LoadOrderDetailList();
39         });
40     }
41     function SaveAll() {
42         $("#SaveAll").attr("disabled", true);
43         var form = $("#form_Create").serialize();
44         $.post("/Sample/CreateSampleOrder", form,
45         function (msg) {
46             if (msg.Result == "OK") {
47                 $("#ShipDate").attr("disabled", false);
48                 $("#ReceiptDate").attr("disabled", false);
49                 $("#TrackingNumber").attr("readonly", false);
50                 $("#Note").attr("readonly", false);
51                 $("#hShipDate").val("");
52                 $("#ShipDate").val("");
53                 $("#hReceiptDate").val("");
54                 $("#ReceiptDate").val("");
55                 $("#TrackingNumber").val("");
56                 $("#Note").val("");
57                
58                 AlertMsg("SaveAll", "success", msg.Message);
59             } else{
60                 AlertMsg("SaveAll", "Failure", msg.Message);
61             }
62             $("#SaveAll").attr("disabled", false);
63             LoadOrderDetailList();
64         });
65     }
66 </script>

JavaScript Code

 1 @using System.Data;
 2 @model DataTable
 3 @if (Model != null)
 4 {
 5     if (Model.Rows.Count > 0)
 6     {
 7         foreach (DataRow item in Model.Rows)
 8         {
 9     <tr>
10         <td>
11             <a style="cursor:pointer" onclick="GetSampleOrderDetail('@item["ID"]')">Select</a>
12         </td>
13         <td>
14             @item["OrderNumber"]
15         </td>
16         <td>
17             @item["ProductName"]
18         </td>
19         <td>
20             @item["Qty"]
21         </td>
22         <td>
23             @item["Note"]
24         </td>
25         <td>
26             <a style="cursor:pointer" onclick="DelSampleOrderDetail('@item["ID"]','@item["OrderNumber"]')">Delete</a>
27         </td>
28     </tr>
29         }
30     }
31 }

_SampleOrderDetailList.cshtml

  1 <form method="post" id="form_Create">
  2 <div class="panel-body">
  3     <div class="" id="order_Detail">
  4         <div class="row">
  5             <div class="row no-gutter mt5">
  6                 <div class="col-lg-4">
  7                     <span class="inline-any mt5">Issued By:</span></div>
  8                 <div class="col-lg-8">
  9                     <input type="text" class="form-control w200 mr10" value="@Session["Account"]" name="Issued" id="Issued"
 10                         readonly="readonly"></div>
 11             </div>
 12             <div class="row no-gutter mt5">
 13                 <div class="col-lg-4">
 14                     <span class="inline-any mt5">Ship Date:</span></div>
 15                 <div class="col-lg-8">
 16                     <input type="hidden" name="hShipDate" value="" id="hShipDate">
 17                     <input type="text" class="form-control w200" onfocus="WdatePicker({lang:'en',dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'ReceiptDate\')}'})"
 18                         value="" id="ShipDate" name="ShipDate" realvalue="">
 19                 </div>
 20             </div>
 21             <div class="row no-gutter mt5">
 22                 <div class="col-lg-4">
 23                     <span class="inline-any mt5">Receipt Date:</span></div>
 24                 <div class="col-lg-8">
 25                     <input type="hidden" name="hReceiptDate" value="" id="hReceiptDate">
 26                     <input type="text" class="form-control w200" onfocus="WdatePicker({lang:'en',dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'ShipDate\')}'})"
 27                         value="" id="ReceiptDate" name="ReceiptDate" realvalue=""></div>
 28             </div>
 29             <div class="row no-gutter mt5">
 30                 <div class="col-lg-4">
 31                     <span class="inline-any mt5">Tracking Number:</span></div>
 32                 <div class="col-lg-8">
 33                     <input type="text" class="form-control w200 mr10" value="" name="TrackingNumber"
 34                         id="TrackingNumber">
 35                 </div>
 36             </div>
 37             <div class="row no-gutter mt5">
 38                 <div class="col-lg-4">
 39                     <span class="inline-any mt5">Sampl Order Note:</span></div>
 40                 <div class="col-lg-8">
 41                     <textarea class="w100p h100" id="Note" name="Note"></textarea>
 42                 </div>
 43             </div>
 44             <hr />
 45             <div class="row no-gutter mt5">
 46                 <div class="col-lg-4">
 47                     <span class="inline-any mt5">Product Name:</span></div>
 48                 <div class="col-lg-8">
 49                     <input type="text" class="form-control w200 mr10" value="" name="ProductName" id="ProductName">
 50                 </div>
 51             </div>
 52             <div class="row no-gutter mt5">
 53                 <div class="col-lg-4">
 54                     <span class="inline-any mt5">Product Qty:</span></div>
 55                 <div class="col-lg-8">
 56                     <input type="text" class="form-control w200 mr10" value="" name="Qty" id="Qty">
 57                 </div>
 58             </div>
 59             <div class="row no-gutter mt5">
 60                 <div class="col-lg-4">
 61                     <span class="inline-any mt5">Sampl Order Detail Note:</span></div>
 62                 <div class="col-lg-8">
 63                     <textarea class="w100p h100" id="dNote" name="dNote"></textarea>
 64                 </div>
 65             </div>
 66             <div class="row no-gutter mt10">
 67             </div>
 68             <div class="row no-gutter mt20">
 69                 <div class="col-lg-4">
 70                 </div>
 71                 <div class="col-lg-8">
 72                     <input type="button" value="Add to" id="AddToOrderDetail" class="btn btn-primary"
 73                         onclick="AddToOrderDetailInfo();" />
 74                 </div>
 75             </div>
 76         </div>
 77     </div>
 78 </div>
 79 </form>
 80 
 81 <table class="table table-bordered table-striped table-condensed table-hover fixheader"
 82     id="tbOrderDetailsList" style="width: auto">
 83     <thead>
 84         <tr>
 85             <th width="60">
 86                 Operate
 87             </th>
 88             <th width="50">
 89                 number
 90             </th>
 91             <th width="150">
 92                 Product Name
 93             </th>
 94             <th width="70">
 95                 Qty
 96             </th>
 97             <th width="300">
 98                 Note
 99             </th>
100         </tr>
101     </thead>
102     <tbody>
103     </tbody>
104 </table>

View Code

  1 public ActionResult CreateSampleOrder(FormCollection form)
  2 {
  3     try
  4     {
  5         if (Session["OrderDetailList"] == null)
  6         {
  7             return Json(new { Result = "Error", Message = "No data!" });
  8         }
  9         string createby = form["Issued"] != null ? form["Issued"].ToString() : string.Empty;
 10         if (createby.Trim() == string.Empty)
 11         {
 12             return Json(new { Result = "Error", Message = "Please login again!" });
 13         }
 14         string shipdate = form["ShipDate"] != null ? form["ShipDate"].ToString() : string.Empty;
 15         string hshipdate = form["hShipDate"] != null ? form["hShipDate"].ToString() : string.Empty;
 16         //if (shipdate.Trim() == string.Empty && hshipdate.Trim() == string.Empty)
 17         //{
 18         //    return Json(new { Result = "Error", Message = "Ship date cannot be empty" });
 19         //}
 20         string receiptdate = form["ReceiptDate"] != null ? form["ReceiptDate"].ToString() : string.Empty;
 21         string hreceiptdate = form["hReceiptDate"] != null ? form["hReceiptDate"].ToString() : string.Empty;
 22         //if (receiptdate.Trim() == string.Empty && hreceiptdate.Trim() == string.Empty)
 23         //{
 24         //    return Json(new { Result = "Error", Message = "Receipt date cannot be empty" });
 25         //}
 26         string trackingnumber = form["TrackingNumber"] != null ? form["TrackingNumber"].ToString() : string.Empty;
 27         //if (trackingnumber.Trim() == string.Empty)
 28         //{
 29         //    return Json(new { Result = "Error", Message = "Tracking number cannot be empty" });
 30         //}
 31         string note = form["Note"] != null ? form["Note"].ToString() : string.Empty;
 32         string sql = "";
 33         sql += @"INSERT INTO Sample_Order(ShipDate, ReceiptDate, TrackingNumber, Note, CreateDate, CreateBy)VALUES(@ShipDate, @ReceiptDate, @TrackingNumber, @Note, GETDATE(), @CreateBy);";
 34         sql += @"UPDATE Sample_Order SET OrderNumber=@@IDENTITY WHERE ID=@@IDENTITY;";
 35         sql += @"SELECT @@IDENTITY;";
 36         SqlParameter[] pars = new SqlParameter[]
 37         {
 38                 new SqlParameter("@ShipDate",IsEmptyToDBNull(hshipdate)),
 39                 new SqlParameter("@ReceiptDate",IsEmptyToDBNull(hreceiptdate)),
 40                 new SqlParameter("@TrackingNumber",trackingnumber),
 41                 new SqlParameter("@Note",note),
 42                 new SqlParameter("@CreateBy",createby)
 43         };
 44         int ordernumber = SQLHelper.ExecuteScalar(sql, pars);
 45         List<OrderDetail> list = new List<OrderDetail>();
 46         list = Session["OrderDetailList"] as List<OrderDetail>;
 47         if (ordernumber > 0)
 48         {
 49             sql = "";
 50             foreach (OrderDetail item in list)
 51             {
 52                 sql += @"INSERT INTO Sample_OrderDetail(OrderNumber, ProductName, Qty, Note)VALUES(";
 53                 sql += "N'" + ordernumber + "',";
 54                 sql += "N'" + item.ProductName + "',";
 55                 sql += "N'" + item.Qty + "',";
 56                 sql += "N'" + item.Note + "'";
 57                 sql += @")
 58 ";
 59             }
 60             if (SQLHelper.ExecuteNonQuery(sql) > 0)
 61             {
 62                 Session["OrderDetailList"] = null;
 63                 return Json(new { Result = "OK", Message = "Save all success!" });
 64             }
 65             else
 66             {
 67                 return Json(new { Result = "Error", Message = "Save all failed" });
 68             }
 69         }
 70         else
 71         {
 72             return Json(new { Result = "Error", Message = "Save all failed" });
 73         }
 74     }
 75     catch (Exception ex)
 76     {
 77         return Json(new { Result = "Error", Message = ex.Message });
 78     }
 79 }
 80 public ActionResult LoadOrderDetailList()
 81 {
 82     return PartialView("_SampleOrderDetailList");
 83 }
 84 public ActionResult AddToOrderDetail(FormCollection form)
 85 {
 86     try
 87     {
 88         string createby = form["Issued"] != null ? form["Issued"].ToString() : string.Empty;
 89         if (createby.Trim() ==