B2C电商平台开发心得(asp.net+bootstrap)
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 html、css、javascript的,专为 web 应用设计,包含了移动设备优先的样式, 其响应式 css 能够自适应于台式机、平板电脑和手机,它简洁灵活,使得 web 开发更加快捷。
官方下载地址:
http://getbootstrap.com/
1.网格系统:
网格系统是通常可以想成横跨的十二个可用的列来创建的。
col-xs-12是超小屏(如 手机 )
col-sm-12是小屏(如 平板 )
col-md-12是中等屏(如 电脑桌面)
col-lg-12是超大屏(如 大桌面显示器)
如想在不同移动设备拥有一样的样式,可根据网格系统,设置在不同属性值 例如:
1 <div id="K98HGT0A" runat="server" class="col-xs-12 col-sm-12 col-md-12 text-center text-padding"> 2 <div class="col-xs-1 col-sm-4 col-md-5"> 3 </div> 4 <div class="col-xs-11 col-sm-8 col-md-7 text-left text-padding K98HGT0A" id="div_img" 5 runat="server"> 6 <img alt="" src="../Images/expand.gif" class="img1" align="absmiddle" onclick="expandAll();" 7 style="padding-left: 20px; " /> 8 <img alt="" src="../Images/collapse.gif" class="img2" align="absmiddle" onclick="collapseAll();" 9 style="padding-left: 20px;" /> 10 </div> 11 </div>
2.客户端的返回按钮:
if (ViewState["UrlReferrer"] != null) { Response.Redirect(ViewState["UrlReferrer"].ToString()); }
只在第二页面及之后才会有效果。
3.跳转到其他页面: 使用的是 Response.Redirect
1 protected void ibtnCart_Click(object sender, ImageClickEventArgs e) 2 { 3 string addpid = Common.GetAppIdByFilePath("Shopping_Cart.aspx"); 4 Response.Redirect("Shopping_Cart.aspx?APPID=" + addpid); 5 } 6 #region 跳转到其他页面 7 private void ResponseRedirect(string pageUrl, string appid, string iq) 8 { 9 StringBuilder strUrl = new StringBuilder(); 10 strUrl.Append(pageUrl); 11 strUrl.Append("?appid="); 12 strUrl.Append(appid); 13 strUrl.Append("&iq="); 14 strUrl.Append(iq); 15 Response.Redirect(strUrl.ToString()); 16 } 17 #endregion 18
4.折叠效果: 使用两种不同的图片“+”“-”,在javascript中,点击两种图片(click事件),show/hide()显示/隐藏
5.页面动态加载(datetable动态新增一行还是物流动态等等情况)
1 function addGvNoneRow() { 2 if ($("#hdIQ").val() == "RP") { 3 $("#gvNone_SRNO tr:not(:first)").each(function () { 4 var STATUSDESCR = $(this).find(".STATUSDESCR").text(); 5 var CREATE_T = $(this).find(".CREATE_T").text(); 6 if ($("#gvNone_SRNO tr").length == 1) { 7 var tableImgfirst = " <div class='col-xs-5 col-sm-6 col-md-6 text-right text-padding orderimg' id='orderimg'>" 8 + " <table class='pull-right' id='img'>" 9 + " <tr><td><img src='../Images/successful(2).png' /></td></tr></table></div>"; 10 11 var tableListfirst = "<div class='col-xs-7 col-sm-6 col-md-6 text-left text-padding orderlist' id='orderlist'>" 12 + "<table class='pull-left list' id='list'>" 13 + " <tr><td style='padding-bottom:10px;padding-left:15px;'><span id='lbSTATUSDESCR' style='font-size:XX-Small;'>" + STATUSDESCR + "</span>" 14 + "<br />" 15 + "<span id='lbCREATE_T' style='font-size:XX-Small;'>" + CREATE_T + "</span></td></tr></table></div><br/>"; 16 $("#div_img").after(tableImgfirst); 17 $("#orderimg").after(tableListfirst); 18 }19 48 });
}
6.分页控件的应用(使用的是asp.net自带的分页控件AspNetPager)。
可以在AspNetPager设置按多少条数据分页。
HTML: 1 <div class="col-xs-9 col-md-7 col-lg-7 text-left text-padding fy_pager "> 2 <page:AspNetPager runat="server" ID="pager" PageSize="5" OnPageChanged="Pager_PageChanged" 3 HorizontalAlign="Center" Width="100%" ForeColor="White"> 4 </page:AspNetPager> 5 </div> 后端: 1 protected void Pager_PageChanged(object sender, EventArgs e) 2 { 3 string hdsono = ""; 4 string sqlPager = @"SELECT COUNT(*) FROM( 5 SELECT DISTINCT M_STS.SONO 6 FROM OMSO_M SO_M WITH(NOLOCK) 7 INNER JOIN OMSO_M_STS_LOG M_STS WITH(NOLOCK) ON SO_M.SONO=M_STS.SONO 8 INNER JOIN BD_STORE S WITH(NOLOCK) ON S.STORECD=@STORECD 9 INNER JOIN BD_SPROJECT PROJ WITH(NOLOCK) ON S.PROJCD=PROJ.PROJCD 10 INNER JOIN SYSSTATUSCDL STS WITH(NOLOCK) ON STS.STATUSCD=M_STS.STATUSCD 11 WHERE SO_M.CREATEBY=@USERID)AA"; 12 SqlParameter[] parasPager = { 13 new SqlParameter("@STORECD",SqlDbType.NVarChar,20){Value=STORECD}, 14 new SqlParameter("@USERID", SqlDbType.NVarChar, 15) { Value =SysSession.UserId} 15 }; 16 object obj = DBAccess.ExecuteScalar(sqlPager, parasPager); 17 int intobj = Convert.ToInt32(obj); 18 if (intobj == 0) 19 { 20 string sqlPager1 = @"SELECT COUNT(*) FROM( 21 SELECT DISTINCT M_STS.SONO 22 FROM OMSO_M SO_M WITH(NOLOCK) 23 INNER JOIN OMSO_M_STS_LOG M_STS WITH(NOLOCK) ON SO_M.SONO=M_STS.SONO 24 INNER JOIN SYSSTATUSCDL STS WITH(NOLOCK) ON STS.STATUSCD=M_STS.STATUSCD 25 26 WHERE SO_M.CREATEBY=@USERID AND STS.[LANGID]='en')AA"; 27 SqlParameter parasPager1 = new SqlParameter("@USERID", SqlDbType.NVarChar, 15) { Value = SysSession.UserId }; 28 29 object obj1 = DBAccess.ExecuteScalar(sqlPager1, parasPager1); 30 pager.RecordCount = Convert.ToInt32(obj1); 31 32 string sql1 = @"SELECT ROW_NUMBER() OVER (ORDER BY SONO)ROWNUM, SONO FROM ( 33 SELECT DISTINCT M_STS.SONO 34 FROM OMSO_M SO_M WITH(NOLOCK) 35 INNER JOIN OMSO_M_STS_LOG M_STS WITH(NOLOCK) ON SO_M.SONO=M_STS.SONO 36 INNER JOIN SYSSTATUSCDL STS WITH(NOLOCK) ON STS.STATUSCD=M_STS.STATUSCD 37 38 WHERE SO_M.CREATEBY=@USERID AND STS.[LANGID]='en')AA"; 39 40 sql1 = @"SELECT * FROM ( " + sql1 + " )X WHERE ROWNUM BETWEEN @Start AND @End"; 41 42 SqlParameter[] paras1 = { 43 new SqlParameter("@USERID", SqlDbType.NVarChar, 15) { Value =SysSession.UserId} , 44 new SqlParameter("@Start",SqlDbType.Int){Value = pager.StartRecordIndex}, 45 new SqlParameter("@End", SqlDbType.Int){Value =pager.EndRecordIndex}, 46 }; 47 DataTable dt1 = DBAccess.ExecuteDataTable(sql1, paras1); 48 for (int i = 0; i < dt1.Rows.Count; i++) 49 { 50 string sono = dt1.Rows[i]["SONO"].ConvertObjToStr(); 51 hdsono += sono + ","; 52 } 53 if (hdsono.Length > 0) 54 { 55 hdsono = hdsono.Substring(0, hdsono.Length - 1); 56 hdSONO.Value = hdsono; 57 } 58 } 59 }
7.gridview中某字段内容过长,截取前*个字符,其后用……或“”代替,鼠标悬停在上面显示全部内容
1 <asp:TemplateField HeaderText="<%$ Resources:GlobalResource_Store,ItemName%>"> 2 <ItemTemplate> 3 <asp:Label ID="lbPNDESCR" runat="server" Text='<%#Eval("PNDESCRtwo") %>' ToolTip='<%# Eval("PNDESCR") %>'></asp:Label> 4 </ItemTemplate> 5 </asp:TemplateField>
1 string sql = @"SELECT a.SRNO, b.CURR, b.SUMAMNT, a.PN,(substring(a.PNDESCR,0,20)) as PNDESCRtwo, a.PNDESCR, SUM(a.QTY) AS QTY, SUM(a.AMNT) AS ITEMAMNT 2 FROM ( 3 SELECT SR_M.SRNO, M.QUOTNO, DA.QUOTITEM AS PN, DA.QUOTITEM AS PNDESCR, 1 AS QTY, DA.AMNT AS RPRIC, 1 AS DISCOUNT, DA.AMNT AS AMNT 4 FROM SMEDB..OMSR_M SR_M WITH(NOLOCK) 5 INNER JOIN SMEDB..OMSR_ADDR ADDR WITH(NOLOCK) ON SR_M.SRNO=ADDR.SRNO AND ADDR.ADDRTP='ST' 6 INNER JOIN SMEDB..QUOT_M M WITH(NOLOCK) ON M.SRNO=SR_M.SRNO AND M.APPROVEFLAG='Y' 7 INNER JOIN SMEDB..QUOT_DA DA WITH(NOLOCK) ON M.QUOTNO=DA.QUOTNO
……………………
8.RadioButton二选一时,设置两个RadioButton的属性groupName="**"的属性值相同。
1 <div class="row row-margin-bottom"> 2 <div class="col-xs-2 col-sm-4 col-md-4 text-right text-left text-padding"> 3 </div> 4 <div class="col-xs-10 col-sm-8 col-md-8 text-left text-padding"> 5 <asp:RadioButton runat="server" ID="rbtn_zfb" GroupName="zf" 6 oncheckedchanged="rbtn_zfb_CheckedChanged" AutoPostBack="True" /> 7 <%= Resources.GlobalResource_Store.Alipay%> 8 </div> 9 </div> 10 <div class="row row-margin-bottom"> 11 <div class="col-xs-2 col-sm-4 col-md-4 text-right text-padding"> 12 </div> 13 <div class="col-xs-10 col-sm-8 col-md-8 text-left text-padding" "> 14 <asp:RadioButton runat="server" ID="rbtn_xxhk" GroupName="zf" oncheckedchanged="rbtn_xxhk_CheckedChanged" AutoPostBack="True" /> 15 <%= Resources.GlobalResource_Store.Offline_remittance%> 16 </div> 17 </div>
9.dropdownlist 默认项设置为数据列的某个值:
1 ddlTimeZone.Items.FindByText("UTC").Selected = true;