MVC 4如何使用Ajax将存储库中的json响应转换为视图？

I am a newbie when it comes to MVC4 Web Development and there's something I am struggling with.

对于MVC4 Web开发我是一个新手,我正在努力解决这个问题。

Basically, I have the following :

基本上,我有以下几点:

public class maincontroller: Controller
{
    private MyRepository myRepository;

    public mainController()
    {
         myRepository= new MyRepository(); 
    }

    public ActionResult Index()
    {
        var mystuff = myRepository.GetPrograms();            
        return View(mystuff);
    }


    public ActionResult MyStuff()
    {
        var mystuff = myRepository.GetStuff(1);
        return Json(mystuff , JsonRequestBehavior.AllowGet);
    }
}

Assuming that in my `MyRepository' class I have two functions:

假设在我的`MyRepository'类中我有两个函数:

One that is setting up `mystuff':

一个正在设置`mystuff':

 public MyRepository()
    {


        for (int i = 0; i < 8; i++)
        {
            programs.Add(new MyStuff
            {
                Title = "Hello" + i,
                content = "Hi"

            });
        }
    }


and second function that gets Stuff:
public List<MyStuff> GetStuff(int pageNumber = 0)
    {
        return stuff
            .Skip(pageNumber * pageCount)
            .Take(pageCount).ToList();
    }

All works well. I mean I am able to iterate through `stuff' and display on a view...

一切顺利。我的意思是我能够遍历“东西”并在视图上显示......

The problem is that I want to display MyStuff() ( which returns Json ) using AJAX and then append all stuff to a view. How do I do that?

问题是我想使用AJAX显示MyStuff()(返回Json),然后将所有内容追加到视图中。我怎么做?

I have been beating my head against the wall for about 4 hours now, and can't get this working.

我现在已经在墙上撞了大约4个小时,但是不能让这个工作起来。

Please any help will be much appreciated.

请任何帮助将不胜感激。

Thank you.

1 个解决方案

#1

At the most straightforward level, you can simply append HTML to your document using something like this (assuming you're using JQuery, because it's so much easier):

在最简单的层面上,您可以使用类似的东西将HTML附加到您的文档中(假设您使用的是JQuery,因为它更容易):

<div id="container"></div>

// make AJAX call to "MyStuff" action in the current controller
$.get(@Url.Action("MyStuff", function(data) {

    // cycle through each item in the response
    $.each(data, function(index, item) {

        // construct some HTML from the JSON representation of MyStuff
        var html = "<div>" + item.StuffProperty + "</div>";

        // append the HTML to a container in the current document
        $("#container").append(html);
    });
});

This adds some HTML for each item in the collection to a container element, using (eg) StuffProperty from the MyStuff class.

这会使用(例如)MyStuff类中的StuffProperty为集合中的每个项添加一些HTML到容器元素。

Appending HTML manually like this can be a hassle once it gets too complicated -- at that point you should consider using either:

像这样手动添加HTML一旦变得太复杂就会很麻烦 - 此时你应该考虑使用:

Partial views (return HTML directly from the controller, instead of JSON)

部分视图(直接从控制器返回HTML,而不是JSON)

A client-side templating engine like Mustache.js, Underscore.js, etc, to convert JSON into HTML.

一个客户端模板引擎,如Mustache.js,Underscore.js等,将JSON转换为HTML。

#1