jQuery模板/视图引擎在ASP。NET MVC

标签：src   addclass   字段   详细   datatable   一个   取数据   格式   fir   

• 下载source code - 61.6 KB

表的内容 IntroductionBackgroundUsing代码 ModelControllerView 实现 列出页详细信息页编辑页层次视图 结论 介绍 微软的ASP。NET MVC框架遵循标准的MVC模式——模型包含要显示的数据，控制器在某些事件发生时执行操作， 初始化模型，并将其传递给视图，视图接受模型并呈现将发送到客户机浏览器的HTML输出。如下所示的架构 如图所示: 客户机(浏览器)向服务器端发送HTTP web请求。在服务器上我们有控制器来处理 请求使用模型获取数据， 并传递给视图。视图生成应该被发送回客户端的HTML。在MVC 3中，有几个视图引擎可以使用- 标准的ASP.NET 查看引擎，剃须刀，火花，NHaml等。所有这些视图引擎使用不同的语法来生成视图;然而，它们的工作原理是一样的 方法——在服务器端获取模型，使用模板进行格式化，然后将HTML发送到客户机浏览器。 本文介绍了视图引擎的另一个概念—在客户机浏览器中呈现视图的客户端视图引擎。 在这个概念中，模型和控制器仍然在服务器端。但是，JSON不是HTML，而是作为服务器端的输出生成的， 它在客户端被接受，并使用JavaScript模板引擎生成HTML。如下所示的架构 如图所示: 向控制器发送HTTP请求并处理模型与标准方法中的方法相同。然而，不是通过 直接使用模型对象 在本例中，对于服务器端视图，模型被发送到客户端，它被格式化为JSON对象，在那里由客户端视图引擎处理。 背景 这个例子展示了ASP中的客户端JavaScript模板引擎。NET MVC项目可以用来代替标准的服务器端模板引擎。 JavaScript模板引擎使用JSON对象作为模型，并在客户端生成HTML。 JavaScript模板引擎原理如下图所示: 使用JavaScript模板引擎，您将需要将模型对象(通常是一些JavaScript对象)传递给视图。 视图将有一个定义的模板 这个模型对象将如何被渲染。一旦它将JavaScript模型与模板绑定，它将生成HTML作为标准的服务器端视图引擎。 如您所见，客户端模板引擎的工作方式与标准的服务器端MVC呈现引擎相同。唯一的区别是视图是在浏览器中处理的。 目前，有几个模板引擎，比如jsRender(继承的 弃用的 jQuery模板),淘汰赛, 纯、noTemplate jsTemplate, Populate和jTemplates，但是这个例子 使用jQuery loadJSON模板引擎。jQuery loadJSON 插件是一个模板引擎，它将一个JSON对象绑定到一个干净的HTML模板并生成 客户端上的视图。将JavaScript模型与模板绑定 您将需要调用类似以下代码行: 隐藏,复制Code

$("#template").loadJSON(model); //If you use loadJSON plugin
$("#template").render(model);   //if you use jsRender plugin

这个调用将从当前浏览器中的HTML中获取HTML片段，并将其用作绑定的模板 JavaScript对象(模型)。 作为一个例子，假设你有以下JSON对象，应该放在模板: 隐藏,复制Codemodel = { “名称”:“假如娱乐”, “地址”:[“诺贝尔”、“伦敦”、“英国”), :“联系电话” }隐藏,复制Code & lt;输入name = "接触" /比; & lt; / div> 如果您调用loadJSON与此模型应用到模板，您将得到以下输出: 隐藏,复制Code

divid="template">
     textareaid="Name">Emkay Entertainments/textarea>
     spanclass="Address">Nobel House/span>
     spanclass="Address">London/span>
     spanclass="Address">UK/span>
     inputname="Contact"value="Phone"/>
/div>

