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 ...
随机推荐
- android 6.0 httpclient
Apache HTTP Client RemovalAndroid 6.0 release removes support for the Apache HTTP client. If your ap ...
- ex_KMP--Theme Section
题目网址: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=110060#problem/B Description It's time f ...
- js实现向上滚动效果
源码: <style type="text/css"> #up_zzjs{border:1px solid #ccc;width:170px;height:182px; ...
- 利用PBFunc在Powerbuilder中解析Json对象
利用PBFunc工具在Powerbuilder解析json,只需要调用getattribute方法来获取 解析unicode格式的json: n_pbfunc_json lnv_json lnv_js ...
- 关于SQL Server的WITH(NOLOCK)和(NOLOCK)
The difference is that you should be using the syntax WITH (NOLOCK) (or WITH (<any table hint> ...
- 高性能文件缓存key-value存储—Memcached
1.高性能文件缓存key-value存储—Redis 2.ASP.NET HttpRuntime.Cache缓存类使用总结 备注:三篇博文结合阅读,简单理解并且使用,如果想深入学习,请多参考文章中给出 ...
- 微信公共平台开发3 .net
嗯,别的不说了现在开始接着上次http://www.cnblogs.com/QLJ1314/p/3838058.html 获取ACCESSTOKEN,开始吧,接下来我们就写发送文本消息吧. 首先建立 ...
- 通过源码理解UST(用户栈回溯)
UST原理:如果gflags标志中包含了UST标志,堆管理器会为当前进程分配一块内存,这个内存区域就是UST数据库(user-mode stack trace database),并建立一个STACK ...
- SarePoint Powershell Add user to Group
$FromGroupnames = "001总经理","010101管理本部" $ToGroupname = "test" $SPWeb = ...
- GTD3年来读的52本书
2012年 1.一生的计划 平衡:人生要在精神.理财.教育和娱乐4个方面进行平衡. 2.重来REWORK 小型软件公司的创业与软件项目的管理 不要管全年计划,只要找出下一项最重要的任务,然后起 ...