如何使用设置值<script> tag in mvc4 web api?

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

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

在此输入图像描述

如何使用设置值<script> tag in mvc4 web api?

问题描述

2 个解决方案

解决方案1
1 2014-02-01 08:38:07

解决方案2
1 已采纳 2014-02-01 08:48:17

如何使用设置值<script> tag in mvc4 web api?

问题描述

2 个解决方案

解决方案1 1 2014-02-01 08:38:07

解决方案2 1 已采纳 2014-02-01 08:48:17

解决方案1
1 2014-02-01 08:38:07

解决方案2
1 已采纳 2014-02-01 08:48:17