11.net网站开发（交互）：2.MVC 购物车

这一节完了之后，差不多就停止基础知识的更新了。接下来可能要做一个实例项目，用MVC或者传统.NET WEB 还不是很清楚，要做什么项目也还在考虑，反正肯定开源附加完整文档。但我需要它是以完成某种任务的形式，不然真没那么多时间……

像之前为了完成一个数据库的课程设计（需求地址：http://blog.csdn.net/wowkk/article/details/9936973），我就顺带学了MVC下的网站开发，虽然之前从没接触过网站开发，但以项目带动学习，一步一步也是能走的。

(我的新浪微博：@chen文哲http://weibo.com/u/2448939884欢迎程序员互粉，转载文章请保留本博客地址：http://blog.csdn.net/wowkk 欢迎交流^_^）

今天要讲的是里面一个购物车的例子，文章后面会带整个项目的源码。

首先是在商品列表中，点击某商品后面的“加入购物车”，会弹出对话框，输入要购买的数量，颜色，大小信息

代码：

//异步修改。异步发送多个数据到控制器（赋给控制器参数）

//这里实现异步发送要购买的商品对应的ID和数量到控制器

<script src="../../Scripts/jquery-1.4.4.js" type="text/javascript"></script>

//这里是一个jQuery UI插件
    <script src="../../Scripts/jquery.easyui.min.js" type="text/javascript"></script>

    <script src="../../Scripts/easyui-lang-zh_CN.js" type="text/javascript"></script>

    <link href="../../Content/themes/icon.css" rel="stylesheet" type="text/css" />

//Themes文件夹需要手工导入！

<script type="text/javascript">

        $(function () {

            $("#divBuy").css("display", "none");


            $(".buyLink").click(function () {

                //弹出div

                var id = $(this).attr("hidId");

                $("#divBuy").css("display", "block");


                //把值绑定到标签上（这里不知道是接收不到控制器传来的值还是赋值方式有误，总之无法实现）

                $.getJSON("/Home/GetClothesById", { bId: id }, function (data) {

                    if (data) {

                        //$("#txtClothes").val(data.Num);

                        //$("#txtCount").val("66");

                    }

                });


                $("#divBuy").dialog({

                    title: "购物车",

                    width: 500,

                    height: 400,

                    maximizable: true,

                    resizable: true,

                    modal: true,

                    border: false,

                    resizeable: true,

                    collapsible: true,

                    buttons: [{

                        text: '确定',

                        iconCls: 'icon-ok',

                        handler: function () {

                            //把控件值 取出来异步提交到后台

                            $.post("/Home/ToShopCar", { Count: $("#txtCount").val(), ClothesId: id }, function (data) {

                                if (data == "true") {

                                    alert("成功加入购物车");

                                    $("#divBuy").dialog("close");

                                }

                            });

                        }

                    }, {

                        text: '关闭',

                        handler: function () {

                            $('#divBuy').dialog('close');

                        }

                    }]

                });


                //做修改

                return false;

            });

        });

    </script>

……

<div id="divBuy">  //该标签默认是隐藏不可见的

        <table>

            <tr>

                <td>@Html.Label("txtClothes")</td>

            </tr>

            <tr>

                <td>购买数量?</td><td><input type="text" name="txtCount" id="txtCount"/></td>

            </tr>

             <tr>

                <td>大小</td><td>选择框</td>

            </tr>

            <tr>

                <td>颜色</td><td>选择框</td>

            </tr>

        </table>

    </div>

……

控制器

#region 购物车处理

        public ActionResult GetClothesById(int bId)

        {

            var buy = db.T_Clothes.Where<T_Clothes>(a => a.Id == bId).Single();

            return Json(buy, JsonRequestBehavior.AllowGet);

        }

        public ActionResult ToShopCar(T_ShopCar shopCar)

        {


            shopCar.Id = (from c in db.T_ShopCar select c.Id).Max() + 1;

            shopCar.Money = 10 * shopCar.Count;

            shopCar.UserId = 3;

            shopCar.IsDeleted = false;

            db.T_ShopCar.AddObject(shopCar);

            //db.ObjectStateManager.ChangeObjectState(branch, EntityState.Modified);

            db.SaveChanges();


            return Content("true");

        }

        #endregion

然后是购物车里面删除不想要的商品

//异步删除。异步传一个Id值到控制器

有多行数据，每行数据都有自己的ID，传对应ID到控制器

<script type="text/javascript">

        $(function () {

            $(".DeleteLink").click(function () {

                if (confirm("确定??")) {

                    var id = $(this).attr("hidId");

                    $.get("/ShopCar/Delete", "id=" + id, function (data) {

                        alert(data);

                    });

                }

                return false;

            });

        });

</script>

……

<td>@Html.ActionLink("加入购物车", "Delete", "ShopCar", new { id = @item.Id}, new { @class="DeleteLink",hidId=@item.Id})</td>

控制器

public ActionResult Delete(int id) //id就能接收到

        {

            //或者var id= Request["Id"];

//数据库删除

            return Content("删除成功");

        }

上传的项目资源：http://download.csdn.net/detail/wowkk/6038687