这是一个简单的JavaScript模板引擎，它具有实现有效的客户端模板引擎所需的所有特性， 然而，你也有其他的。作为示例，使用jsrender模板生成的相同代码如下: 隐藏,复制Codevar模型= { “名称”:“假如娱乐”, “地址”:[{“项”:“诺贝尔家”}, {“项”:“伦敦”}, {“项”:“英国”}, :“联系电话” }隐藏,Copy Code

$( "#view" ).html(
  $( "#template" ).render( model )
);

因此，ID为“view”的元素将被填充为HTML 合并模型和模板的结果。 结果将如下例所示: 隐藏,复制Code

divid="view">
     textareaid="Name">Emkay Entertainments/textarea>
     span>Nobel House/span>
     span>London/span>
     span>UK/span>
     inputname="Contact"value="Phone"/>
/div>

尽管示例中会使用loadJSON插件，但是在一些小节中会简要介绍使用Pure和jQuery模板的替代实现示例。 我们为什么要使用这种架构?这种架构有一些好处: 性能——在这种架构中，视图处理被转移到浏览器中，其中使用的是浏览器的资源。 服务器应该更快地返回响应，因为服务器端没有视图处理。吞吐量——在这种体系结构中，返回的不是HTML，而是JSON对象 它比HTML小，因为它不包含不必要的 包装纯信息的标签。JSON对象只包含应该显示的数据 而且加载速度更快。缓存——客户端使用的HTML模板不包含任何数据。因此，它们可以被缓存并用于不同的视图页面。 惟一改变的是加载到模板中的JSON数据。跨平台支持——在这种架构中，相同的web服务器可以支持不同的平台，从移动设备到标准浏览器，而不需要 知道谁是客户。服务器向所有客户端返回相同的JSON数据，您可以在客户端放置不同的模板 最佳匹配 用于设备分辨率和支持的特性。例如，在移动设备上，您可以定义 一个较小的模板，其中不会显示丰富的UI元素， 而在标准浏览器中，您将使用完整的富客户端UI。 在下面的部分中，我将向您展示如何创建一个基于JSON的ASP。NET MVC应用程序使用客户端站点模板引擎。 使用的代码 在本文中，给出了一个代码示例来演示如何在ASP中使用客户端视图引擎。净MVC。以下部分显示 如何将jQuery loadJSON插件集成到ASP中。NET MVC应用程序，以取代标准的服务器端视图引擎。 模型 在本例中，有两个类用作模型，它们包含关于公司及其雇员的信息。公司/员工模型的源代码 类在下面的清单中给出: 隐藏,复制Code

public class Company
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string Address { get; set; }
    public string Town { get; set; }
    public string Description { get; set; }
    public DateTime Date { get; set; }
    public string Contact { get; set; }
    public bool IsFeatured { get; set; }
    public string[] Country { get; set; }
    public string Logo { get; set; }
    public Employee Manager { get; set; }
    public Employee[] Employees { get; set; }
}
public class Employee
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

Company类有两个对Employee类的引用，一个是对代表该公司经理的单个员工的引用，另一个是该公司的员工数组。 这些模型类将在控制器中序列化，而Company/Employee类实例的JSON表示将序列化 提供给放置在客户端上的视图。 控制器 控制器不是在标准服务器端视图引擎中工作时对用户操作作出反应并返回视图的标准控制器。在JavaScript 在模板引擎中，控制器应该只返回一个JSON对象，该对象将用作客户端上的模型。这个JSON对象将被接受 在JavaScript模板函数中，HTML输出将直接在浏览器页面中生成。这个示例包含三个页面:公司列表， 关于公司的详细信息，以及可以编辑公司详细信息的表单。因此，有两个操作方法应该在控制器中实现。 第一个操作返回一个公司列表，第二个操作通过ID返回一个公司(当详细信息显示时将调用该操作 填充公司数据的表单)。控制器的源代码如下所示: 隐藏,复制Code

public class CompanyController : Controller
{
    public ActionResult List()
    {
       return Json(DataRepository.GetCompanies(), 
                   JsonRequestBehavior.AllowGet);
    }

    public ActionResult Data(int? ID)
    {
       return Json(DataRepository.GetCompanies().First(
          c => c.ID == ID), JsonRequestBehavior.AllowGet);
    }
}

