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

Posted 2023-02-19

【中文标题】Asp.net 使用 ajax (javascript) 从布局页面中的 api 控制器获取数据

【英文标题】：Asp.net using ajax (javascript) to get data from api controller in layout page

【发布时间】：2018-12-15 19:44:45

【问题描述】：

在我的 _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;
        
    

Layout页面中菜单的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>

请原谅我的无知，希望我的问题足够清楚。

【参考方案1】：

在ajax的成功方法中可以这样

$(document.ready(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>";
                );
             $("#menuCategories").html('');
             $("#menuCategories").html(ul);                    
            )

        
    ));

【讨论】：

我尝试了你的代码，但它没有命中控制器，我的情况也是如此。我已经验证控制器工作在地址：api/Data/Categories，所以问题一定出在ajax代码

我也试过了：$(document.ready(function () alert("ok"); 我没有收到消息

我设法使代码工作使用：window.onload = function ()，但项目（类别）都是未定义的

使用控制台我发现了问题。类别都在那里，但它们的属性名称已被取消大写，即属性名称已变为名称。为什么会这样？是json的效果吗？

是的，可能是这样，但我不确定为什么会这样

【参考方案2】：

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

        
    )();