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 ...
随机推荐
- 重新想象 Windows 8 Store Apps (46) - 多线程之线程同步: Lock, Monitor, Interlocked, Mutex, ReaderWriterLock
[源码下载] 重新想象 Windows 8 Store Apps (46) - 多线程之线程同步: Lock, Monitor, Interlocked, Mutex, ReaderWriterLoc ...
- Java集合框架之Collection接口
Java是一门面向对象的语言,那么我们写程序的时候最经常操作的便是对象了,为此,Java提供了一些专门用来处理对象的类库,这些类库的集合我们称之为集合框架.Java集合工具包位于Java.util包下 ...
- 泛函编程（23）－泛函数据类型－Monad
简单来说:Monad就是泛函编程中最概括通用的数据模型(高阶数据类型).它不但涵盖了所有基础类型(primitive types)的泛函行为及操作,而且任何高阶类或者自定义类一旦具备Monad特性就可 ...
- 【poj 2185】Milking Grid（字符串--KMP+问题分解）
题意:给定一个由字符组成的矩阵,求出它的面积最小的覆盖矩阵.(感觉应该是可重叠的......* (・ω・)っ) 解法:KMP.行列互不影响,可以问题分解.先求出每一行的最小重复串,利用kmp中的nex ...
- Windows程序==>>使用ListView控件展示数据
使用ListView控件展示数据 01.ImageList控件 1.了解了解 属性 说明 Images 储存在图像列表中的所有图像 ImageSize 图像列表中图像的大小 Trans ...
- 公司mysql数据库设计与优化培训ppt
cnblogs无法上传附件. http://pan.baidu.com/s/1kVGqMn9
- andriod 用户名和密码
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- Create a “% Complete” Progress Bar with JS Link in SharePoint 2013
Create a “% Complete” Progress Bar with JS Link in SharePoint 2013 SharePoint 2013 has a lot new fea ...
- Sharepoint学习笔记—习题系列--70-573习题解析 -(Q100-Q103)
Question 100You create a Web Part.You need to display the number of visits to a SharePoint site coll ...
- Swift的7大误区
Swift正在完成一个惊人的壮举,它正在改变我们在苹果设备上编程的方式,引入了很多现代范例,例如:函数式编程和相比于OC这种纯面向对象语言更丰富的类型检查. Swift语言希望通过采用安全的编程模式去 ...