mvc area区域和异步表单，bootstrap简单实例
码农最怕眼高手低
今天来练习mvc Area技术和bootstrap以及异步表单的C#代码实现。
1.area区域架构对于建立复杂业务逻辑很有帮助，由 AreaRegistration.RegisterAllAreas()方法遍历路由表，获得所有注册的路由。参见
建立类库Common，下设一个文件夹BookStore
在其中建立model和controller。（注意引用System.Web.Mvc这个dll）
项目结构如图：
其中book.cs为model模型
namespace Common.BookStore
{
public class Book
{
public string bookName { get; set; }
public double price { get; set; }
public string bookType { get; set; }
public int num { get; set; }
}
}
注意controller中不要忘了继承Controller
namespace Common.BookStore
{
public class BookCurdController:Controller
{
//添加页面
public ActionResult BookAdd()
{
return View();
}
//模拟添加操作页面
public ActionResult _BookAdd(Book bookModel)
{
bookModel.num += ;
return View(bookModel);
}
}
}
2.建立一个基本mvc程序，我用的mvc4，在根目录下建立Areas文件夹，然后右键-添加-区域，输入我们的BookStore
这样我们添加了一个区域，删除其中的controller和model文件夹。
接着对生成的BookStoreAreaRegistration进行修改
public class BookStoreAreaRegistration : AreaRegistration
{
public override string AreaName
{
get
{
//此为区域的名称，与我们的区域文件夹同名
return "BookStore";
}
} public override void RegisterArea(AreaRegistrationContext context)
{
context.MapRoute(
"BookStore_default",
"BookStore/{controller}/{action}/{id}",
new { action = "Index", id = UrlParameter.Optional },
//命名空间不可少
new string[] { "Common.BookStore" } );
}
}
生成Common类库，在web站点添加对其的引用。
3.现在进行页面部分的制作，我们先添加bootstrap文件，我从ExtJs源码中把bootstrap几个文件扣了出来，添加到web程序中，就像这样
接着，我们添加页面上的引用（或者你把它们放到一个局部视图或者模板视图中也行）
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7..js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/bootstrap/js/jqBootstrapValidation.js")"></script>
套用一个bootstrap框架
<div class="container-fluid" style="margin-top:30px;">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label class="control-label col-xs-4" for="bookName">书名:</label>
<div class=" col-xs-4">
<input id="bookName" class="form-control" type="text" name="bookName" value="" />
</div>
</div>
</div>
</div>
</div>
在这里说明一下，bootstrap依循网格系统，分为12列，最基础的属性由less构建（所以想改造它，可以直接修改less），其中.col-xs-* 是针对小尺寸设备（<768px）的样式。具体参考
http://www.w3cschool.cc/bootstrap/bootstrap-grid-system.html
在设置完样式之后，我们引入异步代码
@using (Ajax.BeginForm(
//指定action,controller
"_BookAdd", "BookCurd", null,
new AjaxOptions()
{
//更新还是替换
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
//标记要更新的div，页面部分由jquery.validate.unobtrusive.js完成
UpdateTargetId = "showMsg",
//提交成功
OnSuccess = "OnSuccess",
//提交失败
OnFailure = "OnFailure",
//完成
OnComplete = "OnComplete"
},
//这个参数设置form表单的属性
htmlAttributes: new { name = "nbform", id = "nbform", @class = "form-horizontal" }))
{ .......
}
最后页面如下
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>图书添加</title>
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7..js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/bootstrap/js/jqBootstrapValidation.js")"></script>
<script type="text/javascript">
$(function () {
$.AddCheckBoxRadioLinster("nbform");
});
function OnSuccess() {
alert("提交成功");
}
function OnFailure() {
alert("提交失败");
}
function OnComplete() {
}
</script>
</head>
<body>
<div class="container-fluid" style="margin-top:30px;">
@using (Ajax.BeginForm("_BookAdd", "BookCurd", null,
new AjaxOptions()
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
UpdateTargetId = "showMsg",
OnSuccess = "OnSuccess",
OnFailure = "OnFailure",
OnComplete = "OnComplete"
},htmlAttributes: new { name = "nbform", id = "nbform", @class = "form-horizontal" }))
{
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label class="control-label col-xs-4" for="bookName">书名:</label>
<div class=" col-xs-4">
<input id="bookName" class="form-control" type="text" name="bookName" value="" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label class="control-label col-xs-4" for="price">价格:</label>
<div class="col-xs-4">
<input id="price" class="form-control" type="text" name="price" maxlength="" minlength="" data-validation-minlength-message="价格最少1位！" data-validation-required-message="不能为空！" required />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label class="control-label col-xs-4" for="bookType">种类:</label>
<div class="col-xs-4">
<label class="checkbox-inline" >
<input type="checkbox" id="bookTypeCheckbox" name="bookTypeCheckbox" value="电子书"/>电子书
</label>
<label class="checkbox-inline" >
<input type="checkbox" name="bookTypeCheckbox" value="印刷版"/>印刷版
</label>
<input type="hidden" id="bookType" name="bookType" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label class="control-label col-xs-4" for="num">数量:</label>
<div class="col-xs-4">
<input id="num" class="form-control" type="text" name="num" maxlength="" minlength="" data-validation-required-message="不能为空！" required />
</div>
</div>
</div>
</div>
<div class="row" >
<div class="col-xs-3 col-md-offset-4">
<button type="submit" class="btn btn=default">提 交</button>
</div>
</div>
}
</div>
<div class="container" id="showMsg">
</div>
</body>
</html>
效果如图：
这里还要说明一下，$.AddCheckBoxRadioLinster("nbform");这个是jqBootstrapValidation.js中的函数很好用。我们看一下他的内部实现
$("#" + formId + " input[type='checkbox'],input[type='radio']").each(
function () {
$(this).change(function() {
var name = $(this).attr("name");
var value = "";
$("#" + formId + " input[name='" + name + "']:checked").each(function() {
value = value + ";" + $(this).val();
});
var length = $(this).attr("type") == "radio" ? : ;
if (value == "") {
$("#" + $(this).attr("name").substr(, $(this).attr("name").length - length)).val("-1");
} else {
$(this).parents(".form-group").first().removeClass("error");
$("#" + $(this).attr("name").substr(, $(this).attr("name").length - length)).attr("value",length == ? value.substr(, length) : value + ";");
}
});
}
);
以字符串拼接的方式来约束字段和处理，它不但可以动态绑定checkbox，radio还可以绑定select下拉框。。。。。。
关于jqBootstrapValidation类似于maxlength 来约束输入的更多用法，参见：
http://reactiveraven.github.io/jqBootstrapValidation/
mvc area区域和异步表单，bootstrap简单实例的更多相关文章
- jquery实现表单验证简单实例
/* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...
- mvc自带的异步表单提交
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- mvc异步表单遇到的问题
1,mvc异步表单遇到的问题 问题:使用jqury easy ui 时提交异步数据不能请求到服务器 解决办法:经过细心调试和检测,发现jqury的加载顺序放在了easy ui之后,所以首先加 ...
- ajax jquery 异步表单验证
文件目录: html代码: <html> <head> <title>异步表单验证</title> <script type='text/java ...
- 【干货】Laravel --Validate (表单验证) 使用实例
前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验 ...
- php框架中的phalcon框架的安装，及初步认识，从表单提交简单的数据到数据库中
php框架中的phalcon框架的安装,及初步认识,从表单提交简单的数据到数据库中 1.phalcon框架的安装: phalcon框架在windows本地安装可以利用wamp软件,安装之后可以查看对应 ...
- PHP通过session判断防止表单重复提交实例
PHP通过session判断防止表单重复提交实例,当用户提交表单后,为防止重复操作,通过session来判断是否为初次提交,否则让他返回到之前表单页面. 当前表单页面is_submit设为0 SESS ...
- asp.net mvc 模型验证注解，表单提交
一.添加模型 public class Account { public int ID { get; set; } [Display(Name = "姓名")] //设置要显示的字 ...
- jQuery异步表单提交
有时在A页面点击按钮弹出一个form表单,在填完表单后提交成功后,需要关闭表单页并将表单中的某些值反应在A页面上,这时就需要异步提交表单.其实也挺简单,只是需要把表单数据序列化. $("#f ...
随机推荐
- ASP.NET Core1.0 带来的新特性
1.采用新的文件系统,不再通过工程文件(.sln和.csproj)来定义项目文件清单. 解决方案文件还是*.sln,但项目文件变成*.xproj了.在项目文件夹下新增的文件会被自动添加到项目中,不用再 ...
- Java中Scanner类和BufferReader类之间的区别
java.util.Scanner类是一个简单的文本扫描类,它可以解析基本数据类型和字符串.它本质上是使用正则表达式去读取不同的数据类型. Java.io.BufferedReader类为了能够高效的 ...
- ASP.NET本质论第一章网站应用程序学习笔记2
1.初步走进ASP.NET 上篇笔记我们讲述了服务器监听问题,这篇我们就要讲述具体的请求处理了,ASP.NET所涉及的类大多数定义在System.Web程序集中. 在.NET中,程序集管理的最小逻辑单 ...
- 关于setInterval和setTImeout中的this指向问题
前些天在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,如下例: var num = 0; function ...
- 可怜的js居然没有块级作用域
js中在一个函数中定义一个for循环:for(var i=0;i<5;i++) 其中的i并不会随着for循环的结束就销毁,i会一直存在该函数中,这就是js和其他语言的区别,也就是js没有块级作用 ...
- WPF下递归生成树形数据绑定到TreeView上
最终效果图:(用于学习类的效果 图片丑了点,看官莫怪) 新建窗体 然后在前端适当位置插入如下代码: <TreeView x:Name="> <TreeView.ItemTe ...
- iscroll性能
iscroll是比较耗性能的,在iPhone和性能比较好的机是比较流畅的,在性能低的手机就会出现卡的情况.所以如果不想出现这种情况,只有不使用iscroll,囧.
- Oracle_spatial的函数介绍[转]
Oracle_spatial的函数 一sdo_Geom包的函数: 用于表示两个几何对象的关系(结果为True/False)的函数:RELATE,WITHIN_DISTANCE 验证的函数:VALIDA ...
- mysql innoDB 挂了的临时解决方案
Mysql InnoDB: Error: checksum mismatch by Mattias Hemmingsson on December 23, 2013 in Linux • 6 Comm ...
- Objective-C
1.OC基础 第一个OC的类 Objective-C: 字符串NSString与NSMutableString iOS开发的入门总结的第一篇 iOS开发的入门总结的第二篇