Question

我想在我的课程中将我的信息显示在mvc中。我想将信息显示为JSON。

这就是我的JSON需要的样子：

{
    "timestamp": "2017-06-20 12:12:10",
    "categories":
[
    {
      "name": "Fiction",
    },
    {
      "name": "Roman",    
    }
]
,
    "types":
[
    {
      "name": "Long story",
    },
    {
      "name": "Short story",      
    }
],
    "books":
[
    {
        "title": "Song of ice and fire",
        "bookNumber": "1234567",
        "aisle":
        [
            {
                "location": "fiction isle",
            },
            {
                "location": "roman aisle",
            }
        ]
    }
]
}

这是我创建的课程

public class Category
{
    public string name { get; set; }
}

public class Type
{
    public string name { get; set; }
}

public class Aisle
{
    public string location { get; set; }
}

public class Book
{
    public string title { get; set; }
    public string bookNumber { get; set; }
    public List<Aisle> aisle { get; set; }
}

public class RootObject
{
    public string timestamp { get; set; }
    public List<Category> categories { get; set; }
    public List<Type> types { get; set; }
    public List<Book> books { get; set; }
}

我对JSON和mvc很陌生，所以我有点坚持如何继续前进。

我创建了一些这样的构造函数

public Book()
{
    title = "Song of ice and fire";
    bookNumber = "1234567"
    public List<Aisle> aisle { get; set; }
}

public Book(string _title, string _bookNum)
{
    title = _title;
    bookNumber = _bookNum
}

我的mvc

public ActionResult Testing()
        {
            ImportBooks m1 = new ImportBooks();
            return Json(m1, JsonRequestBehavior.AllowGet);
        }

和我的观点

@section Scripts{
<script type="text/javascript">
    $("#btnGetBooks").click(function () {
        var actionUrl = '@Url.Action("Testing", "Books")';
        $.getJSON(actionUrl, displayData);
    });

    function displayData(response) {
        if (response != null) {
            for (var i = 0; i < response.length; i++) {
                $("#bookList").append();
            }
        }
    }
</script>

}
<h2>testing</h2>

<input name="btnGetBooks" id="btnGetBooks" type="submit" value="Get Movies">
<p id="bookList"></p>

我不知道构造函数是否可行，但我真的不知道如何在我的视图中显示数据。

请帮忙！

Answer 1

如果我假设正确，您可以从MVC端正确地获取和填充对象。您可以执行以下操作来更新HTML：

控制器代码：

    public ActionResult Testing()
    {
        List<RootObject> bookList = new List<RootObject>();
        //sample data addition starts
        RootObject rt = new RootObject();
        rt.timestamp = DateTime.Now.ToString();

        List<Aisle> a1 = new List<Aisle>();
        a1.Add(new Aisle { location = "Location" });
        List<Category> c1 = new List<Category>();
        c1.Add(new Category {
            name = "CategoryName"
        });
        List<Models.Type> t1 = new List<Models.Type>();
        t1.Add(new Models.Type
        {
            name = "TypeName"
        });
        rt.categories = c1;
        List<Book> b1 = new List<Book>();
        b1.Add(new Book
        {
            aisle = a1,
            bookNumber = "bookNumber",
            title = "title"

        });
        rt.books = b1;
        rt.types = t1;
        bookList.Add(rt);
        //sample data addition done here
        //OR fill bookList from database or whatever datasource you are using
        return Json(bookList, JsonRequestBehavior.AllowGet);
    }

Javascript代码：

function displayData(response) {
        if (response != null) {
            var strMainBook = '<ul class="yourclass">';
            for (var i = 0; i < response.length; i++) {
                strMainBook += '<li>' + response[i].timestamp + '</li>';
                var strBookCategory = '<ul class="yourclass">';
                for (var j = 0; j < response[i].categories.length; j++) {

                    strBookCategory += '<li>' + response[i].categories[j].name + '</li>';

                }
                strBookCategory += '</li>';
                strMainBook += strBookCategory;

                var strBookType= '<ul class="yourclass">';
                for (var j = 0; j < response[i].types.length; j++) {
                    strBookType += '<li>' + response[i].types[j].name + '</li>';
                }
                strBookType += '</li>';
                strMainBook += strBookType;
                strMainBook += '</ul>'
                $("#bookList").append(strMainBook);
            }
        }
    }

从类中显示JSON

1 个答案: