马上要用C#开发一个Web项目了,新人,很忐忑,求经验,求分享。
以前也参与过web系统的开发,但那时有N多牛人with me,当时系统左侧的导航栏,top位置的菜单栏,都已经做好了,我只是需要在剩下的位置做个datagrid进行查询或者编辑等操作就可以了。现在only me(因为现在的公司只有我一个人是做软件开发的,杯具),想用C#做一个Web系统,特地在此求经验分享,如何建立一个好看美观的Web系统。
1.左侧的导航栏,top位置的菜单栏,我如何去做?网上如果有这种系统框架下载,是否可以推荐几个给力的下载站点?
2.有没有好用的免费的第三方控件,让C#开发变得更容易更美观些,比如编辑单元格都要嵌入一个文本框,有没有更美观的方法。
3.欢迎大家有什么好的前车之鉴或者是经验,或者一些需要注意的问题一起来分享。
我只能算个初级的程序抄写员,如果上面哪说的不对了,大家淡定的一笑而过吧,马上过年了,提前祝大伙新年快乐! --------------------编程问答-------------------- Extjs --------------------编程问答-------------------- 后台的话功能优先,不要去过多考虑美观之类的问题。
网上可以找到很多前后台的静态模板,借鉴下还是可以的。 --------------------编程问答-------------------- 菜单、导航栏都有控件的,要美观还需要美工的支持。第三方控件可以使用r.a.d.controls --------------------编程问答-------------------- 找素材,抄襲.
我一直這麼干的...
bad copy,good steal. --------------------编程问答-------------------- 免费的第三方控件
JQUERY EASY UI
还有推荐一个框架
DWZ
这框架改成.NET版本 的 也是相当的拉风。 --------------------编程问答-------------------- 登陆以后显示一个目录树,然后导航,现在将前台,后台贴出来,如果你要代码,我给你,程序我自己写的,联系我邮箱:gfl@163.com 前台如下:
<html>
<head>
<title>某系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">BODY { FONT-SIZE: 11pt }
TR { FONT-SIZE: 11pt }
TD { FONT-SIZE: 11pt }
TABLE { BORDER-LEFT-COLOR: #000; BORDER-BOTTOM-COLOR: #000; BORDER-TOP-COLOR: #000; BORDER-COLLAPSE: collapse; BORDER-RIGHT-COLOR: #000 }
TR { BORDER-LEFT-COLOR: #000; BORDER-BOTTOM-COLOR: #000; BORDER-TOP-COLOR: #000; BORDER-COLLAPSE: collapse; BORDER-RIGHT-COLOR: #000 }
TD { BORDER-LEFT-COLOR: #000; BORDER-BOTTOM-COLOR: #000; BORDER-TOP-COLOR: #000; BORDER-COLLAPSE: collapse; BORDER-RIGHT-COLOR: #000 }
INPUT { BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid }
A:link { COLOR: #333333; TEXT-DECORATION: none }
A:visited { COLOR: #333333; TEXT-DECORATION: none }
A:hover { COLOR: #c63838; TEXT-DECORATION: underline }
.whitebolder { FONT-WEIGHT: bolder; FONT-SIZE: 12px; COLOR: #ffffff }
.nor_input { BORDER-RIGHT: #5fc6bd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #5fc6bd 1px solid; PADDING-LEFT: 1px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; BORDER-LEFT: #5fc6bd 1px solid; COLOR: #333333; PADDING-TOP: 2px; BORDER-BOTTOM: #5fc6bd 1px solid; HEIGHT: 20px }
.nor_input1 { BORDER-RIGHT: #0cb077 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #0cb077 1px solid; PADDING-LEFT: 1px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; BORDER-LEFT: #0cb077 1px solid; COLOR: #000000; PADDING-TOP: 2px; BORDER-BOTTOM: #0cb077 1px solid; HEIGHT: 20px; BACKGROUND-COLOR: #edfffd }
</style>
<script language="javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body text="#000000" bgcolor="#ffffff" leftmargin="0" topmargin="0" onload='javascript: if(this.document.all.txtUsername.value=="") this.document.all.txtUsername.focus();else this.document.all.txtPassword.focus();'>
<form id="Form1" method="post" runat="server">
<script>setTimeout('top.moveTo(0,0),top.resizeTo(screen.availWidth,screen.availHeight)');</script>
<center>
<table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%" width="100%">
<tr>
<td style="width: 167px">
</td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 167px">
</td>
<td style="width: 100px">
<table style="background-image: url(Images/LoginBg.jpg); width: 994px; height: 743px">
<tr>
<td style="width: 100px; height: 19px">
</td>
<td style="width: 7400px; height: 19px">
</td>
</tr>
<tr>
<td style="width: 100px; height: 19px">
<table style="margin: 55px 0px 0px 80px" cellspacing="0" cellpadding="0" width="270" align="center" border="0">
<tbody>
<tr>
<td align="center" colspan="2" style="width: 205px; height: 88px;">
<table cellspacing="0" cellpadding="0" width="180" align="center" border="0">
<tbody>
<tr>
<td class="whitebolder" valign="bottom" nowrap style="width: 40px; height: 26px;">
用户</td>
<td style="height: 26px">
<asp:TextBox ID="txtUsername" runat="server" Width="144px" autocomplete="off" class="nor_input" onblur="this.className='nor_input'" onfocus="this.className='nor_input1'"></asp:TextBox></td>
<td width="22" style="height: 26px">
<asp:RequiredFieldValidator ID="rfvUsername" runat="server" Height="8px" Font-Size="10pt" ErrorMessage="*" ControlToValidate="txtUsername"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td colspan="2" style="height: 16px">
</td>
<td width="22" style="height: 16px">
</td>
</tr>
<tr>
<td class="whitebolder" valign="bottom" style="width: 40px; height: 28px">
密码</td>
<td style="height: 28px">
<asp:TextBox ID="txtPassword" runat="server" Width="144px" TextMode="Password" autocomplete="off" class="nor_input" onblur="this.className='nor_input'" onfocus="this.className='nor_input1'"></asp:TextBox></td>
<td width="22" style="height: 28px">
<asp:RequiredFieldValidator ID="rfvPassword" runat="server" Font-Size="10pt" ErrorMessage="*" ControlToValidate="txtPassword"></asp:RequiredFieldValidator></td>
</tr>
</tbody>
</table>
</td>
<td valign="bottom" nowrap width="90" style="height: 88px">
<div align="right">
<asp:ImageButton ID="btnSubmit" Style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" runat="server" CssClass="login_button" Width="69px" ImageUrl="~/Images/btn_log.gif" Height="45px" DESIGNTIMEDRAGDROP="479" OnClick="btnSubmit_Click" ></asp:ImageButton></div>
</td>
</tr>
</tbody>
</table>
<table style="margin: 20px 0px 0px 80px" cellspacing="0" cellpadding="0" width="270" align="center" border="0">
<tbody>
<tr>
<td class="whitebolder" valign="bottom" align="center" colspan="2" style="height: 16px">
<asp:Label ID="lblErrorMessage" runat="server" Width="301px" Font-Size="10pt" Visible="False" ForeColor="Red">错误的用户名和口令</asp:Label></td>
</tr>
</tbody>
</table>
</td>
<td style="width: 7400px; height: 19px">
</td>
</tr>
</table>
<table style="margin: 20px 0px 0px 80px" cellspacing="0" cellpadding="0" width="270" align="center" border="0">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width: 167px; height: 19px">
</td>
<td style="width: 100px; height: 19px">
</td>
</tr>
</table>
</form>
<center>
</center>
</body>
</html>
--------------------编程问答-------------------- 顶起顶起! --------------------编程问答-------------------- 登陆的后台:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using myLib;
using CN.Web.LuDing.DB;
namespace CN.Web
{
public partial class Login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSubmit_Click(object sender, ImageClickEventArgs e)
{
if ((this.txtUsername.Text != "") && (this.txtPassword.Text != ""))
{
string userName = this.txtUsername.Text.Trim();
string userPwd = this.txtPassword.Text.Trim();
Response.Cookies["Username"].Value = this.txtUsername.Text;
Response.Cookies["Password"].Value = this.txtPassword.Text;
string aidSelect = "select * from emp where emp_name ='" + userName + "' and emp_pwd='" + userPwd + "'";
DataTable fileTable = new DataTable();
fileTable = DbAccess.GetDS(aidSelect).Tables[0];
if (fileTable.Rows.Count > 0)
{
string roleid = DbAccess.getFieldValue("select Role_id from RolePeopleRela where emp_id = (select emp_id from emp where emp_name ='" + userName + "' and emp_pwd='" + userPwd + "')");
Session ["RoleId"] = roleid;
Response.Write("<script>alert('欢迎登陆!')</script>");
Response.Redirect("Index.aspx");
}
else
{
//Response.Write("<script>alert('用户名与密码必须正确才能登陆!')</script>");
DbUITool.JsMsg(this.Page, "用户名与密码必须正确才能登陆!");
Response.Redirect("Login.aspx");
}
}
else
{
//Response.Write("<script>alert('用户名与密码不能为空!')</script>");
DbUITool.JsMsg(this.Page, "用户名与密码不能为空!");
}
}
}
}
登陆以后的后台:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using myLib;
namespace CN.Web
{
public partial class LeftTreeView : System.Web.UI.Page
{
protected DataTable dataTbl1, dataTbl2;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
string wherstr="";
if (Request.Cookies["Username"].Value.ToString().ToLower () == "admin" && Request.Cookies["Password"].Value.ToString() == "1")
{
wherstr = "";
}
else
{
if (Session["RoleId"] != null)
{
string roleid = Session["RoleId"].ToString();
wherstr = " where page_id in(select page_id from RolePageRelationship where Role_id=" + roleid + ")";
}
}
InitRootNodeDataTable(wherstr);
initTree(dataTbl1);
//tvCategory.CollapseAll();
}
}
/// <summary>
/// 初始化 RootNode DataTable
/// </summary>
private void InitRootNodeDataTable(string wherstr)
{
dataTbl1 = new DataTable();
dataTbl1 = DbAccess.GetDS("select * from page " + wherstr).Tables[0];
//读取并将公共的分类信息添加到数据集中
dataTbl1.TableName = "TreeView";
}
/// <summary>
/// 初始化树
/// </summary>
/// <param name="dt">取得所有的分类</param>
private void initTree(DataTable dt)
{
this.tvCategory.Nodes.Clear();//先清理原先的
if (dt != null && dt.Rows.Count == 0) return;
DataRow[] Rows = dt.Select("Page_parent=0 ");
if (Rows.Length == 0) return;
foreach (DataRow row in Rows)
{
TreeNode tNode = new TreeNode();
tNode.Value = row["Page_id"].ToString();
tNode.Text = row["Page_name"].ToString();
//tNode.NavigateUrl = "";
//tNode.Target = "MainFrameBS";//指向父窗体右边的那个iframe
this.tvCategory.Nodes.Add(tNode);
tNode.Expanded = true;
createChildNode(tNode, tNode.Value);
}
////添加一级“未分类”节点
//TreeNode tNode1 = new TreeNode();
//tNode1.Value = "-1";
//tNode1.Text = "未分类";
//tNode1.NavigateUrl = "BasicInfoConfig.aspx?Class_ID=" + tNode1.Value + "";
//tNode1.Target = "MainFrameBS";//指向父窗体右边的那个iframe
//this.tvCategory.Nodes.Add(tNode1);
//tNode1.Expanded = true;
}
/// <summary>
/// 创建子节点
/// </summary>
/// <param name="node"></param>
/// <param name="strParentNo"></param>
private void createChildNode(TreeNode node, string strParentNo)
{
//string parentId="";
DataRow[] Rows = this.dataTbl1.Select("Page_parent='" + strParentNo + "' and Page_parent<>0");
foreach (DataRow row in Rows)
{
TreeNode childNode = new TreeNode();
childNode.Value = row["Page_id"].ToString();
childNode.Target = "mainFrame";//指向父窗体右边的那个iframe
childNode.Text = row["Page_name"].ToString();
childNode.NavigateUrl = "~/"+row["Page_url"].ToString(); ;
node.ChildNodes.Add(childNode);
createChildNode(childNode, row["Page_id"].ToString());
}
}
}
}
整个思想就是登陆以后形成左侧目录树,右侧显示目录树导航,目录树用treeview,然后递归显示,可以多级显示:这样以后权限可以控制到目录树的节点。 --------------------编程问答-------------------- 我是用vs2005加sql2005,要的话,跟我邮箱联系gfl@163.com免费给你。 --------------------编程问答-------------------- 楼上的貌似很给力喔~~~~我现在又在做毕业设计喔。。。。类型就是楼主说的那样。。。我又一个人做!!!那些牛人都没空理我。。。。烦死我了!失败。。。。住楼主早日解决问题啦!
这是我现在做着的模板哦。不过这么烂也帮不了楼主的了!! --------------------编程问答-------------------- 导航和顶部,如果你要好看的话,到懒人图库里面下载,那里多的是,很多好看的,
源码的话,你到51aspx里面去下载,那里也有很多源码,你下下来看看!
--------------------编程问答-------------------- 这些的话,其实你们公司的美工会帮你搞定的。 --------------------编程问答-------------------- 最简单的一点,就是控件中的menu和treeview控件 --------------------编程问答-------------------- 果断换公司 --------------------编程问答-------------------- 可以看看一些cms吧。
像dotnetnuke这类的东西。 --------------------编程问答-------------------- extjs,jquery中资源很丰富
CSS
http://topic.csdn.net/u/20100114/09/abcd6cfa-b705-4f2f-8ede-68e3440eaad9.html --------------------编程问答-------------------- 用 Extjs吧
美工都省了 --------------------编程问答-------------------- 其实后台界面不需要很美观啊
操作方便就OK了,自己搭建一个不会要很久把,而且以后美化点还可以拿来用,有时间就改进不是更好 --------------------编程问答-------------------- --------------------编程问答-------------------- 公司里木有专业美工,自己做一般只能找第三方控件,否则费力还不讨好,个人使用jquery多些
如果是内部系统,点到为止即可 --------------------编程问答--------------------
其实,我美观上我已经不敢考虑很多了,
我就会用PS在图片上改点文字,或者建几个图层把几个图拼一块,
就希望能找一个能看过去眼的,我自己改点文字就行了。 --------------------编程问答-------------------- 这个也是一个杯具,我们没有美工。。。。只有我一个人。。。。所有都我一个人。
--------------------编程问答-------------------- 搭配的挺好的,也祝你早日成功!
你身边最起码还有牛人只是没空,我身边神马牛人都没有。全都我自己来。
--------------------编程问答-------------------- 去51asx。com 下载个看下 --------------------编程问答-------------------- 弄详设的撒、然后去弄框架啦~~
自己谷狗就ok的 --------------------编程问答-------------------- --------------------编程问答-------------------- 听下传说中的神曲:忐忑估计楼主就会了.
--------------------编程问答--------------------
这个是asp.net ajax页面的那个吧?很难看的哈哈,之前也用过。 --------------------编程问答--------------------
人才啊。
www.51aspx.com --------------------编程问答--------------------
小公司是没有美工的,就好像我们的公司一个项目都是一个人搞定的。,像上面有位讲的,先弄好后台比较重要
! --------------------编程问答-------------------- 唉.不容易啊.人家很挑剔的情况下.很难搞的.上次特地发邮件过来说颜色不对啊.图片的箭头不要向下啊.我晕...要求超高的 --------------------编程问答-------------------- 茁壮成长中 --------------------编程问答-------------------- 我在部门也是唯一的软件设计 因为公司是做商务的不是卖软件的
起初从网上找了很多素材 边修改别人的边学习,后来发现还是自己写的更适合于公司内部站点,初学的话我建议还是用.net自带的一些menu菜单 上手也快 会的多了再改漂亮的 --------------------编程问答-------------------- 搞这个东西快的话也就一个小时吧,实现目录树。 --------------------编程问答-------------------- --------------------编程问答-------------------- 看你搞什么网站,如果是专业开发网站的,基本上美工加套站,
那个源码99,网址www.yuanma99.com,不过要下里面东西,需要交点钱注册个会员,那里面都是很多大站的源码,很给力;
我也有去下,不过号码是朋友的,我自己不要花钱 --------------------编程问答-------------------- 在51aspx.com下载过不少东西,后台管理的模板可用性蛮高。前面美观还得找美工啊。 --------------------编程问答-------------------- --------------------编程问答--------------------
新手学习这个应用于项目很耗费时间的说。。 --------------------编程问答-------------------- --------------------编程问答-------------------- --------------------编程问答-------------------- 第一次是这样的多做两次就行了
顶你 --------------------编程问答-------------------- ...如果楼主想吃这行饭。。。去较大的公司比较好。。。
大点的公司有专门的人员和项目组。。。学的系统化一点 比自学 强多了!
小公司优点 需求有限 但对项目人员的要求也有限。。
大公司 需求广 对项目人员要求也高。。。
你在华为混3年 然后去小公司 就发现 他们的需求就是小菜
不过你要是在 小公司混3年 再去华为 就发现你还是菜鸟。。。
--------------------编程问答-------------------- 后台~~就表考虑美观了,对齐就行…… --------------------编程问答--------------------
赞成 一般情况下都是美工搞定的 除非你们公司没美工 --------------------编程问答-------------------- To 楼上:
我们真没有美工,我们是生产性的企业,用开发的软件去辅助日常的工作。我做了一年的C/S结构,实在受不了了,各种受不了,决心今年把公司的系统管理Web化一下,可能靠我一个人希望渺茫,但我想试一下。
看了很多朋友推荐Extjs,感觉它很好很强大
http://topic.csdn.net/u/20101027/10/41A881B7-0307-4ED4-8800-02D2584D820C.html
但是看了今天置顶的这篇文章,真是。。。。。就感觉在听神曲,神马都看不明白。 --------------------编程问答-------------------- 没什么的 就那样把
补充:.NET技术 , ASP.NET