【ASP.NET基础】简单企业产品展示网站--产品编辑CRUD

时间：2024-01-20 19:24:10

摘要：本文记录创建一个小的、简单的产品网站的步骤。

一，搭建一个简单的产品展示网站，熟悉以下知识点：NVelocity模板引擎、Ajax无刷新页面请求，文件上传，Row_Number实现分页，ckEditor使用，Bootstrap的简单使用。【点击查看网站效果】

二，网站基本框架：新建项目ProductWeb ，并完成基本框架的搭建（SQLHelper,ckEditor,Common_Nvelocity,Bootstrap等添加到项目中）。并创建ProductWebDB 。【下载基本模板框架】

【ASP.NET基础】简单企业产品展示网站--产品编辑CRUD

三，在基本模板的基础上，添加后台 产品列表页面（ProductList_Admin.html）

　　A,新增数据库： ProduceWebDB 并新建表ProCategories、Products

USE [ProduceWebDB]

GO

/****** Object:  Table [dbo].[ProCategories]    Script Date: 2015/6/2 15:54:49 ******/

SET ANSI_NULLS ON

GO

SET QUOTED_IDENTIFIER ON

GO

SET ANSI_PADDING ON

GO

CREATE TABLE [dbo].[ProCategories](

    [CateID] [decimal](, ) IDENTITY(,) NOT NULL,

    [CateName] [varchar]() NOT NULL

) ON [PRIMARY]

GO

SET ANSI_PADDING OFF

GO

/****** Object:  Table [dbo].[Products]    Script Date: 2015/6/2 15:54:50 ******/

SET ANSI_NULLS ON

GO

SET QUOTED_IDENTIFIER ON

GO

CREATE TABLE [dbo].[Products](

    [ProID] [decimal](, ) IDENTITY(,) NOT NULL,

    [ProName] [nvarchar]() NOT NULL,

    [ProImagePath] [nvarchar](max) NOT NULL,

    [ProIntroduce] [text] NOT NULL,

    [ProCateID] [bigint] NOT NULL,

    [AddTime] [datetime] NULL,

    [AddIP] [nchar]() NULL,

    [IsDelete] [bit] NOT NULL

) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO

ALTER TABLE [dbo].[Products] ADD  CONSTRAINT [DF_Products_CreateTime]  DEFAULT (getdate()) FOR [AddTime]

GO

ALTER TABLE [dbo].[Products] ADD  CONSTRAINT [DF_Products_IsDelete]  DEFAULT (()) FOR [IsDelete]

GO

　　B,项目新增ProductList_Admin.ashx一般处理程序 ， 在Templates/Admin下添加对应的 ProductList_Admin.html 页面 ,在后台显示产品列表。

Templates/Admin/Head.html: 相当于模板页的页头部分，用Bootstrap导航组件 其他页面通过#parse("Head.html")调用

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html;" charset="gb2312" />

    <!-- 这个属性主要是设置浏览器优先使用什么模式来渲染页面的-->

    <!-- #下面的meta标签告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。  -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!--移动设备都是这Viewport里面打开，width=device-width表示打开页面默认和设备一致，initial-scale=1表示页面不进行缩放   -->

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>后台管理</title>

    <!-- Bootstrap -->

    <!--<link href="css/bootstrap.min.css" rel="stylesheet"/>-->

    <!-- 新 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" />

    <!--低版本浏览器如果支持HTML5需要添加以下js-->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE ]>

      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="http://cdn.bootcss .com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

    <!--鼠标悬停弹出下拉菜单-->

    <style type="text/css">

        .navbar .nav > li .dropdown-menu {

            margin: ;

        }

        .navbar .nav > li:hover .dropdown-menu {

            display: block;

        }

        .navbar .nav > li .dropdown-menu > li:hover {

            font-size: larger;

        }

    </style>

</head>

<body>

    <!-- --导航条  默认高度50px, 固定在顶部 -->

    <nav class="navbar navbar-default .navbar-fixed-top">

        <div class="container-fluid">

            <!-- Brand and toggle get grouped for better mobile display -->

            <div class="navbar-header">

                <!--当浏览器宽度变窄的时候会显示这个Button按钮，并且会把data-target中的div中ul收缩导航到Button下方-->

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

                    <!--定义小按钮的样式-->

                    <span class="sr-only">Toggle navigation</span>

                    <!-- 页面变窄时 ， 按钮的3条横线 -->

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <!--Logo位置-->

                <a class="navbar-brand" href="http://www.cnblogs.com/chengzish/">后台管理</a>

            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav">

                    <!--导航条内容-->

                    <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>

                    <li><a href="#">成功案例编辑</a></li>

                    <li><a href="#">新闻活动编辑</a></li>

                    <li class="dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">服务编辑<span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">

                            <li><a href="#">软件定制编辑</a></li>

                            <li class="divider"></li>

                            <li><a href="#">外包服务编辑</a></li>

                            <li class="divider"></li>

                            <li><a href="#">咨询服务编辑</a></li>

                        </ul>

                    </li>

                    <li class="dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">OA系统解决方案编辑<span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">

                            <li><a href="#">员工考勤系统编辑</a></li>

                            <li class="divider"></li>

                            <li><a href="#">薪资结算系统编辑</a></li>

                            <li class="divider"></li>

                            <li><a href="#">门禁管理系统编辑</a></li>

                            <li class="divider"></li>

                            <li><a href="#">APP开发编辑</a></li>

                        </ul>

                    </li>

                </ul>

                <!--搜索表单-->

                <form class="navbar-form navbar-left" role="search">

                    <div class="form-group">

                        <input type="text" class="form-control" placeholder="Search" />

                    </div>

                    <button type="submit" class="btn btn-default">搜索</button>

                </form>

                <ul class="nav navbar-nav navbar-right">

                    <li><a href="#">Git Fork</a></li>

                    <li class="dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">联系我们编辑<span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">

                            <li><a href="#">地址</a></li>

                            <li><a href="#">电话</a></li>

                            <li><a href="#">邮箱</a></li>

                            <li class="divider"></li>

                            <li><a href="#">微信</a></li>

                        </ul>

                    </li>

                </ul>

            </div>

            <!-- /.navbar-collapse -->

        </div>

        <!-- /.container-fluid -->

    </nav>