操作方法接受模型类，将其格式化为JSON结果，并将JSON返回给视图引擎。客户端上的视图引擎会 当视图需要模型时调用这些操作。 视图 当使用JavaScript模板引擎时，视图可以是静态页面。您可以使用标准的.aspx页面作为视图，但是普通的HTML页面可以 也可以被利用。给出的示例有四个视图页面: 显示公司列表的列表页面。详细信息页面，其中显示了单个公司的详细信息。一个编辑页面，其中有关单个公司的信息被加载到表单中，在表单中可以更改详细信息并将其发布到服务器端(尽管是发布) 其结果超出了本文的范围)。显示了如何使用客户端模板来呈现复杂的嵌套结构的层次结构页面——这是使用Employee类的唯一示例。 这些是客户端页面的典型使用情况。在下面的部分中，将详细描述这些视图页面以及客户端引擎是如何工作的 可用于渲染它们的说明。 实现 在本节中，我将展示如何使用jQuery实现标准列表、详细信息和编辑页面模板。 列表页面 list页面用于定义一个模板，该模板将用于在浏览器中列出公司。在这个示例中使用了一个静态视图页面，如下所示: 隐藏,复制Code

html>
head>
    title>Listing JSON aray using the HTML template/title>
    linkrel="stylesheet"type="text/css"href="/Content/style.css"/>
    scriptsrc="/scripts/jQuery-1.4.4.min.js")"type="text/javascript">/script>
    scriptsrc="/scripts/jQuery.loadJSON.js")"type="text/javascript">/script>
    scriptlanguage="javascript"type="text/javascript">
        $(document).ready(function () {
            $(‘li‘).loadJSON(‘/Company/List‘);
        });
    /script>
/head>
body>
    divid="page-wrap">
        divid="contact-area">
            ul>
                li>ahref="details.html"class="ID">
                spanclass="Name">/span>
            /a>spanclass="Address">/span>
          /li>
            /ul>
        /div>
    /div>
/body>
/html>

无序列表中有一个纯HTML代码，它定义了将用于生成输出的项模板。这部分代码如下所示: 隐藏,复制Code

li>    
    ahref="details.html"class="ID">
    spanclass="Name">/span>
    /a>
    spanclass="Address">/span>
/li> 

li标记包含类属性与模型类中的属性匹配的HTML元素。 视图初始化使用JavaScript行从标题: 隐藏,复制Code

$(‘li‘).loadJSON(‘/Company/List‘);   

这一行从/Company/List URL加载一个JSON数组，并将其加载到lI元素中。公司/列表URL激活 Company控制器中的List方法，它返回格式化为JSON数组的公司列表。当loadJSON插件应用时 在这个元素上，对象的属性被放置在模板中。此外，该模板项将为数组中模型的每个实例复制 绑定到模板的。结果，将创建一组li元素，表示所加载的公司列表 /公司/ URL列表。下面是浏览器中生成的视图: jQuery loadJSON插件在加载值之前检查HTML元素的类型。在大多数元素中，值将作为内部文本放置 (例如，SPAN、P或DIV标签)。但是，如果它找到的是一个link元素，而不是内部文本，插件就会添加 作为附加参数的属性放在href属性中的URL中。在上面的例子中，参数ID=17, ID=18, ID=19，等等， 附加到链接的href属性。因此，要添加链接的文本，需要放置一个额外的SPAN标记 在将从不同属性加载的链接中。您可以找到列表功能的实际示例 在这里。 使用jQuery模板/jsRender模板的替代实现 注意，如果需要，您可以使用任何其他模板引擎。例如，如果 一个jQuery 使用模板时，模板应该类似于如下清单所示的代码: 隐藏,复制Code

ulid="template">
    li> 
        ahref="/Home/PopulateEdit/${ID}">${Name}/a>
        ${Address}
    /li>
/ul> 

在jQuery模板中，占位符是属性的名称 在${和}中封装——在上面的示例中，是JSON对象的ID、名称和地址属性 将被放在${ID}、${Name}和${Address}占位符中。应该用于加载的JavaScript代码 模板中的JSON数据如下: 隐藏,复制Code

//Prepare template based on the inner HTML in the UL tag with id "template"
$.template("my_template", $("#template").html());
//Perform AJAX call and pass returned JSON array to template
$.getJSON(‘/Home/Populate‘, function (data) {
    $("#template").html($.tmpl("my_template", data));
}); 

