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

個人理解

就是說你的項目不可能每條數據都是TextBox能解決的吧，所以你要改，什么textarea,dropdownlist,selectlist之類的你都要設計，這也是Mvc的一個缺點，沒有可視化的組件給你直接拖上來（cshtml視圖有，貌似這個用的不多），可能下載一些插件什么的能實現吧，但Lz目前還沒發現

1.1.  Label設計

     

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

1.2.  Textbox設計

        <div class="editor-field">

            @Html.EditorFor(model => model.TeacherName)

            @Html.ValidationMessageFor(model => model.TeacherName)

        </div>

 

1.3.  Textarea設計

        

<div class="editor-field">

            @Html.TextArea("ContinuingEducation", Model.ContinuingEducation, 5, 50, null)

        </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里綁定數據

        //

        // GET: /TeacherProject/Create

        public ActionResult Create()

        {

            projectTypeList.Add("自然科學類");

            projectTypeList.Add("社會科學類");

            ViewData["projectType"] = new SelectList(projectTypeList);

            manageTypeList.Add("主持");

            manageTypeList.Add("參與");

            ViewData["manageType"] = new SelectList(manageTypeList);

            return View();

        }

 

修改view對應位置

     <div class="editor-label">

            @Html.LabelFor(model => model.ProjectType)

        </div>

        <div class="editor-field">

            @Html.DropDownList("ProjectType", (SelectList)ViewData["projectType"])

            @Html.ValidationMessageFor(model => model.ProjectType)

        </div>

 

1.5.  單選項設計

     

   [DisplayName("是否申請專利")]

        /// <summary>

        /// 是否取得專利

        /// </summary>

        public bool IsPatent { get; set; }

 

1.6.  滾動新聞效果設計

<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是不需要設置的。

 未完待續。。。