Web端编写（三）——用户控件和首页2

最新推荐文章于 2023-12-25 16:13:42 发布

hzfire

最新推荐文章于 2023-12-25 16:13:42 发布

阅读量261

点赞数

分类专栏：会议系统 c# JS

本文链接：https://blog.csdn.net/hzfire/article/details/45056569

版权

会议系统同时被 3 个专栏收录

21 篇文章 1 订阅

订阅专栏

18 篇文章 1 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

没办法，没想到那么长的，这篇讲首页，也及时default.aspx，这个是IIS默认的首页，系统中用来列出所有会议。页面效果请参看上一篇博文。

先上全部页面代码，再挑重点的解释并附上相应的CSS和JS。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MeetingSys.Default" %>
<%@ Register TagName="WapTitle" TagPrefix="UC_Title" Src="AppUC/Title.ascx" %>
<%@ Register TagName="CopyRight" TagPrefix="UC_CopyRight" Src="AppUC/CopyRight.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-Control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="viewport" content="user-scalable=yes, width=device-width"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="..\Styles\WapStyle.css"/>
    <script type="text/javascript" src="..\Scripts\MeetingSys.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <UC_Title:WapTitle ID="TopTitle" runat="server" />
    <div id="PopMenu">
	    <p οnclick="PopContact();">联系我们</p>        
		<p οnclick="PopAbout();">关于系统</p>
	</div>
    <div id="MeetingIT">
    <asp:Repeater ID="MeetingRP" runat="server">
        <ItemTemplate>
            <ul οnclick="GoMeeting('<%#Eval("ID").ToString().Trim() %>')">
                <li>会议标题：<%#Eval("mName").ToString().Trim()%></li>
                <li>开始时间：<%#string.Format("{0:f}",Convert.ToDateTime( Eval("mTimeStar").ToString().Trim()))%></li>
                <li>结束时间：<%#string.Format("{0:f}", Convert.ToDateTime( Eval("mTimeOver").ToString().Trim()))%></li>
                <li>会议地点：<%#GetMeetingRoom(Eval("mRoom").ToString().Trim())%></li>
            </ul>
        </ItemTemplate>
    </asp:Repeater>
    </div>
    <UC_CopyRight:CopyRight ID="CopyRightUC" runat="server" />
    </div>
    </form>
</body>
</html>

第一行不用解释，aspx页面的例牌菜，不熟悉的不要去改它，改动的麻烦自己解决。

第二行和第三行都是一样的，注册用户控件，看src参数就知道了。挑第二条讲

<%@ Register TagName="WapTitle" TagPrefix="UC_Title" Src="AppUC/Title.ascx" %>这个就是注册引用上篇讲到的Title用户控件。其中TagName和TagPrefix随便自己填，但在引用位置的时候要一致。

head里面共有4个meta标签，前3个是告诉浏览器，每次打开页面的时候不使用缓存，调试期间要这样使用，最终版本可以删除，第四个meta标签是针对webkit核心浏览器使用的，告诉webview自动使用屏幕，这个标签必须保留，否则平板终端浏览时会出现滚动条的，效果异常差。

body没有些样式，因为这个样式写在样式表里面了。

body 
{
    background-color: #FFF;
    color: #000;
    font-family: droid sans fallback;
    font-size: 1em;
    margin: 0;
    padding: 0; 
    }

<UC_Title:WapTitle ID="TopTitle" runat="server" />这个地方就引入用户控件了，因为html是顺序解释的，标题栏必须放在最上方，所以在这个位置引入。

接下来就是PopMenu层了，也就是弹出菜单层，这个层用P标签来分行，用JS函数分别对应菜单事件。

PopMenu层的样式

#PopMenu
{
    width:auto;
    height:auto;
    position:absolute;
    z-index:10;
    margin-top:21px;
    padding:5px 5px 5px 5px;
    right:15px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 2px 2px 10px #909090;
    border: 1px solid #444;
    background-color: #058BB0;
    display:none;
    }

