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.mvc 的单文件上传和多文件上传的简单例子
首先打开vs2012,创建空的mvc4项目,名称为MVCStudy,选择基本模板
- 重新想象 Windows 8 Store Apps (43) - 多线程之任务: Task 基础, 多任务并行执行, 并行运算（Parallel）
[源码下载] 重新想象 Windows 8 Store Apps (43) - 多线程之任务: Task 基础, 多任务并行执行, 并行运算(Parallel) 作者:webabcd 介绍重新想象 W ...
- C#按回车Enter使输入焦点自动跳到下一个TextBox的方法收集
在录入界面中,用户往往需要按回车键时光标自动跳入下一个文本框,以方便录入操作.在C#中实现该功能有多种方法,以下是小编收集的不使用TAB键,而直接用回车键将光标转到下一个文本框的实现方法. 一.利用W ...
- 比较偏门的JVM语言Quercus - PHP on JVM
其实,我不确定Quercus是否可以被认定为一门JVM语言:其次Quercus这个东东分开源版与商业版,开源版只能解释执行.而商业版能编译成Java字节码. 但我知道国内,阿里巴巴很早就在使用它,当然 ...
- Spring核心概念之AOP
一.AOP 的概念 AOP(Aspect Oriented Programming)的缩写,面向切面编程,主要作用就是对代码进行增强处理. 理解面向切面编程的含义:就是在不改变原有程序的基础上为代码增 ...
- 窗体==>>初始Windows程序
初识Windows程序 01.创建Windows程序(VS) 01.打开Visual Studio开发工具 02.选择"文件"→"新建"→"项目&qu ...
- dapper的增、删、查改的CodeSmith模板
<%@ Template Language="C#" TargetLanguage="Text" %> <%@ Property Name=& ...
- 使用WebMatrix发布网站
使用WebMatrix发布网站 WebMatrix 简介: Microsoft WebMatrix 是微软最新的 Web 开发工具,它包含了构建网站所需要的一切元素.您可以从开源 Web 项目或者内置 ...
- Android项目结构分析
andriod项目目录结构如下图: 1. src目录 该目录一个普通的保存java源文件的目录,其和普通java工程中的src目录是一样的. 2. gen目录 此目录用于存放所有由ADT插件自动生成的 ...
- 揭开智能配置上网（微信Airkiss）的神秘面纱
本文介绍微信利用Airkiss技术对wifi设备进行智能配置上网的场景,并分析其实现的原理.这里再次说明,Airkiss只是用于配置上网,其跟微信硬件平台的通信流程和接入协议规范完全没有关系.一个wi ...