在jQuery模板中，需要将模板代码放在无序的模板中 使用id "template"列出，并使用$.template()编译它 方法。在生成视图时，可以通过名称my_template引用编译后的模板。然后，执行一个AJAX调用从/填充/列表URL加载JSON 该控制器返回的数据绑定到模板，并设置为无序列表的HTML代码，id为“template”。 模板的结果与loadJSON插件返回的结果相同——只是视图和初始化代码的语法不同。 jQuery模板插件现在已经过时了，不再吗 在积极的开发或维护中。我建议使用jsRender。它有非常类似的sintax，只是做了一些小小的改动。作为一个例子在jsRender而不是$ {ID}您正在使用:{{:ID}}如果你想把原始数据的价值,或{{祝辞ID}}如果你想使用HTML编码只,等效代码加载HTML的模板使用返回的数据通过AJAX下面的例子所示:隐藏,复制code

//Perform AJAX call and pass returned JSON array to template
$.getJSON(‘/Home/Populate‘, function (data) {
    $("#view").html($("template").render(data));
});

，你可以看到它是非常相似的，所以如果你已经使用jQuery模板插件，你想转换你的代码到其他模板，我会推荐jsRender。 详细信息页面 详细信息页面用于显示单个公司的详细信息。它从/Company/Details页面获取一个JSON对象并加载JSON对象 在HTML模板中。本例中使用的详细信息页面如下所示: 隐藏,收缩,复制Code

