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 ...
随机推荐
- 多余的Using Namespaces或引用会影响程序的执行效率么？
在.NET程序编写中,需要using相应命名空间或添加相应的References,可有时候没有使用到的命名空间也被添加到了Using Namespaces中,那么,这样会影响程序的执行效率么? 通过示 ...
- java jdk environment variables
1. create system variable 2. edit the system path note: ;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; 3. cre ...
- python学习笔记2（pycharm、数据类型）
Pycharm 的使用 IDE(Integrated Development Environ ment) :集成开发环境 Vim :经典的linux下的文本编辑器(菜鸟和大神喜欢使用) Emac ...
- memcache与memcached扩展的区别
一.服务端 之前理解错误了.服务端只有一个memcache,一般把服务端称作memcached(带d),是因为守护进程的名称就是叫做memcached(一个这样的执行程序文件). 编写的语言:c语言 ...
- PHP程序z中xdebug工具简要使用方法
PHP程序的debug PHP程序的debug,无论是cli方式还是web方式,都需要使用第三方的debug工具.PHP5.6之前,本身自带的debug功能,仅限于日志输出. 推荐使用免费xdebug ...
- 【干货分享】Node.js 中文资料导航
这篇文章与大家分享一批高质量的的 Node.js 中文资料.Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的, 易于扩展的网络应用 Node ...
- css 负边距 小记
水平格式化 当我们在元素上设置width的时候,影响的是内容区的宽度 但是当我们又为元素指定指定了内边距 边框 外边距 还是会增加宽度值 (IE传统盒模型 内边距 边框 会在元素的宽度内扩展 ma ...
- Javascript中的Label语句
在javascript中,我们可能很少会去用到 Label 语句,但是熟练的应用 Label 语句,尤其是在嵌套循环中熟练应用 break, continue 与 Label 可以精确的返回到你想要的 ...
- 使用WebMatrix发布网站
使用WebMatrix发布网站 WebMatrix 简介: Microsoft WebMatrix 是微软最新的 Web 开发工具,它包含了构建网站所需要的一切元素.您可以从开源 Web 项目或者内置 ...
- 参加2013中国大数据技术大会(BDTC2013)
2013年12月5日-6日参加了为期两天的2013中国大数据技术大会(Big Data Technology Conference, BDTC2013),本期会议主题是:“应用驱动的架构与技术 ”.大 ...