Templates/Admin/Foot.html: 相当于模板页的页头部分，标注版权信息，其他页面通过#parse("Foot.html")

<div id="footer" class="container">

    <nav class="navbar navbar-default navbar-fixed-bottom">

        <div class="navbar-inner navbar-content-center">

            <p class="text-muted credit" style="padding: 10px; text-align: center">

                Copyright @- By 橙子科技 All Rights Reserved.

            </p>

        </div>

    </nav>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<!-- Bootstrap核心js依赖于jQuery,所以要先引用jQuery-->

<!-- Include all compiled plugins (below), or include individual files as needed -->

<!-- <script src="js/bootstrap.min.js"></script>-->

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>

</html>

Templates/Admin/ProductList_Admin.html:  产品列表展示页面，遍历显示产品数据

#parse("Admin/Head.html")

    <h2>产品列表维护</h2>

<div style="width: 70%; text-align: center; margin-left: 15%;">

    <table class="table table-striped table-bordered table-hover">

        <tr>

            <td>产品名称</td>

            <td>产品类别</td>

            <td>编辑</td>

            <td>删除</td>

        </tr>

        #foreach($Pro in $data.Products)

            <tr>

                <td>$Pro.ProName</td>

                <td>$Pro.CateName />

                </td>

                <td><a href="ProductEdit.html?action=edit&id=$Pro.ProID">编辑</a></td>

                <td><a href="ProductEdit.html?action=delete&id=$Pro.ProID">删除</a></td>

            </tr>

        #end

    </table>

</div>

#parse("Admin/Foot.html")

ProductList_Admin.ashx: 从数据库中读取产品信息 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

namespace ProductWeb

{

    /// <summary>

    /// ProductList_Admin 后台显示产品列表

    /// </summary>

    public class ProductList_Admin : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/html";

            //从DB中选出产品信息

            string sql = "SELECT [ProID],[ProName],[ProImagePath],[ProIntroduce],b.[CateName] as CateName  FROM [dbo].[Products]  as a left join [dbo].[ProCategories] as b on a.ProCateID=b.CateID ";

            SQLHelper sqlH = new SQLHelper();

            DataTable dt = sqlH.ExecuteQuery(sql, CommandType.Text);

            var data = new { PageTitle = "产品列表", Products = dt.Rows };

            string strHtml = Common_Nvelocity.RenderHTML("Admin/ProductList_Admin.html", data);

            context.Response.Write(strHtml);

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

C,Ctrl+F5运行程序，查看 ProductList_Admin.ashx 读出了DB中的数据：

【ASP.NET基础】简单企业产品展示网站--产品编辑CRUD

四，添加产品编辑页面（ProductEdit.html）点击ProductList_Admin.html中的“编辑”跳转到ProductEdit.html编辑页面.

　　PorductEdit.ashx根据传递过来的Action(edit,delete,addnew)进行编辑、删除、新增操作。

　　A, 更新webconfig允许写入 html 标签

<system.web>

    <compilation debug="true" targetFramework="4.0" />

    <httpRuntime requestValidationMode="2.0"/>

  </system.web>

　　B, 添加ProductEdit.html 页面 (1,三个隐藏控件分别记录当前页面是否是首次加载，点击“保存”按钮需要执行的操作，传递过来的id的值 2, 注意下拉列表的实现)

#parse("Admin/Head.html")

<script src="../../ckeditor/ckeditor.js"></script>

<div style="width: 70%; text-align: left; margin-left: 15%;">

    #if($data.ActionEdit=="edit")

         <h2 class="text-center">产品编辑</h2>

    #elseif ($data.ActionEdit=="delete")

         <h2 class="text-center">产品删除 </h2>

    #elseif ($data.ActionEdit=="addnew")

         <h2 class="text-center">产品新增</h2>

    #end

    <form method="post" action="ProductEdit.ashx">

        <!--三个隐藏，IspostBack 记录页面是否首次加载，action 记录提交按钮后是需要新增还是编辑,txtProIDHiddden 隐藏当前编辑的id  -->

        <input type="hidden" name="IsPostBack" value="true" />

        <input type="hidden" name="txtaction" value="$data.ActionEdit" />

        <input type="hidden" name="txtProIDHiddden" value="$data.Product.ProID" />

        <table class="table table-striped table-bordered">

            <tr>

                <td>产品名称：</td>

                <td>

                    <input type="text" name="txtProName" value="$data.Product.ProName" /></td>

            </tr>

            <tr>

                <td>产品分类：</td>

                <td>

                    <select name="txtProCateID">

