使用ajax和css下拉菜单

问题描述:

我制作一个列表并使用@ Ajax.ActinLink进行超链接,以便点击嵌套列表时可以使用部分视图打开。当我点击第一个选项列表显示部分观点,但是当我点击第二个列表选项,局部视图不打开这里是我的代码:使用ajax和css下拉菜单

<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

+0

为问题 –

+0

添加刀片标记,您无需为刀片文件执行{{}}。 '@ foreach'和'@ endforeach'就是你所做的。 – Rehan

我看到你使用C#razor语法,我将推断您正在使用某种形式的ASP.NET并以此方式创建应用程序。与使用AJAX相比,它们可以更好地完成此调用。 AJAX过时,并且不是在使用C#razor语法时使用的最佳实现。我会使用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请求调用返回的数据。这将为您提供您所寻求的结果。