结合MVC.NET相关知识实现在线卖酒销售项目(二)

结合项目一内容 本章内容运用到ASP.NET里面DetailsView控件

一、在“BrasServer”文件夹中创建一个”Web窗体“名为“BarDetail.aspx”，选好“母版页”后，再选择合适“酒吧模板"代码复制到“BarDetail.aspx”Web窗体中间内容部分

代码示例(模板)：

<%@ Page Title="" Language="C#" MasterPageFile="~/BarsInfo/Bar.master" AutoEventWireup="true" CodeFile="BarDetail.aspx.cs" Inherits="BrasServer_BarDetail" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  <fieldset>
        <legend>产品详细</legend>

        <!-- start banner -->
<div >     
     <%--class="banner page-head"--%>        <%--头部图片并隐藏一半--%>
</div>
<!-- products-page -->
    <div class="products">
        <div class="container">
            <div class="products-info">
                <h3>其它产品类型</h3>            
            </div>
            <div class="gallery-grids">
                    <div class="col-md-4 gallery-grid gallery1">
                        <a href="images/k1.jpg" class="swipebox"><img src="../images/k1.jpg" class="img-responsive" alt="/" />
                            <div class="textbox">
                                <p>二窝头</p>
                            </div>
                            </a>
                    </div>
                    <div class="col-md-4 gallery-grid gallery1">
                        <a href="images/k2.jpg" class="swipebox"><img src="../images/k2.jpg" class="img-responsive" alt="/" />
                            <div class="textbox">
                                <p>白酒</p>
                            </div>
                            </a>
                    </div>
                    <div class="col-md-4 gallery-grid gallery1">
                        <a href="images/k3.jpg" class="swipebox"><img src="../images/k3.jpg" class="img-responsive" alt="/">
                            <div class="textbox">
                                <p>珠江啤酒</p>
                            </div>
                            </a>
                    </div>
                    <div class="col-md-4 gallery-grid gallery1">
                        <a href="images/k4.jpg" class="swipebox"><img src="../images/k4.jpg" class="img-responsive" alt="/">
                            <div class="textbox">
                                <p>零度</p>
                            </div>
                            </a>
                    </div>
                    <div class="col-md-4 gallery-grid gallery1">
                        <a href="images/k5.jpg" class="swipebox"><img src="../images/k5.jpg" class="img-responsive" alt="/">
                            <div class="textbox">
                                <p>米酒</p>
                            </div>
                            </a>
                    </div>
                    <div class="col-md-4 gallery-grid gallery1">
                        <a href="images/k6.jpg" class="swipebox"><img src="../images/k6.jpg" class="img-responsive" alt="/">
                            <div class="textbox">
                                <p>REGENSBURGER</p>
                            </div>
                            </a>
                    </div>
                    <div class="col-md-4 gallery-grid gallery1">
                        <a href="images/k7.jpg" class="swipebox"><img src="../images/k7.jpg" class="img-responsive" alt="/">
                            <div class="textbox">
                                <p>AMAZON FOREST</p>
                            </div>
                            </a>
                    </div>
                    <div class="col-md-4 gallery-grid gallery1">
                        <a href="images/k8.jpg" class="swipebox"><img src="../images/k8.jpg" class="img-responsive" alt="/">
                            <div class="textbox">
                                <p>BURGER</p>
                            </div>
                            </a>
                    </div>
                    <div class="col-md-4 gallery-grid gallery1">
                        <a href="images/k9.jpg" class="swipebox"><img src="../images/k9.jpg" class="img-responsive" alt="/">
                            <div class="textbox">
                                <p>HEINEKEN</p>
                            </div>
                            </a>
                    </div>
                    <div class="clearfix"> </div>
                    

        </div>
            <link rel="stylesheet" href="../css/swipebox.css"/>
                <script src="js/jquery.swipebox.min.js"></script> 
                    <script type="text/javascript">
                        jQuery(function ($) {
                            $(".swipebox").swipebox();
                        });
                    </script>
        </div>
    </div>
<!-- //products-page -->
<!-- foot-line -->
<div class="foot-line">
</div>


    </fieldset>
</asp:Content>

二、添加“DetailsView控件"到适合“BarDetail.aspx”窗体，“应用后台代码实现“DetailsView”控件数据加载出来”，

     首先，编辑“SQL”方法再应用”三层“

1、如图所示（DetailsView控件）：

    

