现在的位置: 首页 > 综合 > 正文

MVC4学习笔记(四)- MVC界面设计

2012年11月21日 ⁄ 综合 ⁄ 共 2167字 ⁄ 字号 评论关闭

个人理解

就是说你的项目不可能每条数据都是TextBox能解决的吧,所以你要改,什么textarea,dropdownlist,selectlist之类的你都要设计,这也是Mvc的一个缺点,没有可视化的组件给你直接拖上来(cshtml视图有,貌似这个用的不多),可能下载一些插件什么的能实现吧,但Lz目前还没发现

1.1.  Label设计

     

1 <div class="editor-label">
2             @Html.LabelFor(model => model.TeacherName)
3 </div>

1.2.  Textbox设计

1         <div class="editor-field">
2 
3             @Html.EditorFor(model => model.TeacherName)
4 
5             @Html.ValidationMessageFor(model => model.TeacherName)
6 
7         </div>

 

1.3.  Textarea设计

        

1 <div class="editor-field">
2 
3             @Html.TextArea("ContinuingEducation", Model.ContinuingEducation, 5, 50, null)
4 
5         </div>

 

1.4.  下拉框设计

修改Control在类顶加入如下加粗部分字段

namespace TeacherManageSystem.Controllers

{

    [HandleError]

    [UserAuthorizeAttribute(Roles = "teacher")]

    public class TeacherProjectController : Controller

    {

        private TMSEntities db = new TMSEntities();

 List<string> projectTypeList = new List<string>();

       List<string> manageTypeList = new List<string>();

        TeacherInfo teacherInfo;

        //

        // GET: /TeacherProject/

        public ActionResult Index(string title)

 

在相关的action里绑定数据

 1         //
 2 
 3         // GET: /TeacherProject/Create
 4 
 5         public ActionResult Create()
 6 
 7         {
 8 
 9             projectTypeList.Add("自然科学类");
10 
11             projectTypeList.Add("社会科学类");
12 
13             ViewData["projectType"] = new SelectList(projectTypeList);
14 
15             manageTypeList.Add("主持");
16 
17             manageTypeList.Add("参与");
18 
19             ViewData["manageType"] = new SelectList(manageTypeList);
20 
21             return View();
22 
23         }

 

修改view对应位置

 1      <div class="editor-label">
 2 
 3             @Html.LabelFor(model => model.ProjectType)
 4 
 5         </div>
 6 
 7         <div class="editor-field">
 8 
 9             @Html.DropDownList("ProjectType", (SelectList)ViewData["projectType"])
10 
11             @Html.ValidationMessageFor(model => model.ProjectType)
12 
13         </div>

 

1.5.  单选项设计

     

1    [DisplayName("是否申请专利")]
2 
3         /// <summary>
4 
5         /// 是否取得专利
6 
7         /// </summary>
8 
9         public bool IsPatent { get; set; }

 

1.6.  滚动新闻效果设计

1 <MARQUEE onmouseover=this.stop() onmouseout=this.start()scrollAmount=4 width=400 height=150 direction="up"> 你要滚动的内容</MARQUEE>

 

把这段直接放在<td></td>中
解释:
onmouseover=this.stop()是鼠标悬浮停止
onmouseout=this.start()是鼠标离开继续滚动
width和height分别是宽度和高度.根据需要自定义大小.
BGColor:滚动文本框的背景颜色。
scrollamount:一次滚动总的时间量,数字越小滚动越慢。
Behaviour:滚动的方式设置,三种取值:Scroll(循环滚动) lide(单次滚动)、Alternate(来回滚动)。
align:文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。
direction:表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。
scrollDelay:这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。

 未完待续。。。

抱歉!评论已关闭.