PopContact()的JS函数

//弹出联系我们
function PopContact() {
    document.getElementById("PopMenu").style.display = "none";
    document.getElementById("Mask").style.display = "block";
    document.getElementById("ContactDiv").style.display = "block";
}

PopAbout()的JS函数

//弹出关于系统层
function PopAbout() {
    document.getElementById("PopMenu").style.display = "none";
    document.getElementById("Mask").style.display = "block";
    document.getElementById("AboutDiv").style.display = "block";
}

上述代码都很简单，就不多讲究了，CSS代码基本都那鸟样，多写几个就熟练了。

接下来是MeetingIT层，这里面包含了一个服务器端的控件Repeater，用于列出所有会议，这里稍微复杂了点。

先给出MeetingIT的样式，用于控制显示内容所处位置，注意使用了ul和li，样式有继承的。

#MeetingIT
{
    position:absolute;
    width:96%;  
    left:2%;
    right:2%;  
    top:2em;  
	padding:0px;  
    height:auto; 
    }
#MeetingIT ul
{
    display:block;
    list-style:none;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 2px 2px 10px #909090;
    background:#dddddd;
    padding:0px;
    width:100%;
    }
#MeetingIT ul li
{
    padding-left:1em;
    padding-right:1em;
    font-size:1em;
    text-align:left;
    }

Repeater控件的用法很简单，有多少条数据，就会自动重复多少个ItemTemplate，把数据绑定就可以了，在ItemTemplate里面需要显示数据的地方，用Eval("字段名")就可以了。

好，在页面加载函数中来绑定数据，并把标题栏的文字传递过去。

protected void Page_Load(object sender, EventArgs e)
        {
            this.Title = "会议系统";
            DataTable DT = MeetingOP.DataOP.GetDataTable("Select * from Meeting");
            if (DT.Rows.Count > 0)
            {
                MeetingRP.DataSource = DT;
                MeetingRP.DataBind();
                TopTitle.sTitle = "请选择需要参加的会议";
            }
            else
            {
                TopTitle.sTitle = "目前好像还没有准备召开的会议";
            }
        }

TopTitle.sTitle = "请选择需要参加的会议";就是传递参数用的，TopTitle是用户控件加载的ID，这样的用户控件可以在同一页面加载多次的，ID不同就可以了。

上面的代码也很简单，用SQL指令读取数据放在一个DataTable里面，如果有数据就绑定Repeater里，没有就在标题栏显示提示信息。注意，这里因为是调试阶段，没有对会议进行筛选，是列出所有会议的，最终版本是需要筛选的；还有就是使用到DataTable来定义变量，需要“using System.Data;”的，IDE不会自动添加的，要自己手动写上去。

<li>会议地点：<%#GetMeetingRoom(Eval("mRoom").ToString().Trim())%></li>这里用了一个函数，因为数据库里面会议室是一个数字，要转成会议室名称的，所以要写一个函数来转

        protected static string GetMeetingRoom(string ID)
        {
            return MeetingOP.DataOP.GetAny("MeetingRoom", "mName","ID",ID);
        }

由于ul是在ItemTemplate里面，每个ItemTemplate都会生成一个ul，所以ul的onclick函数使用了<%#Eval("ID").ToString().Trim() %>来获取会议ID做参数，这样单击ul就可以进入下一个页面了。

//进入指定ID的会议，查看会议议程
function GoMeeting(MeetingID) {
    window.location= "Meeting.aspx?ID=" + MeetingID;
}

这个页面跳转很坑爹的，必须使用window.location的方法，其余一律不行，webview不认其他跳转方法的。
后面的版权声明就不多说了，我蛋疼写的多余东西。
OK，到这里就可以搞定第一个页面了，可以很像手机APP的方式搞定default.aspx了，上面的代码可以看得很清楚，下个页面就是Meeting.aspx了。