如图所示（DetailsView控件 前台代码）：

 2、如图所示(数据库方法)：

代码示例：

--获取产品（酒）详细信息
create proc Xyy_ProductGetModel
@ProductId varchar(50)
as
begin
select b.*,c.Name from Bars b left join Categories c 
on b.CategoryId=c.CateId
where ProductId=@ProductId
end

3、如图所示(因为是“产品详细”，所以添加多几条字段：类)

代码示例：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Models
{
    public class Bars
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public string Brand { get; set; }
        public int CategoryId { get; set; }
        public decimal Price { get; set; }
        public string nContent { get; set; }
        public string ImgSrc { get; set; }
        public DateTime PublishDate { get; set; }

        public string Area { get; set; }
        public string Fresh { get; set; }
        public int CliclTime { get; set; }
        public bool Vis { get; set; }
    }
}

4、如图所示（数据访问层）

代码示例：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using DBUtility;
using Models;
using System.Data.SqlClient;
namespace DAL
{
    public class BarsService
    {
        //日期排序
        public List<Bars> Xyy_BarGetpageList(string key, int startindex, int endidenx, string orderkey)
        {
            List<Bars> lst = new List<Bars>();
            SqlParameter[] param = new SqlParameter[]
            {
                new SqlParameter("@Key",key),
                new SqlParameter("@StartIdenx",startindex),
                new SqlParameter("@EndIdenx",endidenx),
                new SqlParameter("@OrderKey",orderkey)
            };
            using (SqlDataReader dr = SqlHelper.ExecuteReader("Xyy_BarGetpageList", param))
            {
                while (dr.Read())
                {
                    lst.Add(new Bars
                    {
                        ProductId = Convert.ToInt32(dr["ProductId"]),
                        ProductName = Convert.ToString(dr["ProductName"]),
                        Price = Convert.ToInt32(dr["Price"]),
                        PublishDate = dr["PublishDate"] == DBNull.Value ? DateTime.Now : Convert.ToDateTime(dr["PublishDate"]),
                        ImgSrc = dr["ImgSrc"].ToString()
                    });
                }
            }
            return lst;
        }
        //分类选中
        public int XYY_Bars_Count_Key(string cateid)
        {
            SqlParameter[] param = new SqlParameter[] 
           {
               new SqlParameter("@categoryid",cateid)
           };
            object obj = SqlHelper.ExecuteScalar("XYY_Product_Count_Key", param);
            if (obj != null)
            {
                return Convert.ToInt32(obj);
            }
            else
            {
                return 0;
            }
        }
        //获取产品详细
        public Bars Xyy_ProductGetModel(string productId)
        {
            SqlParameter[] param = new SqlParameter[] 
            {
                new SqlParameter("@ProductId",productId)
            };
            Bars models = null;
            using (SqlDataReader dr = SqlHelper.ExecuteReader("Xyy_ProductGetModel", param))
            {
                if (dr.Read())
                {
                    models = new Bars();
                    models.ProductId = Convert.ToInt32(dr["ProductId"]);
                    models.ProductName = Convert.ToString(dr["ProductName"]);
                    models.Brand = Convert.ToString(dr["Brand"]);
                    models.CategoryId = Convert.ToInt32(dr["CategoryId"]);
                    models.Price = Convert.ToInt32(dr["Price"]);
                    models.nContent = Convert.ToString(dr["nContent"]);
                    models.ImgSrc = Convert.ToString(dr["ImgSrc"]);
                    models.PublishDate = dr["PublishDate"] == DBNull.Value ? DateTime.Now : Convert.ToDateTime(dr["PublishDate"]);
                    models.Area = Convert.ToString(dr["Area"]);
                    models.Fresh = Convert.ToString(dr["Fresh"]);
                    models.CliclTime = Convert.ToInt32(dr["CliclTime"]);
                    models.Vis = Convert.ToBoolean(dr["Vis"]);
                }
            }
            return models;
        }
    }
}

5、如图所示（业务逻辑层）

代码示例：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Models;
using DAL;
namespace BLL
{
    public class BarManager
    {
        BarsService dal = new BarsService();
           //日期
        public List<Bars> Xyy_BarGetpageList(string key, int startindex, int endidenx, string orderkey)
        {
            return dal.Xyy_BarGetpageList(key, startindex, endidenx, orderkey);
        }
         //分类选中
        public int XYY_Bars_Count_Key(string cateid)
        {
            return dal.XYY_Bars_Count_Key(cateid);
        }
          //获取产品详细
        public Bars Xyy_ProductGetModel(string productId)
        {
            return dal.Xyy_ProductGetModel(productId);
        }
    }
}

 6、如图所示(表示层)

