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" onchange="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" onclick="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开发中的路径。