                        #foreach($cate in $data.Categories)

                        #if($cate.CateID==$data.Product.ProCateID)

                            <option value="$cate.CateID" selected="selected">$cate.CateName</option>

                        #else

                           <option value="$cate.CateID">$cate.CateName</option>

                        #end

                    #end

                    </select>

                </td>

            </tr>

            <tr>

                <td>产品图片：</td>

                <td>

                    <img id="ProImg" src="$data.Product.ProImagePath" class="img-rounded" /></td>

            </tr>

            <tr>

                <td>产品介绍：</td>

                <td>

                    <textarea id="idProIntroduce" name="txtProIntroduce">$data.Product.ProIntroduce </textarea>

                </td>

            </tr>

            <tr>

                <td colspan="" style="text-align: center">

                    <input type="submit" value="保存" class="btn btn-primary" />

                    <a href="ProductList_Admin.ashx" class="btn btn-default">返回</a>

                </td>

            </tr>

        </table>

    </form>

    <div style="width: 70%; text-align: center; margin-left: 15%;">

        <script type="text/javascript">

            var txtIntro = document.getElementById("idProIntroduce");

            CKEDITOR.replace(txtIntro);

        </script>

#parse("Admin/Foot.html")

　　C, 添加ProductEdit.ashx 处理新增、编辑、删除操作，并把数据交给Nvelocity模板从而加载到前台页面

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

using System.Data.SqlClient;

namespace ProductWeb

{

    /// <summary>

    /// ProductEdit Product编辑页面

    /// </summary>

    public class ProductEdit : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/html";

            string strHtml = "";

            string sqlCates = "SELECT [CateID],[CateName] FROM [dbo].[ProCategories]";

            SQLHelper sqlH = new SQLHelper();

            DataTable dtCates = sqlH.ExecuteQuery(sqlCates, CommandType.Text);

            //[ProID],[ProName],[ProImagePath],[ProIntroduce],[ProCateID],b.[CateName] as CateName,b.[CateID] as CateID  FROM [Products]  as a left join [ProCategories] as b on a.ProCateID=b.CateID and a.ProID=@strProID ";     //

            ////定义Product,并给一个默认的控制

            var ProductOriginal = new { ProID = , ProName = "", ProImagePath = "", ProIntroduce = "", CateName = "", CateID = "" };

            //页面首次加载 , 显示Product信息

            if (string.IsNullOrEmpty(context.Request.Form["IsPostBack"]) == true)

            {

                string strProID = context.Request.QueryString["id"];   // 点击 编辑 按钮，传递过来 action 和 id值

                string strAction = context.Request.QueryString["action"] == null ? "" : context.Request.QueryString["action"].ToString().ToLower(); //  点击保存后，具体是 edit、 delte还是 add，  保存在页面的隐藏控件中

                string strPageTitle = "产品操作";  //default

                if (!string.IsNullOrEmpty(strProID))   // id 存在

                {

                    //从DB中选出 id 对应的Product 信息

                    SqlParameter[] sqlParas = new SqlParameter[] {

                        new SqlParameter("@strProID",strProID)

                    };

                    if (strAction == "edit")

                    {

                        strPageTitle = "产品编辑";

                    }

                    else if (strAction == "delete")

                    {

                        strPageTitle = "产品删除";

                    }

                    else if (strAction == "addnew")

                    {

                        strPageTitle = "产品新增";

                    }

                    //选择出ID对应的Product

                    DataTable dtPro = dtGetProductByID(strProID);

                    int numExist = ;

                    numExist = dtPro.Rows.Count;

                    if (numExist > )

                    {

                        // 产品存在,显示产品信息

                        var data = new { PageTitle = strPageTitle, Categories = dtCates.Rows, Product = dtPro.Rows[], ActionEdit = strAction };

                        strHtml = Common_Nvelocity.RenderHTML("Admin/ProductEdit.html", data);

                    }

                    else

                    {

                        // 不存在,显示编辑页面

                        var data = new { PageTitle = strPageTitle, Categories = dtCates.Rows, Product = ProductOriginal, ActionEdit = strAction };

                        strHtml = Common_Nvelocity.RenderHTML("Admin/ProductEdit.html", data);

                    }

                }

                else

                {

                    //显示编辑页面

                    var data = new { PageTitle = strPageTitle, Categories = dtCates.Rows, Product = ProductOriginal, ActionEdit = strAction };

                    strHtml = Common_Nvelocity.RenderHTML("Admin/ProductEdit.html", data);

                }

            }

            //点击了 submit 按钮，根据传递过来的action进行操作 update/delete

            else