代码示例

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

using BLL;
using Models;
public partial class BrasServer_BarDetail : System.Web.UI.Page
{
    BarManager bll = new BarManager();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            LoData();
        }
    }
    //加载数据
    private void LoData()
    {
        //获取参数
        string prodictId = Request.QueryString["ProductId"];
        List<Bars> lst = new List<Bars>();       
            lst.Add(bll.Xyy_ProductGetModel(prodictId));
        DVBar.DataSource = lst;
        DVBar.DataBind();
    }
}

三、到这步基本实现"加载数据出来"，但是，前台显示出来很难看而且很多不足地方，所以编辑”DetailsView控件“模板

运行效果：

四、来到前台“DetailsView控件”点击"编辑字段"，然后“添加根据不同字段选择不同属性”，添加一些样式就完成

1、如图所示(编辑字段)：

2、如图所示(添加根据不同字段选择不同属性)：

 3、如图所示(前台代码)：

代码示例：

  <asp:DetailsView ID="DVBar" runat="server" Height="50px" Width="125px" AutoGenerateRows="False" BackColor="#CCCCCC" BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellPadding="4" CellSpacing="2" ForeColor="Black">
          <EditRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
          <Fields>
              <asp:BoundField DataField="ProductName" HeaderText="名称" SortExpression="ProductName" />
              <asp:BoundField DataField="Price" HeaderText="价格" SortExpression="Price" />
              <asp:BoundField DataField="CategoryId" HeaderText="种类" SortExpression="CategoryId" />
              <asp:BoundField DataField="Brand" HeaderText="品牌" SortExpression="Brand" />
              <asp:BoundField DataField="Area" HeaderText="区域" SortExpression="Area" />
              <asp:BoundField DataField="Fresh" HeaderText="成色" SortExpression="Fresh" />
              <asp:BoundField DataField="PublishDate" HeaderText="出厂日期" SortExpression="PublishDate" />
              <asp:BoundField DataField="CliclTime" HeaderText="访问次数" SortExpression="CliclTime" />
              <asp:TemplateField HeaderText="图片" SortExpression="ImgSrc">
                  <ItemTemplate>
                      <asp:Image ID="img" ImageUrl='<%#Bind("ImgSrc","~/{0}") %>' runat="server"/>
                  </ItemTemplate>
              </asp:TemplateField>
              <asp:BoundField DataField="nContent" HeaderText="详细介绍" SortExpression="nContent" />
              <asp:CheckBoxField DataField="Vis" SortExpression="Vis" Text="有效" />
          </Fields>

          <FooterStyle BackColor="#CCCCCC" />
          <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
          <PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" />
          <RowStyle BackColor="White" />

      </asp:DetailsView>

 四、运行效果

 前台代码示例：

<%@ Page Title="" Language="C#" MasterPageFile="~/BarsInfo/Bar.master" AutoEventWireup="true" CodeFile="BarDetail.aspx.cs" Inherits="BrasServer_BarDetail" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css">
     .productBac 
     {
         background:#DAD2C7;
         text-align:center;
         font-weight:bold;
     }
    .Fread 
    {
        background:#DAD2C7;
        margin-left:500px;
    }
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <fieldset class="productBac">    
        <legend>产品详细</legend>
         <div class="Fread">
      <asp:DetailsView ID="DVBar" runat="server" Height="170px" Width="733px" AutoGenerateRows="False" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Vertical">
          <AlternatingRowStyle BackColor="White" />
          <EditRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
          <Fields>
              <asp:BoundField DataField="ProductName" HeaderText="名称" SortExpression="ProductName" />
              <asp:BoundField DataField="Price" HeaderText="价格" SortExpression="Price" />
              <asp:BoundField DataField="CategoryId" HeaderText="种类" SortExpression="CategoryId" />
              <asp:BoundField DataField="Brand" HeaderText="品牌" SortExpression="Brand" />
              <asp:BoundField DataField="Area" HeaderText="区域" SortExpression="Area" />
              <asp:BoundField DataField="Fresh" HeaderText="成色" SortExpression="Fresh" />
              <asp:BoundField DataField="PublishDate" HeaderText="出厂日期" SortExpression="PublishDate" />
              <asp:BoundField DataField="CliclTime" HeaderText="访问次数" SortExpression="CliclTime" />
              <asp:TemplateField HeaderText="图片" SortExpression="ImgSrc">
                  <ItemTemplate>
                      <asp:Image ID="img" Width="200px" Height="150px" ImageUrl='<%#Bind("ImgSrc","~/{0}") %>' runat="server"/>
                  </ItemTemplate>
              </asp:TemplateField>
              <asp:BoundField DataField="nContent" HeaderText="详细介绍" SortExpression="nContent" />
              <asp:CheckBoxField DataField="Vis" SortExpression="Vis" HeaderText="有效"/>
          </Fields>

          <FooterStyle BackColor="#CCCC99" />
          <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
          <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
          <RowStyle BackColor="#F7F7DE" />
      </asp:DetailsView>
      </div>
 </fieldset>

