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

Question

I'm using mvc4 web api project and want to bind three different div on same page. 我正在使用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">

Not setting up values :( Getting runtime error : 没有设置值:(获取运行时错误：

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

Answer 1

First, I hope you are using this templating framework: http://www.nuget.org/packages/jQuery.Templates/ 首先，我希望您使用这个模板框架： http ： //www.nuget.org/packages/jQuery.Templates/

Next, make sure its been downloaded into your web page. 接下来，确保将其下载到您的网页中。 Use IE developer tools if you are using internet explorer (hit f12, go to the networks tab, and verify if the necessary script file is downloaded). 如果您使用的是Internet Explorer，请使用IE开发人员工具（点击f12，转到网络选项卡，然后验证是否下载了必要的脚本文件）。 Because that is what your error says. 因为这就是你的错误所说的。

Three, the proper way of using a jquery template is as shown in the example: 三，使用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>

My json data too comes in the following way: 我的json数据也有以下方式：

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

Notice my json data, and the template. 注意我的json数据和模板。 I have stuff written in ${} . 我有用${}写的东西。 It has to bind to a property of an object in the json array returned by the service. 它必须绑定到服务返回的json数组中的对象的属性。 This is important for your templates to work. 这对您的模板起作用很重要。

Answer 2

First of all reference JS Scripts as below - 首先参考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>

Then your template should be holding placeholders like this - 然后你的模板应该像这样持有占位符 -

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

Then have your JQuery GET call like this - 那么你的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>

So products results will be populated to div - 所以产品结果将填入div -

<div id="me">

</div>

At the backend, to support all the above code, I have following model - 在后端，为了支持上述所有代码，我有以下模型 -

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

And the controller action goes in the following way - 控制器动作以下列方式进行 -

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

When I execute my page, I will get results in following way - 当我执行我的页面时，我将以下列方式获得结果 -

在此输入图像描述

如何使用设置值<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