当前位置:编程学习 > C#/ASP.NET >>

马上要用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多些

如果是内部系统,点到为止即可 --------------------编程问答--------------------
引用 2 楼 zx75991 的回复:
后台的话功能优先,不要去过多考虑美观之类的问题。
网上可以找到很多前后台的静态模板,借鉴下还是可以的。


其实,我美观上我已经不敢考虑很多了,
我就会用PS在图片上改点文字,或者建几个图层把几个图拼一块,
就希望能找一个能看过去眼的,我自己改点文字就行了。 --------------------编程问答-------------------- 这个也是一个杯具,我们没有美工。。。。只有我一个人。。。。所有都我一个人。

引用 2 楼 zx75991 的回复:
后台的话功能优先,不要去过多考虑美观之类的问题。
网上可以找到很多前后台的静态模板,借鉴下还是可以的。


--------------------编程问答-------------------- 搭配的挺好的,也祝你早日成功!

你身边最起码还有牛人只是没空,我身边神马牛人都没有。全都我自己来。

引用 10 楼 chenyujian1987 的回复:
楼上的貌似很给力喔~~~~我现在又在做毕业设计喔。。。。类型就是楼主说的那样。。。我又一个人做!!!那些牛人都没空理我。。。。烦死我了!失败。。。。住楼主早日解决问题啦!
这是我现在做着的模板哦。不过这么烂也帮不了楼主的了!!
--------------------编程问答-------------------- 去51asx。com 下载个看下 --------------------编程问答-------------------- 弄详设的撒、然后去弄框架啦~~

自己谷狗就ok的 --------------------编程问答-------------------- --------------------编程问答-------------------- 听下传说中的神曲:忐忑估计楼主就会了.
--------------------编程问答--------------------
引用 10 楼 chenyujian1987 的回复:
楼上的貌似很给力喔~~~~我现在又在做毕业设计喔。。。。类型就是楼主说的那样。。。我又一个人做!!!那些牛人都没空理我。。。。烦死我了!失败。。。。住楼主早日解决问题啦!
这是我现在做着的模板哦。不过这么烂也帮不了楼主的了!!


这个是asp.net ajax页面的那个吧?很难看的哈哈,之前也用过。 --------------------编程问答--------------------
引用 4 楼 takako_mu 的回复:
找素材,抄襲.

我一直這麼干的...
bad copy,good steal.


人才啊。
www.51aspx.com --------------------编程问答--------------------
引用 12 楼 chen_ya_ping 的回复:
这些的话,其实你们公司的美工会帮你搞定的。


小公司是没有美工的,就好像我们的公司一个项目都是一个人搞定的。,像上面有位讲的,先弄好后台比较重要
! --------------------编程问答--------------------
引用 20 楼 amandag 的回复:
公司里木有专业美工,自己做一般只能找第三方控件,否则费力还不讨好,个人使用jquery多些

如果是内部系统,点到为止即可
唉.不容易啊.人家很挑剔的情况下.很难搞的.上次特地发邮件过来说颜色不对啊.图片的箭头不要向下啊.我晕...要求超高的 --------------------编程问答-------------------- 茁壮成长中 --------------------编程问答-------------------- 我在部门也是唯一的软件设计 因为公司是做商务的不是卖软件的 
起初从网上找了很多素材 边修改别人的边学习,后来发现还是自己写的更适合于公司内部站点,初学的话我建议还是用.net自带的一些menu菜单 上手也快 会的多了再改漂亮的 --------------------编程问答-------------------- 搞这个东西快的话也就一个小时吧,实现目录树。 --------------------编程问答-------------------- --------------------编程问答-------------------- 看你搞什么网站,如果是专业开发网站的,基本上美工加套站,
那个源码99,网址www.yuanma99.com,不过要下里面东西,需要交点钱注册个会员,那里面都是很多大站的源码,很给力;
我也有去下,不过号码是朋友的,我自己不要花钱 --------------------编程问答-------------------- 在51aspx.com下载过不少东西,后台管理的模板可用性蛮高。前面美观还得找美工啊。 --------------------编程问答-------------------- --------------------编程问答--------------------
引用 1 楼 rock870210 的回复:
Extjs

新手学习这个应用于项目很耗费时间的说。。 --------------------编程问答-------------------- --------------------编程问答-------------------- --------------------编程问答-------------------- 第一次是这样的多做两次就行了 
顶你 --------------------编程问答-------------------- ...如果楼主想吃这行饭。。。去较大的公司比较好。。。

大点的公司有专门的人员和项目组。。。学的系统化一点 比自学 强多了! 

小公司优点 需求有限 但对项目人员的要求也有限。。

大公司 需求广  对项目人员要求也高。。。

你在华为混3年 然后去小公司 就发现 他们的需求就是小菜

不过你要是在 小公司混3年 再去华为 就发现你还是菜鸟。。。

--------------------编程问答-------------------- 后台~~就表考虑美观了,对齐就行…… --------------------编程问答--------------------
引用 12 楼 chen_ya_ping 的回复:
这些的话,其实你们公司的美工会帮你搞定的。


  赞成  一般情况下都是美工搞定的 除非你们公司没美工 --------------------编程问答-------------------- To 楼上:
我们真没有美工,我们是生产性的企业,用开发的软件去辅助日常的工作。我做了一年的C/S结构,实在受不了了,各种受不了,决心今年把公司的系统管理Web化一下,可能靠我一个人希望渺茫,但我想试一下。

看了很多朋友推荐Extjs,感觉它很好很强大
http://topic.csdn.net/u/20101027/10/41A881B7-0307-4ED4-8800-02D2584D820C.html
但是看了今天置顶的这篇文章,真是。。。。。就感觉在听神曲,神马都看不明白。 --------------------编程问答-------------------- 没什么的 就那样把
补充:.NET技术 ,  ASP.NET
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,