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