“未捕获的 TypeError：对象不是函数”尝试在 MVC3 中使用 jquery ajax 显示数据答案

【问题标题】："Uncaught TypeError: object is not a function" trying to display data using jquery ajax in MVC3“未捕获的 TypeError：对象不是函数”尝试在 MVC3 中使用 jquery ajax 显示数据
【发布时间】：2011-07-28 01:27:03
【问题描述】：

我基本上是 jQuery 和 AJAX 的新手，所以我一直在尝试模仿某人在 ASP.NET MVC3 站点中使用 jQuery 和 AJAX 的视频。

我有一个名为 Post 的模型，我正在尝试展示它

public class Post
 {
    public int PostId { get; set; }
    public int UserId { get; set; }
    public string Body { get; set; }
    public DateTime DateCreated { get; set; }
    public string Name { get; set; }
 }

这是我的控制器中的 ActionResult 函数

 public ActionResult GetPosts()
    {
        var posts = blogRepository.GetPosts();
        return Json(posts, JsonRequestBehavior.AllowGet); 
    }

这是我的查询方法GetPosts：

 public List<Post> GetPosts()
    {
        return (from p in db.Posts
                orderby p.DateCreated descending
                select p).ToList();
    }

最后，我的视图中的代码以及导致我在标题中发布的错误的脚本：

<table>
<thead>
    <tr>
        <th>Name</th>
        <th>Body</th>
        <th>Date</th>
    </tr>
</thead>
<tbody id="blogTableBody">
</tbody>
</table>
 <script id="blogTemplate" type="text/x-jquery-tmpl">
  <tr>
      <td>${Name}</td>
      <td>${Body}</td>
      <td>${DateCreated}</td>
  </tr>
 </script>

<script type="text/javascript">
$(document).ready(function () {

    $.ajax({
        url: '/blog/getposts',
        type: 'GET',
        success: function (result) {
           $('#blogTemplate').tmpl(result).appendTo('#blogTableBody');
        }
    });
});
</script>`

基本上，我只想在我的视图中以列表格式显示帖子的名称、正文和创建日期。那么我做错了什么，我该如何解决呢？

【问题讨论】：

标签： .net asp.net asp.net-mvc-3 jquery

【解决方案1】：

通常这应该有效。这是一个完整的示例（存储库调用已替换为硬编码值以简化和进一步隔离任何问题）：

型号：

public class Post
{
    public int PostId { get; set; }
    public int UserId { get; set; }
    public string Body { get; set; }
    public DateTime DateCreated { get; set; }
    public string Name { get; set; }
}

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult GetPosts()
    {
        var posts = Enumerable.Range(1, 5).Select(x => new Post
        {
            PostId = x,
            UserId = x,
            Body = "body " + x,
            DateCreated = DateTime.Now,
            Name = "name " + x
        });
        return Json(posts, JsonRequestBehavior.AllowGet);
    }
}

查看（~/Views/Home/Index.cshtml）：

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

<table>
<thead>
    <tr>
        <th>Name</th>
        <th>Body</th>
        <th>Date</th>
    </tr>
</thead>
<tbody id="blogTableBody">
</tbody>
</table>
<script id="blogTemplate" type="text/x-jquery-tmpl">
<tr>
    <td>${Name}</td>
    <td>${Body}</td>
    <td>${DateCreated}</td>
</tr>
</script>

<script type="text/javascript">
    $(function () {
        $.ajax({
            url: '/home/getposts',
            type: 'GET',
            success: function (result) {
                $('#blogTemplate').tmpl(result).appendTo('#blogTableBody');
            }
        });
    });
</script>

请注意，在我的示例中，我使用了托管在 Microsoft CDN 上的 jquery templates 的测试版，其中包含一些 issues with date formats。

【讨论】：