MVC4學習筆記（四）- MVC介面設計

個人理解

就是說你的項目不可能每條資料都是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是不需要設定的。

 未完待續。。。