jquery - Asp.net 使用 ajax (javascript) 从布局页面中的 api 控制器获取数据

Question

在我的 _Layout.cshtml 中，我有一个目前是静态的菜单。由于布局本身不是视图，因此我无法使用 net core 使此菜单动态化。因此，我编写了一个 api 控制器，希望使用 ajax 填充菜单。由于我对使用 Ajax 和 jquery 完全是新手，所以我的尝试失败得很惨。所以这是我的代码：控制器：

 [Route("api/[controller]")]
    public class DataController : Controller
    {
        protected ApplicationDbContext dbContext;
        public DataController(ApplicationDbContext dc)
        {
            dbContext = dc;
        }

        [HttpGet("Categories")]
        public List<Category> GetCategories()
        {
            var l = dbContext.Categories.OrderBy(c => c.Name).ToList();
            return l;
        }
    }

布局页面中菜单的 html 部分，我想更新：

<ul id="menuCategories"class="dropdown-menu">
                            <li><a href="#">Flowers</a></li>
                            <li><a href="#">Mountains</a></li>
                            <li><a href="#">People</a></li>
                        </ul>

以及布局页面中的脚本部分（使用我的 ajax 尝试）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="~/lib/js/assets/jquery.min.js"><\/script>')</script>



    <script>
        $(document.ready(
            function () {

                $.ajax({
                    url: "api/Data/Categories",
                    contentType: "application/json",
                    method: "GET",
                    success: function (data) {AddCategoriesTomenu(data)}

                })

            }
        ));

        var AddCategoriesTomenu = function (categories) {

            for (var i = 0; i < categories.length; i++) {
                $("menuCategories").append("<li><a href='#'>" + categories[i].Name + "</a></li>");


            }
        }
    </script>

请承受我的无知，我希望我的问题足够清楚。

标签： jqueryajaxlayoutasp.net-apicontroller

Answer 1

(function () {
            $.ajax({
                url: "api/Data/Categories",
                contentType: "application/json",
                method: "GET",
                success: function (data) {
                var ul="";
               $.each(data, function (i, cat) {
               ul+= "<li><a href='#'>"+cat.Name+"</a> </li>";
                });
             $("#menuID").html('');
             $("#menuID").html(ul);                    }
            })

        }
    )();