html>
head>
    title>Displaying details of the single JSON object/title>
    linkrel="stylesheet"type="text/css"href="/Content/style.css"/>
    scriptsrc="/scripts/jQuery-1.4.4.min.js")"type="text/javascript">/script>
    scriptsrc="/scripts/jQuery.loadJSON.js")"type="text/javascript">/script>
    scriptlanguage="javascript"type="text/javascript">
        $(document).ready(function () {
        var id = window.location.href.match("(ID=|id=|/)[0-9]+")[0].match("[0-9]+");
            $(‘div#data‘).loadJSON(‘/Company/Data/‘+id);
        });
    /script>
/head>
body>
divid="page-wrap">
    divid="contact-area">
    divid="data">
          h1id="Name">/h1>
              imgid="Logo"alt=""src=""/>
          labelfor="Address">Address:/label>
              spanid="Address">/span>
          labelfor="Contact">Contact by:/label>
              spanid="Contact">/span>
          labelfor="Town">Town:/label>
              spanid="Town">/span>
           formaction="edit.html"method="get">
              inputtype="hidden"id="ID"name="ID"/>
              inputtype="submit"value="Edit"class="submit-button"/>
           /form>
        /div>
    /div>
/div>
/body>
/html>

该页面包含空白HTML模板的定义，其中的元素具有与模型属性相匹配的id属性。 标题中的JavaScript调用从页面URL获取ID参数，并使用该参数调用/Company/Details服务器端页面， 如下代码示例所示: 隐藏,复制Code

var id = window.location.href.match("(ID=|id=|/)[0-9]+")[0].match("[0-9]+");
$(‘div#data‘).loadJSON(‘/Company/Data/‘+id);

控制器动作细节(int?当此URL被发送到服务器时，CompanyController中的ID)将被调用 将作为JSON结果返回。这个JSON对象将与“data”ID和元素一起加载到DIV中 在那个DIV中将被填充。您可以在这里看到详细信息页面的实际示例。示例项目中为一个公司生成的视图如下图所示: 使用th的替代实现e纯模板引擎 与前面的示例类似，可以使用任何其他模板引擎，而不是loadJSON。例如，如果使用纯模板引擎，那么模板可以与代码样例中显示的模板相同(纯使用相同的clean模板 HTML代码loadJSON)。JavaScript的初始化调用如下所示: 隐藏,复制Code

var id = window.location.href.match("(ID=|id=|/)[0-9]+")[0].match("[0-9]+");
$.getJSON(‘/Home/Populate/‘+id, function (company) {
    $("‘div#data‘").render(company, {  ‘#Name‘: ‘Name‘, ‘#Address‘: ‘Address‘,
                                       ‘#Logo@alt‘: ‘Name‘, ‘#Logo@src‘:‘Logo‘ });
});

在上面的示例中，AJAX调用从/Home/Populate/执行URL，在回调函数中， JSON对象被加载到ID为‘data’的div中，如前面的示例所示。渲染的第二个参数 函数是一个将HTML元素映射到JSON属性的指令。在上面例子中显示的指令中，名称和地址 JSON对象的属性被装载到具有id名称和地址的元素中。在alt属性中 id为‘徽标‘的元素的名称和在src属性中id为元素的名称 ‘徽标‘被放置在JSON对象的徽标属性中。Pure的优点是您可以定义元素之间的自定义映射规则， 它们的属性和JSON对象的属性。如果不想使用指令，可以使用.autoRender()函数 .render()。函数.autoRender()类似于上面示例中的.loadJSON()函数; 但是，. autorender()函数只根据类名匹配具有属性的元素(这是纯模板引擎中的“默认指令”)。 编辑详细信息 编辑页面类似于详细信息页面。但是，在这里，一个公司记录被加载到HTML表单中。下面的清单显示了编辑页面的示例: 隐藏,收缩,复制Code

html>
head>
    title>Load Form with JSON data/title>
    metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>
        linkrel="stylesheet"type="text/css"href="/Content/style.css"/>
    scriptsrc="/scripts/jQuery-1.4.4.min.js")"type="text/javascript">/script>
    scriptsrc="/scripts/jQuery.loadJSON.js")"type="text/javascript">/script>
        scriptlanguage="javascript"type="text/javascript">
            $(document).ready(function () {
             var id = window.location.href.match("(ID=|id=|/)[0-9]+")[0].match("[0-9]+");
             $(‘form‘).loadJSON(‘/Company/Data/‘ + id);
            });
        /script>
/head>
body>
divid="page-wrap">
    divid="contact-area">    
        formname="form_simple"id="form-simple"action="details.html"method="get">
            inputtype="hidden"id="ID"name="ID"/>
        labelfor="Name">Name/label>
        inputname="Name"id="Name"type="text"/>
        labelfor="Address">Address/label>
        textareaname="Address"id="Address"rows="5"cols="20">/textarea>
        labelfor="Country">Country/label>
        selectname="Country"multiple="multiple">
                    optionvalue="">-/option>
            optionvalue="UK">United Kingdom/option>
                    optionvalue="SRB">Serbia/option>
            optionvalue="USA">United States of America/option>
            optionvalue="FRA">France/option>  
        /select>
        labelfor="IsFeatured">Is Featured/label>
        inputname="IsFeatured"id="IsFeatured"type="checkbox"value="true"/>
        labelfor="Town">Town/label>
        selectname="Town"id="Town">
                    optionvalue=""selected="selected">-/option>
            optionvalue="London">London City/option>
            optionvalue="Liverpool">Liverpool City/option>
            optionvalue="Lothian">Lothian City/option>
            optionvalue="Newcastle">Newcastle City/option>
                    optionvalue="Buckinghamshire">Buckinghamshire City/option>
                    optionvalue="Essex">Essex City/option>  
        /select>
        labelfor="Contact">Contact/label>
            inputname="Contact"type="radio"value="Email"/> Email
            inputname="Contact"type="radio"value="Phone"/> Phone
            inputname="Contact"type="radio"value="Post"/> Post
                inputtype="submit"value="Details"class="submit-button"/>
    /form>
    /div>
/div>
/body>
/html>

标题应该包含一个JavaScript调用，该调用将JSON对象从URL加载到表单中。这个JavaScript调用如下代码所示: 隐藏,复制Code

var id = window.location.href.match("(ID=|id=|/)[0-9]+")[0].match("[0-9]+");
$(‘form‘).loadJSON(‘/Company/Data/‘ + id); 

这个调用的结果是一个表单，其中填充了从/Company/Data/加载的JSON对象的属性。URL。 这里有一个使用loadJSON插件填充表单的实例，并描述了填充表单时使用的详细规则 在这里。 下面是一个JSON数据填充表单的例子: jQuery loadJSON插件将检查应该加载JSON属性的每个表单元素的类型，并根据类型进行检查 将属性作为文本放入文本框和文本区域、单选按钮组、单个和多个选择列表以及已选中/未选中的选项中 复选框中的状态。在其他插件中，您需要手动设置用于加载表单元素的映射规则。 在其他插件中，我没有找到填充表单的等价的简单实现，因此这个示例不会在任何替代实现中显示。 层次结构视图 最后一个视图显示了如何使用客户端引擎呈现复杂的/层次结构。前面的例子使用simple 结构(公司数组，单个公司)，但是正如您在模型中看到的，公司和员工之间存在关系。 当Company/ list操作返回公司列表时，以下结构作为JSON结果返回: 隐藏,复制Code

[
    {   "ID": 17, "Name": "Emkay Entertainments", 
        "Address": "Nobel House, Regent Centre",
        "Town": "Lothian", "Contact": "Phone", "IsFeatured": true,
        "Manager": { "FirstName": "Nick", "LastName": "Donovan" },
        "Employees": [  { "FirstName": "John", "LastName": "Doe" },
                        { "FirstName": "Alex", "LastName": "Watkins" },
                        { "FirstName": "Mick", "LastName": "Henning"}]
    },
    {   "ID": 18, "Name": "The Empire", "Address": "Milton Keynes Leisure Plaza",
        "Town": "Buckinghamshire", "Contact": "Post", "IsFeatured": false,
        "Manager": { "FirstName": "Ana", "LastName": "Frank" },
        "Employees": [  { "FirstName": "Mark", "LastName": "Anderson" },
                        { "FirstName": "John", "LastName": "Haus" },
                        { "FirstName": "Sinthia", "LastName": "Clouny"}]
    } 
]

如您所见，在返回的公司数组中，对于每个公司对象，都有简单的属性(名称、地址等)。 然后返回一个嵌套的对象管理器和一个嵌套的数组雇员。嵌套结构也可以使用客户端引擎显示。 如果使用loadJSON, HTML模板应该包含与返回的JSON响应的结构相匹配的嵌套元素。HTML的一个例子 可以与loadJSON插件一起使用的模板如下所示: 隐藏,复制Code

ol>
    li>
        divclass="divEmployees">
        h3>Employees imgclass="closed"src="/Content/images/details_open.png"alt="open/close"/>/h3>
        dlclass="Employees"> 
            dtclass="FirstName">/dt>ddclass="LastName">/dd>
        /dl>
        /div>
        ahref="details.html"class="ID">
            spanclass="Name">/span>/a>
        spanclass="Address">/span>
        h3>Manager:/h3>
            spanclass="Manager">
                spanclass="FirstName">/span> spanclass="LastName">/span>     
            /span>
    /li>
/ol>

模板中为公司字段(ID、名称、地址)放置了占位符，如列表示例所示。 对于对Manager对象的引用，有一个占位符管理器(在SPAN标记中)，该管理器对象有两个占位符 名字和姓。此外，在DL标记中有一个存放Employee数组的占位符，其中包含Employee数组 通过“Employee”数组关联到公司的对象将被加载。在这个占位符中，嵌套的占位符表示名字 并将嵌套数组中返回的每个员工的姓氏放置。当使用loadJSON在此模板中加载JSON对象时 函数，则生成元素的嵌套结构(移动到右侧)，如下图所示: 在第一个层次上，列出了有序列表中的公司，其中显示了基本的公司详细信息和嵌套的manager对象。对于每个公司，都有一个嵌套列表 为公司工作的员工的数量。在上面的截图中，第一个和第四个公司的员工在扩张，而其他的公司都倒闭了。 你可以这里有一个活生生的例子，但是没有按钮 显示/隐藏员工。显示/隐藏员工嵌套列表的功能是使用自定义JavaScript实现的，而不是一部分 您可以在下面找到关于这个脚本的更多细节。 使用纯模板引擎的替代实现 您可以使用任何其他模板引擎，而不是loadJSON。如果使用Pure，可以使用相同的HTML模板，但需要定义映射规则 在层次模板和从服务器端返回的JSON对象之间。如果使用纯引擎，以下脚本生成视图: 隐藏,复制Code

 $.getJSON(‘/Company/List‘