<div >     
     <%--class="banner page-head"--%><%--头部图片并隐藏一半--%>
</div>
<!-- products-page -->
    <div class="products">
        <div class="container">
            <div class="products-info">
                <h3>其它产品类型</h3>            
            </div>
            <div class="gallery-grids">
                    <div class="col-md-4 gallery-grid gallery1">
                        <a href="images/k1.jpg" class="swipebox"><img src="../images/k1.jpg" class="img-responsive" alt="/" />
                            <div class="textbox">
                                <p>二窝头</p>
                            </div>
                            </a>
                    </div>
                    <div class="col-md-4 gallery-grid gallery1">
                        <a href="images/k2.jpg" class="swipebox"><img src="../images/k2.jpg" class="img-responsive" alt="/" />
                            <div class="textbox">
                                <p>白酒</p>
                            </div>
                            </a>
                    </div>
                    <div class="col-md-4 gallery-grid gallery1">
                        <a href="images/k3.jpg" class="swipebox"><img src="../images/k3.jpg" class="img-responsive" alt="/">
                            <div class="textbox">
                                <p>珠江啤酒</p>
                            </div>
                            </a>
                    </div>
                    <div class="col-md-4 gallery-grid gallery1">
                        <a href="images/k4.jpg" class="swipebox"><img src="../images/k4.jpg" class="img-responsive" alt="/">
                            <div class="textbox">
                                <p>零度</p>
                            </div>
                            </a>
                    </div>
                    <div class="col-md-4 gallery-grid gallery1">
                        <a href="images/k5.jpg" class="swipebox"><img src="../images/k5.jpg" class="img-responsive" alt="/">
                            <div class="textbox">
                                <p>米酒</p>
                            </div>
                            </a>
                    </div>
                    <div class="col-md-4 gallery-grid gallery1">
                        <a href="images/k6.jpg" class="swipebox"><img src="../images/k6.jpg" class="img-responsive" alt="/">
                            <div class="textbox">
                                <p>REGENSBURGER</p>
                            </div>
                            </a>
                    </div>
                    <div class="col-md-4 gallery-grid gallery1">
                        <a href="images/k7.jpg" class="swipebox"><img src="../images/k7.jpg" class="img-responsive" alt="/">
                            <div class="textbox">
                                <p>AMAZON FOREST</p>
                            </div>
                            </a>
                    </div>
                    <div class="col-md-4 gallery-grid gallery1">
                        <a href="images/k8.jpg" class="swipebox"><img src="../images/k8.jpg" class="img-responsive" alt="/">
                            <div class="textbox">
                                <p>BURGER</p>
                            </div>
                            </a>
                    </div>
                    <div class="col-md-4 gallery-grid gallery1">
                        <a href="images/k9.jpg" class="swipebox"><img src="../images/k9.jpg" class="img-responsive" alt="/">
                            <div class="textbox">
                                <p>HEINEKEN</p>
                            </div>
                            </a>
                    </div>
                    <div class="clearfix"> </div>
                    

        </div>
            <link rel="stylesheet" href="../css/swipebox.css"/>
                <script src="js/jquery.swipebox.min.js"></script> 
                    <script type="text/javascript">
                        jQuery(function ($) {
                            $(".swipebox").swipebox();
                        });
                    </script>
        </div>
    </div>
<!-- //products-page -->
<!-- foot-line -->
<div class="foot-line">
</div>

</asp:Content>