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,填写表单,提交发送数据。

 

 

 

 

 

    绑定列表和数组


    验证

 

    总结

posted @ 2017-02-04 15:32  理论家  阅读(1389)  评论(0编辑  收藏  举报
点击这里给我发消息