zoukankan      html  css  js  c++  java
  • 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,填写表单,提交发送数据。

        绑定列表和数组


        验证

        总结

  • 相关阅读:
    matplotlib直方图学习小记
    matplotlib饼状图学习小记
    P2306 被yyh虐的mzc
    P1776 宝物筛选_NOI导刊2010提高(02)&& 多重背包二进制优化
    51NOD 1445 变色DNA
    51NOD 1459 迷宫游戏
    CODEVS 1001 舒适的路线
    P4514 上帝造题的七分钟
    1082 线段树练习 3 && 树状数组区间修改区间查询
    P4145 上帝造题的七分钟2 / 花神游历各国
  • 原文地址:https://www.cnblogs.com/lilunjia/p/6365426.html
Copyright © 2011-2022 走看看