“Incorreto TypeError: objeto não é uma função” tentando exibir dados usando jquery ajax em MVC3 - .net, asp.net, asp.net-mvc-3, jquery

Eu sou basicamente novo no jQuery e no AJAX, por isso tenho tentado imitar um vídeo de alguém usando o jQuery e o AJAX em um site ASP.NET MVC3.

Eu tenho um modelo chamado Post que estou tentando exibir

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

Esta é a função ActionResult no meu Controller

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

E este é o meu método de consulta GetPosts:

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

Por fim, o código na minha Visualização com o script que está causando o erro que publiquei no título:

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

Basicamente, tudo o que eu quero é mostrar o Nome, Corpo e DataCriada da postagem em um formato de lista na minha opinião. Então, o que estou fazendo de errado e como corrigi-la?

Respostas:

0 para resposta № 1

Normalmente isso deve funcionar. Aqui está um exemplo completo (a chamada do repositório foi substituída por valores codificados para simplificar e isolar ainda mais os problemas):

Modelo:

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

Controlador:

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

Visão (~/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>

Observe que no meu exemplo eu usei uma versão beta do modelos de jquery hospedado no Microsoft CDN, que possui alguns problemas com formatos de data.

---