            {

                string strAction = context.Request.Form["txtaction"];

                if (!string.IsNullOrEmpty(strAction))

                {

                    string strInfo = "";

                    if (strAction == "edit")

                    {

                        string strProID = context.Request.Form["txtProIDHiddden"];

                        string strProName = context.Request.Form["txtProName"];

                        string strProCateID = context.Request.Form["txtProCateID"];

                        //string strProImagePath = context.Request.Form["strProImgPath"];

                        string strProIntroduce = context.Request.Form["txtProIntroduce"];

                        //选择出ID对应的Product

                        DataTable dtPro = dtGetProductByID(strProID);

                        int numExist = ;

                        numExist = dtPro.Rows.Count;

                        if (numExist > )

                        {

                            //update

                            string sqlUpdate = "update [Products] set [ProName]=@ProName,[ProIntroduce]=@ProIntroduce,[ProCateID]=@ProCateID where [IsDelete]=0 and [ProID]=@ProID ";

                            SqlParameter[] sqlParas = new SqlParameter[] {

                                new SqlParameter("@ProName",strProName),

                                new SqlParameter("@ProCateID",strProCateID),

                                new SqlParameter("@ProIntroduce",strProIntroduce),

                                new SqlParameter("@ProID",strProID)

                            };

                            int numSuccUpd = ;

                            numSuccUpd = sqlH.ExecuteNonQuery(sqlUpdate, sqlParas, CommandType.Text);

                            if (numSuccUpd > )

                            {

                                strInfo = "更新成功";

                                DataTable dtProNew = dtGetProductByID(strProID);

                                var data = new { PageTitle = "产品编辑", Categories = dtCates.Rows, Product = dtProNew.Rows[], ActionEdit = strAction, InfoMeg = strInfo };

                                strHtml = Common_Nvelocity.RenderHTML("Admin/ProductEdit.html", data);

                            }

                            else

                            {

                                strInfo = "更新失败";

                                DataTable dtProNew = dtGetProductByID(strProID);

                                var data = new { PageTitle = "产品编辑", Categories = dtCates.Rows, Product = dtProNew.Rows[], ActionEdit = strAction, InfoMeg = strInfo };

                                strHtml = Common_Nvelocity.RenderHTML("Admin/ProductEdit.html", data);

                            }

                        }

                    }

                    else if (strAction == "delete")

                    {

                        string strProID = context.Request.Form["txtProIDHiddden"];

                        //选择出ID对应的Product

                        DataTable dtPro = dtGetProductByID(strProID);

                        int numExist = ;

                        numExist = dtPro.Rows.Count;

                        if (numExist > )

                        {

                            string sqlUpdate = "update [Products] set [IsDelete]=1  where  [ProID]=@ProID ";

                            SqlParameter[] sqlParas = new SqlParameter[] {

                                new SqlParameter("@ProID",strProID)

                            };

                            int numSuccUpd = ;

                            numSuccUpd = sqlH.ExecuteNonQuery(sqlUpdate, sqlParas, CommandType.Text);

                            if (numSuccUpd > )

                            {

                                strInfo = "删除成功";

                                context.Response.Redirect("productlist_admin.ashx");

                            }

                            else

                            {

                                DataTable dtProNew = dtGetProductByID(strProID);

                                var data = new { PageTitle = "产品删除", Categories = dtCates.Rows, Product = dtProNew.Rows[], ActionEdit = strAction, InfoMeg = strInfo };

                                strHtml = Common_Nvelocity.RenderHTML("Admin/ProductEdit.html", data);

                            }

                        }

                    }

                    else if (strAction == "addnew")

                    {

                        //写入数据库

                        string strProName = context.Request.Form["txtProName"];

                        string strProCateID = context.Request.Form["txtProCateID"];

                        string strProImagePath = "updloadFiles/3.jpg";

                        string strProIntroduce = context.Request.Form["txtProIntroduce"];

                        if (string.IsNullOrEmpty(strProName) || string.IsNullOrEmpty(strProCateID) || string.IsNullOrEmpty(strProIntroduce))

                        {

                            strInfo = "不允许为空";

                            var data = new { PageTitle = "产品新增", Categories = dtCates.Rows, Product = ProductOriginal, MesgInfo = strInfo };

                            strHtml = Common_Nvelocity.RenderHTML("Admin/ProductEdit.html", data);

                        }

                        else

                        {

                            string sqlInsert = "  insert into [Products]([ProName],[ProCateID],[ProIntroduce],[ProImagePath]) values(@ProName,@ProCateID,@ProIntroduce,@ProImagePath) ";

                            SqlParameter[] sqlParas = new SqlParameter[] {

                                new SqlParameter("@ProName",strProName),

                                new SqlParameter("@ProCateID",strProCateID),

                                new SqlParameter("@ProIntroduce",strProIntroduce),

                                 new SqlParameter("@ProImagePath",strProImagePath)

                            };

                            int numSucc = sqlH.ExecuteNonQuery(sqlInsert, sqlParas, CommandType.Text);

                            if (numSucc == )

                            {

                                strInfo = "添加成功";

                                context.Response.Redirect("productlist_admin.ashx");

                            }

                            else

                            {

                                strInfo = "添加失败";

                                var data = new { PageTitle = "产品新增", Categories = dtCates.Rows, Product = ProductOriginal, MesgInfo = strInfo };

                                strHtml = Common_Nvelocity.RenderHTML("Admin/ProductEdit.html", data);

                            }

                        }

                    }

                }

                else

                {

                    var data = new { PageTitle = "产品编辑", Categories = dtCates.Rows, Product = ProductOriginal, MesgInfo = "" };

                    strHtml = Common_Nvelocity.RenderHTML("Admin/ProductEdit.html", data);

                }

            }

            context.Response.Write(strHtml);

        }

        public DataTable dtGetProductByID(string strProID)

