NancyFX 第七章 模型绑定和验证
任何优秀的框架,都能传递参数。在之前的路由章节,我们已经看到了如何在URL中传递参数。
能够传递简单的参数当然好,特别是在设计那些从数据库读取记录的API设计中。但是,很多情况下也是需要传递复杂对象。
这个可能是登录模块的验证信息,或者是数据库表中的多条记录。不管怎么样,只是传递简单对象已经不能满足。
这下就该轮到Nancy的模板绑定功能起作用了。
如果你之前已经熟悉了ASP.NET MVC,你应该已经了解了模型绑定是什么了: 这是一个根据请求和携带的数据去匹配对象变量的
一图赛千言
为了简单起见,想象我们有一个地址簿,我们需要保存地址记录到地址库数据库中。首先要做的就是创建一个代表数据库中记事簿记录的类。如下:
namespace nancybook.Models { public class Address { public int RecordId { get; set; } public string Name { get; set; } public string BuildingAddress { get; set; } public string Town { get; set; } public string County { get; set; } public string PostalCode { get; set; } } }
看下这个类,估计您一眼就能想到,我们采用一个整形数字代表记录,每条记录都是由五个属性构成了地址信息。
当前台通过AJAX向后台提交表单或传递JSON对象时,就能获得其中的五个属性:
正如你在上图中看到的,你可以在Web表单中发送一个复杂对象,每个表单元素的名字和数值会一起拼接为一个字符串。这也适用于发送JSON或XML格式的数据。
模型绑定的任务就是把传递的字符串匹配到对象的属性上。
如果只是传递了部分字段,其他字段仍然是默认值。
一个小例子
让我们创建一个用于存放视图的文件夹address,然后在其中添加一个叫index.html的HTML文件,代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Nancy Demo | Data Binding Example</title>45 <link href="~/content/bootstrap.min.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <div class="page-header"> <h1 style="display: inline-block">Nancy Demo <small>Data Binding Example</small></h1> <h1 style="display: inline-block" class="pull-right"><small><a href="~/" title="Click to return to demo home page">home <span class="glyphicon glyphicon-home"></span></a></small></h1> </div> <p class="lead">Please fill in the form below and click 'Send Data' to perform a data bind to the post action.</p> <input id="RecordId" name="RecordId" type="hidden" value="1"/> <div class="form-group"> <label for="Name">Name</label> <input type="text" class="form-control" id="Name" name="Name" placeholder="Enter Persons Name here"/> </div> <div class="form-group"> <label for="BuildingAddress">Building Address</label> <input type="text" class="form-control" id="BuildingAddress" name="BuildingAddress" placeholder="Enter Building Address here" /> </div> <div class="form-group"> <label for="Town">Town</label> <input type="text" class="form-control" id="Town" name="Town" placeholder="Enter Town here" /> </div> <div class="form-group"> <label for="County">County</label> <input type="text" class="form-control" id="County" name="County" placeholder="Enter County here" /> </div> <div class="form-group"> <label for="PostalCode">Postal Code</label> <input type="text" class="form-control" id="PostalCode" name="PostalCode" placeholder="Enter Postal Code here" /> </div>46 <button type="submit" class="btn btn-primary">Send Data</button> </form> </div> <script src="~/scripts/jquery-2.1.3.min.js"></script> <script src="~/scripts/bootstrap.min.js"></script> </body> </html>
在模块文件夹中添加一个类文件 AddressRoutes.cs,代码如下:
using Nancy; namespace nancybook.modules { public class AddressRoutes : NancyModule { public AddressRoutes() : base("/address") { Get[@"/"] = _ => View["address/index"]; } } }
编译运行,输入请求地址/address,能看到下面的样子:
由三种不同的绑定方式,比较典型的如下:
Address myAddress = this.Bind();
还有采用var ,并输入泛型的
var myAddress = this.Bind<Address>();
最后,如果已经创建模型的对象,还可以这样:
var myAddress = this.BindTo(existingModelInstance);
就我个人而言,我更倾向于第二种。
扩展你的模块类,添加保存的处理,代码如下:
using nancybook.Models; using Nancy; using Nancy.ModelBinding; namespace nancybook.modules { public class AddressRoutes : NancyModule { public AddressRoutes() : base("/address") { Get[@"/"] = _ => View["address/index"];
Post[@"/save"] = _ => { var myAddress = this.Bind<Address>(); return View["address/display", myAddress]; };
} } }
然后再添加一个视图文件 display.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Nancy Demo | Data Binding Example</title> <link href="~/content/bootstrap.min.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <div class="page-header"> <h1 style="display: inline-block">Nancy Demo <small>Data Binding Example</small></h1> <h1 style="display: inline-block" class="pull-right"><small><a href="~/" title="Click to return to demo home page">home <span class="glyphicon glyphicon-home"></span></a></small></h1> </div> <p class="lead">The results from your address form are as follows...</p> <p>Record ID : <strong class="textsuccess">@Model.RecordId</strong></p> <p>Name : <strong class="text-success">@Model.Name</strong></p> <p>Address : <strong class="textsuccess">@Model.BuildingAddress</strong></p>49 <p>Town : <strong class="text-success">@Model.Town</strong></p> <p>County : <strong class="text-success">@Model.County</strong></p> <p>Post Code : <strong class="textsuccess">@Model.PostalCode</strong></p> <a href="~/address" class="btn btn-primary">Go back to the input form</a> </div> <script src="~/scripts/jquery-2.1.3.min.js"></script> <script src="~/scripts/bootstrap.min.js"></script> </body> </html
编译运行,输入地址/address,填写表单,提交发送数据。
绑定列表和数组
验证
总结