javascript - 使用ajax和css下拉

标签 javascript jquery css ajax

我制作了一个列表并使用@Ajax.ActinLink 将其设置为超链接,以便在单击时可以使用局部 View 打开嵌套列表。当我点击第一个列表选项时显示部分 View 但是当我点击第二个列表选项时,部分 View 没有打开这是我的代码:

<ul id="menu">
           <h3>Categories</h3>
            @foreach (company company in @Model)
            {
              <li>
                   @Ajax.ActionLink(company.COMPANY_NAME, "All", new AjaxOptions()
                   {
                      HttpMethod = "GET",
                      UpdateTargetId = "yr",
                      InsertionMode = InsertionMode.Replace
                   })
                <ul class="sub-menu">
                    <li id="yr"></li>
                </ul>
              </li>  
            }
</ul>

here 2016 and 2017 comes from the partial view but it does not display when i click on the BMW

最佳答案

我看到您正在使用 C# razor 语法,我将推断您正在使用某种形式的 ASP.NET 并以此方式创建应用程序。它们是进行此调用的比使用 AJAX 更好的方法。 AJAX 已过时并且不是您在使用 C# razor 语法时使用的最佳实现。我会使用 JS 或 angularJS 向您的 Controller 发出 HTTP GET 请求调用。请看下面这个使用 HTTP GET 请求在网页中加载评论的示例。

    <script type="text/javascript">

    // Http GET Request to load the comments at each page refresh.
    var app = angular.module('myArticleViewer', []);
    app.controller('myArticleController', function ($scope, $http, $timeout) {
        try {
            $http({
                method: "GET",
                url: "/Documentation/Comments/@Model.ArticlesViewModelID"
            }).then(function mySucces(response) {

                $scope.data = response.data;
            });
        } catch (e) {
            alert("Error: Bad Request");
        }


    });
    </script>

您将向负责页面的相应 Controller 中的 Controller 操作发出 HTTP GET 请求。然后,您将返回一个超链接 URL 列表,作为您向其发出 HTTP GET 请求的 Controller 操作的值。然后,使用 angularJS 和 ngDirectives,您将为下拉框编写 HTML 代码并遍历从 angularJS HTTP GET 请求调用返回的数据。这将为您提供您寻求的结果。

关于javascript - 使用ajax和css下拉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43157871/

相关文章:

html - 使用 CSS 去除空白

javascript - 如何获取对象列表并等待它们完成?

javascript - node.js 时区独立 Date.now()

javascript - 如何将对象保持在范围内?

javascript - [jsTree] : why the 'rename' and 'move' events are not fired with new nodes?

php - 在 PHP 上正确解码双编码 UTF-8

css - 在其他浏览器上平滑的字母间距过渡

javascript - 如何使用 jquery 激活特定选项卡?

javascript - 跳转到与主题标签相关的页面部分

CSS 响应式更改宽度 100%