        {

            SQLHelper sqlH = new SQLHelper();

            //选择出ID对应的Product

            string sqlPro = "SELECT [ProID],[ProName],[ProImagePath],[ProIntroduce],[ProCateID],b.[CateName] as CateName,b.[CateID] as CateID  FROM [Products]  as a left join [ProCategories] as b on a.ProCateID=b.CateID where [IsDelete]=0 and a.ProID=@ProID ";

            SqlParameter[] sqlParas = new SqlParameter[] {

                                     new SqlParameter("@ProID", strProID)

                                };

            DataTable dtPro = sqlH.ExecuteQuery(sqlPro, sqlParas, CommandType.Text);

            return dtPro;

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

---------------------------------------------------实现效果： 新增 AddNew---------------------------------------------------

【ASP.NET基础】简单企业产品展示网站--产品编辑CRUD

----------------------------------------------------实现效果：  编辑 Edit-------------------------------------------------------

【ASP.NET基础】简单企业产品展示网站--产品编辑CRUD

----------------------------------------------------实现效果：  删除 Delete-----------------------------------------------------

【ASP.NET基础】简单企业产品展示网站--产品编辑CRUD

五，实现图片上传和分页 （知识点：1，From表单设置enctype属性 2，文件上传并SaveAs到Server.MapPath  3，Row_Number()进行分页）

　　A，分别更新ProductEdit.html和ProductEdit.ashx 实现图片的上传和更新（图片存储在服务器，图片名称存储DB）

Templates/Admin/ProductEdit.html:  Form表单添加enctype="multipart/form-data"属性 ，图片src读取图片路径

#parse("Admin/Head.html")

<script src="../../ckeditor/ckeditor.js"></script>

<div style="width: 70%; text-align: left; margin-left: 15%;">

    #if($data.ActionEdit=="edit")

         <h2 class="text-center">产品编辑</h2>

    #elseif ($data.ActionEdit=="delete")

         <h2 class="text-center">产品删除 </h2>

    #elseif ($data.ActionEdit=="addnew")

         <h2 class="text-center">产品新增</h2>

    #end

    <form method="post" action="ProductEdit.ashx" enctype="multipart/form-data">

        <!--三个隐藏，IspostBack 记录页面是否首次加载，action 记录提交按钮后是需要新增还是编辑,txtProIDHiddden 隐藏当前编辑的id  -->

        <input type="hidden" name="IsPostBack" value="true" />

        <input type="hidden" name="txtaction" value="$data.ActionEdit" />

        <input type="hidden" name="txtProIDHiddden" value="$data.Product.ProID" />

        <table class="table table-striped table-bordered">

            <tr>

                <td>产品名称：</td>

                <td>

                    <input type="text" name="txtProName" value="$data.Product.ProName" /></td>

            </tr>

            <tr>

                <td>产品分类：</td>

                <td>

                    <select name="txtProCateID">

                        #foreach($cate in $data.Categories)

                        #if($cate.CateID==$data.Product.ProCateID)

                            <option value="$cate.CateID" selected="selected">$cate.CateName</option>

                        #else

                           <option value="$cate.CateID">$cate.CateName</option>

                        #end

                    #end

                    </select>

                </td>

            </tr>

            <tr>

                <td>产品图片：</td>

                <td>#if ($data.ActionEdit=="addnew")

                    <input type="file" name="ProductImage" value="上传图片" />

                    #else

                    <img id="ProImg" src="../../uploadFiels/$data.Product.ProImagePath" class="img-rounded" style="width: 40px; height: 40px" />

                    <input type="file" name="ProductImage" value="更新图片" />

                    #end

                </td>

            </tr>

            <tr>

                <td>产品介绍：</td>

                <td>

                    <textarea id="idProIntroduce" name="txtProIntroduce">$data.Product.ProIntroduce </textarea>

                </td>

            </tr>

            <tr>

                <td colspan="" style="text-align: center">

                    <input type="submit" value="保存" class="btn btn-primary" />

                    <a href="ProductList_Admin.ashx" class="btn btn-default">返回</a>

                </td>

            </tr>

        </table>

    </form>

    <br />

    <br />

    <br />

    <script type="text/javascript">

        var txtIntro = document.getElementById("idProIntroduce");

        CKEDITOR.replace(txtIntro);

    </script>

#parse("Admin/Foot.html")

ProductEdit.ashx:   实现图片保存到uploadfiles文件夹，图片名称保存到DB

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

using System.Data.SqlClient;

using System.IO;

namespace ProductWeb

{

    /// <summary>

    /// ProductEdit Product编辑页面

    /// </summary>

    public class ProductEdit : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/html";

            string strHtml = "";

            string sqlCates = "SELECT [CateID],[CateName] FROM [dbo].[ProCategories]";

            SQLHelper sqlH = new SQLHelper();

            DataTable dtCates = sqlH.ExecuteQuery(sqlCates, CommandType.Text);

            //[ProID],[ProName],[ProImagePath],[ProIntroduce],[ProCateID],b.[CateName] as CateName,b.[CateID] as CateID  FROM [Products]  as a left join [ProCategories] as b on a.ProCateID=b.CateID and a.ProID=@strProID ";     //

            ////定义Product,并给一个默认的控制

            var ProductOriginal = new { ProID = , ProName = "", ProImagePath = "", ProIntroduce = "", CateName = "", CateID = "" };

            //页面首次加载 , 显示Product信息

            if (string.IsNullOrEmpty(context.Request.Form["IsPostBack"]) == true)

            {

                string strProID = context.Request.QueryString["id"];   // 点击 编辑 按钮，传递过来 action 和 id值

                string strAction = context.Request.QueryString["action"] == null ? "" : context.Request.QueryString["action"].ToString().ToLower(); //  点击保存后，具体是 edit、 delte还是 add，  保存在页面的隐藏控件中

                string strPageTitle = "产品操作";  //default

                if (!string.IsNullOrEmpty(strProID))   // id 存在

                {

                    //从DB中选出 id 对应的Product 信息

                    SqlParameter[] sqlParas = new SqlParameter[] {

                        new SqlParameter("@strProID",strProID)

                    };

                    if (strAction == "edit")

                    {

                        strPageTitle = "产品编辑";

                    }

                    else if (strAction == "delete")

                    {

                        strPageTitle = "产品删除";

                    }

                    else if (strAction == "addnew")

                    {

                        strPageTitle = "产品新增";

                    }

                    //选择出ID对应的Product

                    DataTable dtPro = dtGetProductByID(strProID);

                    int numExist = ;

                    numExist = dtPro.Rows.Count;

                    if (numExist > )

                    {

                        // 产品存在,显示产品信息

                        var data = new { PageTitle = strPageTitle, Categories = dtCates.Rows, Product = dtPro.Rows[], ActionEdit = strAction };

                        strHtml = Common_Nvelocity.RenderHTML("Admin/ProductEdit.html", data);

                    }

                    else

                    {

                        // 不存在,显示编辑页面

                        var data = new { PageTitle = strPageTitle, Categories = dtCates.Rows, Product = ProductOriginal, ActionEdit = strAction };

                        strHtml = Common_Nvelocity.RenderHTML("Admin/ProductEdit.html", data);

                    }

                }

                else

                {

                    //显示编辑页面

                    var data = new { PageTitle = strPageTitle, Categories = dtCates.Rows, Product = ProductOriginal, ActionEdit = strAction };

                    strHtml = Common_Nvelocity.RenderHTML("Admin/ProductEdit.html", data);

                }

            }

            //点击了 submit 按钮，根据传递过来的action进行操作 update/delete

            else

            {

                string strAction = context.Request.Form["txtaction"];

                if (!string.IsNullOrEmpty(strAction))

                {

                    string strInfo = "";

                    if (strAction == "edit")

                    {

                        string strProID = context.Request.Form["txtProIDHiddden"];

                        string strProName = context.Request.Form["txtProName"];

                        string strProCateID = context.Request.Form["txtProCateID"];

                        string strProImageName = ""; //文件名

                        string strProIntroduce = context.Request.Form["txtProIntroduce"];

                        //选择出ID对应的Product

                        DataTable dtPro = dtGetProductByID(strProID);

                        int numExist = ;

                        numExist = dtPro.Rows.Count;

                        if (numExist > )

                        {

                            //上传文件

                            HttpPostedFile proImg = context.Request.Files["ProductImage"];  //获得客户端上传图片信息

                            string imgServerPath = context.Server.MapPath("~/uploadFiels/"); //项目中 uploadFiles路径

                            string strTimeNow = DateTime.Now.ToString("yyyyMMddHHmmssfff");

                            strProImageName = strTimeNow + Path.GetExtension(proImg.FileName);

                            if ((Path.GetExtension(proImg.FileName) == ".jpg" || Path.GetExtension(proImg.FileName) == ".png") && proImg.ContentLength < )

                            {

                                proImg.SaveAs(imgServerPath + strProImageName);       //上传

                            }

                            //update DB

                            string sqlUpdate = "update [Products] set [ProName]=@ProName,[ProIntroduce]=@ProIntroduce,[ProCateID]=@ProCateID,[ProImagePath]=@ProImagePath where [IsDelete]=0 and [ProID]=@ProID ";

                            SqlParameter[] sqlParas = new SqlParameter[] {

                                new SqlParameter("@ProName",strProName),

                                new SqlParameter("@ProCateID",strProCateID),

                                new SqlParameter("@ProIntroduce",strProIntroduce),

                                new SqlParameter("@ProID",strProID),

                                new SqlParameter("@ProImagePath",strProImageName)

                            };

                            int numSuccUpd = ;

                            numSuccUpd = sqlH.ExecuteNonQuery(sqlUpdate, sqlParas, CommandType.Text);

                            if (numSuccUpd > )

                            {

                                strInfo = "更新成功";

                                DataTable dtProNew = dtGetProductByID(strProID);

                                var data = new { PageTitle = "产品编辑", Categories = dtCates.Rows, Product = dtProNew.Rows[], ActionEdit = strAction, InfoMeg = strInfo };

                                strHtml = Common_Nvelocity.RenderHTML("Admin/ProductEdit.html", data);

                            }

                            else

                            {

                                strInfo = "更新失败";

                                DataTable dtProNew = dtGetProductByID(strProID);

                                var data = new { PageTitle = "产品编辑", Categories = dtCates.Rows, Product = dtProNew.Rows[], ActionEdit = strAction, InfoMeg = strInfo };

                                strHtml = Common_Nvelocity.RenderHTML("Admin/ProductEdit.html", data);

                            }

                        }

                    }

                    else if (strAction == "delete")

                    {

                        string strProID = context.Request.Form["txtProIDHiddden"];

                        //选择出ID对应的Product

                        DataTable dtPro = dtGetProductByID(strProID);

                        int numExist = ;

                        numExist = dtPro.Rows.Count;

                        if (numExist > )

                        {

                            string sqlUpdate = "update [Products] set [IsDelete]=1  where  [ProID]=@ProID ";

                            SqlParameter[] sqlParas = new SqlParameter[] {

                                new SqlParameter("@ProID",strProID)

                            };

                            int numSuccUpd = ;

                            numSuccUpd = sqlH.ExecuteNonQuery(sqlUpdate, sqlParas, CommandType.Text);

                            if (numSuccUpd > )

                            {

                                strInfo = "删除成功";

                                context.Response.Redirect("productlist_admin.ashx");

                            }

                            else

                            {

                                DataTable dtProNew = dtGetProductByID(strProID);

                                var data = new { PageTitle = "产品删除", Categories = dtCates.Rows, Product = dtProNew.Rows[], ActionEdit = strAction, InfoMeg = strInfo };

                                strHtml = Common_Nvelocity.RenderHTML("Admin/ProductEdit.html", data);

                            }

                        }

                    }

                    else if (strAction == "addnew")

                    {

                        //写入数据库

                        string strProName = context.Request.Form["txtProName"];

                        string strProCateID = context.Request.Form["txtProCateID"];

                        string strProImageName = "";

                        string strProIntroduce = context.Request.Form["txtProIntroduce"];

                        if (string.IsNullOrEmpty(strProName) || string.IsNullOrEmpty(strProCateID) || string.IsNullOrEmpty(strProIntroduce))

                        {

                            strInfo = "不允许为空";

                            var data = new { PageTitle = "产品新增", Categories = dtCates.Rows, Product = ProductOriginal, MesgInfo = strInfo };

                            strHtml = Common_Nvelocity.RenderHTML("Admin/ProductEdit.html", data);

                        }

                        else

                        {

                            //上传文件

                            HttpPostedFile proImg = context.Request.Files["ProductImage"];  //获得客户端上传图片信息

                            string imgServerPath = context.Server.MapPath("~/uploadFiels/"); //项目中 uploadFiles路径

                            string strTimeNow = DateTime.Now.ToString("yyyyMMddHHmmssfff");

                            strProImageName = strTimeNow + Path.GetExtension(proImg.FileName);

                            if ((Path.GetExtension(proImg.FileName) == ".jpg" || Path.GetExtension(proImg.FileName) == ".png") && proImg.ContentLength < )

                            {

                                proImg.SaveAs(imgServerPath + strProImageName);       //上传

                            }

                            // Insert DB

                            string sqlInsert = "  insert into [Products]([ProName],[ProCateID],[ProIntroduce],[ProImagePath]) values(@ProName,@ProCateID,@ProIntroduce,@ProImagePath) ";

                            SqlParameter[] sqlParas = new SqlParameter[] {

                                new SqlParameter("@ProName",strProName),

                                new SqlParameter("@ProCateID",strProCateID),

                                new SqlParameter("@ProIntroduce",strProIntroduce),

                                new SqlParameter("@ProImagePath",strProImageName)

                            };

                            int numSucc = sqlH.ExecuteNonQuery(sqlInsert, sqlParas, CommandType.Text);

                            if (numSucc == )

                            {

                                strInfo = "添加成功";

                                context.Response.Redirect("productlist_admin.ashx");

                            }

                            else

                            {

                                strInfo = "添加失败";

                                var data = new { PageTitle = "产品新增", Categories = dtCates.Rows, Product = ProductOriginal, MesgInfo = strInfo };

                                strHtml = Common_Nvelocity.RenderHTML("Admin/ProductEdit.html", data);

                            }

                        }

                    }

                }

                else

                {

                    var data = new { PageTitle = "产品编辑", Categories = dtCates.Rows, Product = ProductOriginal, MesgInfo = "" };

                    strHtml = Common_Nvelocity.RenderHTML("Admin/ProductEdit.html", data);

                }

            }

            context.Response.Write(strHtml);

        }

        // Query Product By ID

        public DataTable dtGetProductByID(string strProID)

        {

            SQLHelper sqlH = new SQLHelper();

            //选择出ID对应的Product

            string sqlPro = "SELECT [ProID],[ProName],[ProImagePath],[ProIntroduce],[ProCateID],b.[CateName] as CateName,b.[CateID] as CateID  FROM [Products]  as a left join [ProCategories] as b on a.ProCateID=b.CateID where [IsDelete]=0 and a.ProID=@ProID ";

            SqlParameter[] sqlParas = new SqlParameter[] {

                                     new SqlParameter("@ProID", strProID)

                                };

            DataTable dtPro = sqlH.ExecuteQuery(sqlPro, sqlParas, CommandType.Text);

            return dtPro;

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

--------------------------图片上传-效果--------------------------------------------

【ASP.NET基础】简单企业产品展示网站--产品编辑CRUD

　　B，借助SQL的Row_Number方法进行分页， 前台页面传入页码到后台，然后查询对应页码的数据。（1，Row_Number 2，页码计算 3，根据当前页面把上一页、下一页禁用）

　　　　分别更新ProductList_Admin.html  和 ProductList_Admin.ashx页面：

Templates/Admin/ProductList_Admin.html    调用Bootstrap分页组件

#parse("Admin/Head.html")

<h2 class="text-center">产品列表维护</h2>

<div style="width: 70%; text-align: center; margin-left: 15%;">

    <table class="table table-striped table-bordered table-hover">

        <tr style="font-weight: bolder">

            <td>产品名称</td>

            <td>产品类别</td>

            <td>编辑</td>

            <td>删除</td>

        </tr>

        #foreach($Pro in $data.Products)

            <tr>

                <td>$Pro.ProName</td>

                <td>$Pro.CateName</td>

                <td><a href="ProductEdit.ashx?action=edit&id=$Pro.ProID">编辑</a></td>

                <td><a href="ProductEdit.ashx?action=delete&id=$Pro.ProID">删除</a></td>

            </tr>

        #end

        <tr>

            <td colspan="" class="text-center">

                <nav>

                    <ul class="pagination">

                        #if($data.PageBeforeNext.PageBefore==0)

                        <li class="disabled">

                        #else

                        <li>#end

                            <a href="Productlist_admin.ashx?Page=$data.PageBeforeNext.PageBefore" aria-label="Previous">

                                <span aria-hidden="true">&laquo;</span>

                            </a>

                        </li>

                        #foreach($pageHref in $data.PageData)

                          <li><a href="$pageHref.Href">$pageHref.Title</a></li>

                        #end

                        #if($data.PageBeforeNext.PageNext>=$data.PageNums)

                        <li class="disabled">

                        #else

                        <li>#end

                            <a href="Productlist_admin.ashx?Page=$data.PageBeforeNext.PageNext" aria-label="Next">

                                <span aria-hidden="true">&raquo;</span>

                            </a>

                        </li>

                        <li><a>共$data.PageNums页</a></li>

                    </ul>

                </nav>

            </td>

        </tr>

        <tr>

            <td colspan="" class="text-center">

                <a href="ProductEdit.ashx?action=AddNew" class="btn btn-default">新增</a></td>

        </tr>

    </table>

</div>

#parse("Admin/Foot.html")

ProductList_Admin.ashx： 1,页数计算，理解Row_Number分页  2，生成对应的href链接传递给前台页面 3， 当前页码、页面总数、上页、下页

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

using System.Data.SqlClient;

namespace ProductWeb

{

    /// <summary>

    /// ProductList_Admin 后台显示产品列表

    /// </summary>

    public class ProductList_Admin : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/html";

            //从DB中选出产品信息

            SQLHelper sqlH = new SQLHelper();

            //DataTable是把数据读取出来以后放入内存中，如果数据量大的话 一次性都读出来的话就很吃内存造成系统性能很差

            //这时候我们就要从DB中只读取我们需要的数据就好了 ， 把数据进行分页处理，只读取需要页数的数据

            // 一，页数计算。查询出来Product总数numAllProducts. 总页数numPages=Celling(numAllProducts/10.0) .  天花板函数的结果是  >=这个数的最小整数

            int numAllProducts = Convert.ToInt32(sqlH.ExecuteScalar("select count(*) from [Products] where [IsDelete]=0", CommandType.Text));

            int numPages = (int)Math.Ceiling(numAllProducts / 10.0);  // 5/10→1  10/10→1   11/10→2

            //二，生成前台页面 a 的链接地址 href

            object[] objPageData = new object[numPages];

            for (int i = ; i < numPages; i++)

            {

                objPageData[i] = new { Href = "ProductList_Admin.ashx?Page=" + (i + ).ToString(), Title = (i + ).ToString() };

            }

            //三，根据前台传递过来的页码，查询对应页面的数据

            int intRowNumber = ; //默认为第1页 1-10条数据，第2页： 11~20条数据  （intRowNumber-1）*10+1~intRowNumber*10

            string strPageNumber = context.Request.QueryString["Page"];

            if (!string.IsNullOrEmpty(strPageNumber))

            {

                intRowNumber = Convert.ToInt32(strPageNumber);  //获取传递过来的页面

            }

            //选择对应页面的数据

            string sql = @"select * from

                           (SELECT [ProID],[ProName],[ProImagePath],[ProIntroduce],[ProCateID],b.[CateName] as CateName,b.[CateID] as CateID,ROW_NUMBER() over (order by ProID) as RowNum

                             FROM [Products]  as a left join [ProCategories] as b on a.ProCateID=b.CateID where [IsDelete]=0 ) as s

                             where s.RowNum between (@IntRowNumber-1)*10+1 and @IntRowNumber*10    ";

            SqlParameter[] sqlParas = new SqlParameter[] {

                new SqlParameter("@IntRowNumber",intRowNumber)

            };

            //string sql = "SELECT [ProID],[ProName],[ProImagePath],[ProIntroduce],b.[CateName] as CateName  FROM [dbo].[Products]  as a left join [dbo].[ProCategories] as b on a.ProCateID=b.CateID where [IsDelete]=0 ";

            DataTable dt = sqlH.ExecuteQuery(sql, sqlParas, CommandType.Text);

            //四，根据当天页码和总页面数，设置前一页和后一页

            var varPageBeforeNext = new { PageBefore = intRowNumber - , PageNext = intRowNumber +  };

            var data = new { PageTitle = "产品列表", Products = dt.Rows, PageData = objPageData, PageNums = numPages, PageBeforeNext = varPageBeforeNext };

            string strHtml = Common_Nvelocity.RenderHTML("Admin/ProductList_Admin.html", data);

            context.Response.Write(strHtml);

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

--------------------------------------------------分页实现效果------------------------------------------------------

【ASP.NET基础】简单企业产品展示网站--产品编辑CRUD

总结：本文实现了产品编辑的增删查改功能，了解图片上传、分页实现等。　　【Demo下载 】

参考：

NVelocity 语法： http://www.cnblogs.com/hxling/archive/2011/10/23/2221918.html

Row_Number()使用： http://www.cnblogs.com/gy51Testing/archive/2012/07/26/2609832.html