Mvc示例之五---Form強類型提交

本節我們講解一下如何用強類型視圖進行數據的添加、編輯。

獲取數據的Action:

public ActionResult Index(int? id)//int?代表該參數可以爲空，當爲空時實際代表添加數據
        {
            BigClass_NewS bigNews = new BigClass_NewS();
            bigNews.FromDataTable(EntityDMHelper.GetBigClass_New());
            ViewBag.News = bigNews;
            NewsS news = new NewsS();
            News model = new News();
            
            if (id.HasValue)//如果是編輯，則查詢數據
            {
                news.FromDataTable(EntityDMHelper.GetNewsById(id.Value));
                if (news.Count > 0)
                {
                    model = news[0];
                }
            }
            return View(model);//強類型視圖中的Model
        }

我們同樣添加強類型視圖：

@model Entity.News
@using Entity;
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="@Url.Content("~/ueditor/themes/default/css/ueditor.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="@Url.Content("~/ueditor/ueditor.config.js")"></script>
<script type="text/javascript" charset="utf-8" src="@Url.Content("~/ueditor/ueditor.all.js")"></script>
<script>
    var editor=null;
    $(function () {
        $("#form").validate();
        editor = new UE.ui.Editor();
             editor.render('editor');
             editor.ready(function(){
               editor.setHeight(460);
             });
    });
    function save() {
        var content=editor.getAllHtml();
        if($("#form").valid()){
           $.post("@Url.Action("Save")", { Content:content, Title: $("#Title").val(),ID:$("#ID").val(), BigClassName:$("#BigClassName").val(),
                                           SmallClassName:$("#SmallClassName").val(),FirstImageName:$("#FirstImageName").val(),
                                           User:$("#User").val(),Ok:$("input:checked").val()},function(data){
                                              alert(data.msg);
                                              
                                           });
        }
    }
    function InitSmallClass(){
       var bigClass=$("#BigClassName").val();
       if(bigClass.length>1){
         $.getJSON("@Url.Action("GetSmallClass")?BigClass="+bigClass, function(data){
           $("#SmallClassName").empty();
           $.each(data, function(i,item){
              if(item.SmallClassName){
                 $("#SmallClassName").prepend("<option value='"+item.SmallClassID+"'>"+item.SmallClassName+"</option>");
              }
           });
         });
       }
    }
</script>

<form role="form" id="form" class="form-horizontal">
  <div class="form-group">
    <label for="Title" class="control-label" style="margin-left:2px;">文章標題</label>
    <input  type="text" maxlength="45" minlength="8"  class="required form-control span6" id="Title" value="@Model.Title" placeholder="Enter title" /> <label></label>
  </div>
  <div class="form-group" style="margin-bottom:10px;">
    <label for="exampleInputPassword1"  class="control-label ">文章類別</label>
      <select  class="form-control " id="BigClassName"  class="form-control span4" οnchange="InitSmallClass();">
         <option value=""  >-請選擇-</option>
         @foreach(BigClass_New bigClass in ViewBag.news){
             <option value="@bigClass.BigClassName" @if(!string.IsNullOrEmpty(Model.BigClassName)&&Model.BigClassName.Equals(@bigClass.BigClassName)){ @("Selected") }>@bigClass.BigClassName</option>
         }
      </select>
      <select class="form-control" id="SmallClassName" />

  
  </div>
  <div class="form-group">
     <label></label>
     <input type="hidden" id="ID" value="@Model.ID" />
   </div>
  <div class="form-group" style="margin-top:10px;">
    <textarea id="editor">@Model.Content</textarea>
    
   </div>
   
   <div class="form-group" style="margin-top:10px;">
    <label for="FirstImageName" class="control-label" style="margin-left:2px;">首頁圖片</label>
       <input  type="text"class="form-control span4" id="FirstImageName" value="@Model.FirstImageName" placeholder="圖片地址" /> <label></label>
  </div>
  <div class="form-group">
    <label for="User" class="control-label" style="margin-left:2px;">發佈人</label>
       <input  type="text"class="form-control span4" id="User" placeholder="發佈人" name="User" value="@Model.User" /> <label></label>
  </div>

  <div class="form-group">
    <label for="Ok" class="control-label" style="margin-left:2px;">是否發佈圖片</label>
        <input  type="radio"   name="Ok" class="span1" value="true" @if(Model.Ok){@("Checked")} />是 <input  type="radio" class="span1"  name="Ok"  value="false" @if(!Model.Ok){@("Checked")} />否
  </div>
  <div class="form-group" style="margin-top:15px;padding-left:85px;">
     <label for="button" ></label>
     <button type="button" class="btn btn-primary" id="button" οnclick="save();" class="btn btn-default">提    交</button>
  </div>
</form>

如下語句是實際保存的數據

 <input  type="text"class="form-control span4" id="User" placeholder="發佈人" name="User" value="@Model.User" />

通過 value="@Model.User"可以將編輯狀態下原來數據值填寫進去。

我們用jquery進行ajax提交：

 function save() {
        var content=editor.getAllHtml();
        if($("#form").valid()){
           $.post("@Url.Action("Save")", { Content:content, Title: $("#Title").val(),ID:$("#ID").val(), BigClassName:$("#BigClassName").val(),
                                           SmallClassName:$("#SmallClassName").val(),FirstImageName:$("#FirstImageName").val(),
                                           User:$("#User").val(),Ok:$("input:checked").val()},function(data){
                                              alert(data.msg);
                                              
                                           });
        }
    }
其中的數據字段要和@model Entity.News一一對應，這樣才能實行強類型提交

然後，保存的Action只要如下寫法就可以了：

        [ValidateInput(false)]
        [CheckinLogin]
        public ActionResult Save(News news)//注意參數不是FormCollection
        {
            int count = 0;
            string errMsg=string.Empty;
            try
            {
               if (news.ID>0)
               {
                   count = news.Save();
               }
               else
               {
                   news.ID = EntityDMHelper.GetMaxNewsId()+1;
                   news.AddDate = DateTime.Now;
                   count = News.InsertNews(news);
               }
            }
            catch(Exception ex)
            {
                errMsg=ex.Message;
            }
            if (count > 0)
            {
                return Json(new { msg = "修改成功", flag = true }, JsonRequestBehavior.AllowGet); 
            }
            else
            {
                return Json(new { msg = "修改失敗", flag = false}, JsonRequestBehavior.AllowGet);
            }
        }

這樣傳遞免去了將form數據實例化爲對象的過程，是一種很和諧的寫法。

好了，由於是假期，本節說的內容很少。下一節講解一下bs開發中的路徑。