使用ajax和css下拉

时间:2017-04-01 14:06:47

标签: javascript jquery css ajax

我使用@ Ajax.ActinLink创建一个列表并使其成为超链接,以便可以使用Partial 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

1 个答案:

答案 0 :(得分:0)

我发现您正在使用C#razor语法,我将推断您使用某种形式的ASP.NET并以这种方式创建应用程序。与使用AJAX相比,他们进行此调用的方式要好得多。当您使用C#razor语法时,AJAX已经过时,并不是最佳实现。我会使用JS或angularJS向您的控制器调用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>

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