Question

我正在使用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'

Answer 1

首先，我希望你使用这个模板框架：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数组中的对象的属性。这对于模板的工作非常重要。

Answer 2

首先参考JS Scripts，如下所示 -

<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;
    }
}

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

enter image description here

如何使用mvc4 web api？</script>中的<script>标记设置值

2 个答案: