使用ajax和css下拉

Question

I make a list and make it hyperlink using @Ajax.ActinLink so that on click nested list can be opened using Partial View. When I click on the first list option partial view is displayed but when I click on the second list option, partial view is not opened Here is my code:

<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

Answer 1

I see that you're using C# razor syntax, I'm going to infer you're using some form of ASP.NET and creating an application in that manner. They're much better ways to make this call than using AJAX. AJAX is outdated and isn't the best implementation to use when you're working with C# razor syntax. I would make the HTTP GET request call to your controller using JS or angularJS. Take a look at this example of loading comments in a web page using an HTTP GET request below.

    <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>

You're going to make the HTTP GET request to a controller action, in the corresponding controller responsible for the page. Then you're going to return a list of hyperlinked URLs as the value for the controller action you're making the HTTP GET request to. Then, using angularJS and ngDirectives, you're going to write HTML code for a dropdown box and iterate through the data returned from the angularJS HTTP GET request call. This will provide you with the result you seek.