本节我们讲解一下如何用强类型视图进行数据的添加、编辑。
获取数据的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开发中的路径。