How to set values using <script> tag in mvc4 web api?

Question

I'm using mvc4 web api project and want to bind three different div on same page.

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/

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). Because that is what your error says.

Three, the proper way of using a jquery template is as shown in the example:

<!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:

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

Notice my json data, and the template. I have stuff written in ${} . It has to bind to a property of an object in the json array returned by the service. This is important for your templates to work.

Answer 2

First of all reference JS Scripts as below -

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

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

在此输入图像描述

How to set values using <script> tag in mvc4 web api?

Question

2 answers

solution1
1 2014-02-01 08:38:07

solution2
1 ACCPTED 2014-02-01 08:48:17

How to set values using <script> tag in mvc4 web api?

Question

2 answers

solution1 1 2014-02-01 08:38:07

solution2 1 ACCPTED 2014-02-01 08:48:17

solution1
1 2014-02-01 08:38:07

solution2
1 ACCPTED 2014-02-01 08:48:17