获取参数ajax并发布到html答案

【问题标题】：Get parameters ajax and post into html获取参数ajax并发布到html
【发布时间】：2016-06-07 21:49:28
【问题描述】：

我使用 Json 获取如下参数：

public async Task<ActionResult> GetList(){
 var model = await db.CategoriesList.ToListAsync();
 return JSON(model, JsonRequestBehavior.AllowGet)
}

我知道我想在哪里获得这些类别：

<div class="megamenu-content">
  <div class="row">
    <div class="col-xs-6 col-sm-2">
      <a href="#" class="thumbnail"><img alt="150x190" src="http://www.placehold.it/100x100"></a>
    </div>
    <div class="col-xs-6 col-sm-2">
      <a href="#" class="thumbnail"><img alt="150x190" src="http://www.placehold.it/100x100"></a>
    </div>
    <div class="col-xs-6 col-sm-2">
      <a href="#" class="thumbnail"><img alt="150x190" src="http://www.placehold.it/100x100"></a>
    </div>
    <div class="col-xs-6 col-sm-2">
      <a href="#" class="thumbnail"><img alt="150x190" src="http://www.placehold.it/100x100"></a>
    </div>
    <div class="col-xs-6 col-sm-2">
      <a href="#" class="thumbnail"><img alt="150x190" src="http://www.placehold.it/100x100"></a>
    </div>
    <div class="col-xs-6 col-sm-2">
      <a href="#" class="thumbnail"><img alt="150x190" src="http://www.placehold.it/100x100"></a>
    </div>
  </div>
</div>

问题是我对 Ajax 了解不多，如何调用这些类别以使用 AJAX 在我的视图中显示？

提前致谢！

【问题讨论】：

标签： c# jquery asp.net-mvc asp.net-ajax

【解决方案1】：

这是一个完整的工作示例。将它复制到一个新项目中 -> 运行它 -> 了解它是如何工作的 -> 然后应用到您的解决方案中：

控制器：

public class Category
{
    public string CategoryName { get; set; }
    public string ImageSrc { get; set; }
}

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

    [HttpGet]
    public JsonResult GetJsonData()
    {
        var c1 = new Category { CategoryName = "Dairy", ImageSrc = "http://gilowveld.sites.caxton.co.za/wp-content/uploads/sites/97/2016/03/Dairy-products.jpg" };
        var c2 = new Category { CategoryName = "Fruits", ImageSrc = "http://science-all.com/images/wallpapers/fruits-images/fruits-images-4.jpg" };

        List<Category> categories = new List<Category> { c1, c2 };

        return Json(categories, JsonRequestBehavior.AllowGet);
    }
}

查看：

@{
    ViewBag.Title = "HomePage";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.getJSON("/Home/GetJsonData", null, function (data) {
            $("#result").empty();
            for (var i = 0; i < data.length; i++) {

                var image = "<img style='height:100px;width:100px;' src='" + data[i].ImageSrc + "' />"

                var div = "<div><h1>" + data[i].CategoryName + "</h1>" + image + "</div>"
                $("#result").append(div);
            }
        });
    })
</script>
<div id="result">
</div>

输出：

【讨论】：