如何在 mvc4 web api 中使用 <script> 标签设置值？答案

【问题标题】：How to set values using <script> tag in mvc4 web api?如何在 mvc4 web api 中使用 <script> 标签设置值？
【发布时间】：2014-02-01 16:48:17
【问题描述】：

我正在使用 mvc4 web api 项目并想在同一页面上bind three different div。

Detail.cshtml
 $.getJSON(
                "/api/GroupDetailValue/" + id,
                function (data) {
                    $.each(data, function (index, value) {
                        if (value.Id != undefined) {
                             $("#GroupTemplate").tmpl(value); //I did like this to set all values to following div
                        }
                    });



<script id="GroupTemplate" type="text/html">
    <div class="container">
    <div class="span12">
    Name</div></div>
    <div class="container">
    <div class="span8">
    Memeber List</div></div>
    <div class="container">
    <div class="span3">
    Address </div></div>
</script">

没有设置值:( 出现运行时错误：

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'tmpl'

【问题讨论】：

绑定是什么意思？
我的意思是说`函数（数据）`中有水数据，我需要分别在所有<div>上显示。
这可能对stackoverflow.com/questions/13487647/…有帮助

标签： jquery css asp.net-mvc asp.net-mvc-4 asp.net-web-api

【解决方案1】：

首先参考下面的JS脚本 -

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script>

那么你的模板应该包含这样的占位符 -

<script id="productstmpl" type="text/x-jquery-tmpl">
    <li><b>Name</b> ${Name}</li>
</script>

然后让你的 JQuery GET 像这样调用 -

<script>
    var uri = 'http://localhost:23133/api/products';        
    $.getJSON(uri,function (data) {
            $.each(data, function (index, value) {
                if (value.Id != undefined) {
                    $("#productstmpl").tmpl(value).appendTo("#me");
                }
            });
        });
</script>

所以产品结果将被填充到 div -

<div id="me">

</div>

在后端，为了支持以上所有代码，我有以下模型 -

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Category { get; set; }
    public decimal Price { get; set; }
}

控制器动作如下 -

public class ProductsController : ApiController
{
    Product[] products = new Product[] 
    { 
        new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
        new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
        new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M } 
    };

    public IEnumerable<Product> GetAllProducts()
    {
        return products;
    }
}

当我执行我的页面时，我将通过以下方式获得结果 -

【讨论】：

【解决方案2】：

首先，我希望你使用这个模板框架：http://www.nuget.org/packages/jQuery.Templates/

接下来，确保已将其下载到您的网页中。如果您使用 Internet Explorer，请使用 IE 开发人员工具（按 f12，转到网络选项卡，并验证是否下载了必要的脚本文件）。因为这就是你的错误所说的。

三、jquery模板的正确使用方法如示例所示：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery Template</title>
    <script type="text/javascript" src="Scripts/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="Scripts/jQuery.tmpl.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2>Products</h2>
        <div id="products-list">
        </div>
        <script id="tmpl" type="text/html">
            <div>
                <p style="font-style:italic">${ProductName}</p>
                <ul>
                    <li><b>In Stock:</b> ${UnitsInStock}</li>
                    <li><b>On Order:</b> ${UnitsOnOrder}</li>
                </ul>                
            </div>
        </script>
    </div>
    </form>
    <script>
        $(function () {
            $.template('product', $('#tmpl').html());
            $.getJSON('data.ashx', function (data) {
                $.each(data, function (idx, item) {
                    $.tmpl('product', item).appendTo('#products-list');
                });
            });
        });
    </script>
</body>
</html>

我的 json 数据也来自以下方式：

[
  {
    "ProductName": "Chai",
    "UnitsInStock": 39,
    "UnitsOnOrder": 0
  },
  {
    "ProductName": "Chang",
    "UnitsInStock": 17,
    "UnitsOnOrder": 40
  },
...
...
]

注意我的 json 数据和模板。我有东西写在${}。它必须绑定到服务返回的 json 数组中对象的属性。这对于您的模板正常工作很重要。

【讨论】：