Question

我基本上是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; }
 }

这是我的Controller中的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>`

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

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

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

1 个答案: