ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Implement cascading DropDownList in HTML Table Row using AngularJS in ASP.Net MVC<p>Hi&nbsp;mahesh213,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">Controller</span></strong></p> <pre class="brush: csharp">public class HomeController : Controller { // GET: /Home/ public ActionResult Index() { return View(); } public ActionResult GetCategories() { List&lt;Category&gt; categories = new List&lt;Category&gt;(); categories.Add(new Category { CategoryID = 1, CategortName = &#34;Category 1&#34; }); categories.Add(new Category { CategoryID = 2, CategortName = &#34;Category 2&#34; }); categories.Add(new Category { CategoryID = 3, CategortName = &#34;Category 3&#34; }); return Json(categories, JsonRequestBehavior.AllowGet); } public ActionResult GetProducts(int? CategoryID) { List&lt;Product&gt; products = new List&lt;Product&gt;(); products.Add(new Product { ProductID = 1, CategoryID = 1, ProductName = &#34;Product 1&#34; }); products.Add(new Product { ProductID = 2, CategoryID = 1, ProductName = &#34;Product 2&#34; }); products.Add(new Product { ProductID = 3, CategoryID = 3, ProductName = &#34;Product 3&#34; }); products = products.Where(x =&gt; x.CategoryID == CategoryID).ToList(); return Json(products, JsonRequestBehavior.AllowGet); } public class Category { public int CategoryID { get; set; } public string CategortName { get; set; } } public class Product { public int ProductID { get; set; } public string ProductName { get; set; } public int CategoryID { get; set; } } }</pre> <p><strong><span style="text-decoration: underline;">View</span></strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;Index&lt;/title&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, []) app.controller(&#39;MyController&#39;, function ($scope, $http, $window) { $scope.Details = [{ CName: &#34;Item1&#34; }, { CName: &#34;Item2&#34;}]; GetCategory(); function GetCategory() { $scope.categories = []; $http({ method: &#39;Get&#39;, url: &#39;/Home/GetCategories/&#39; }).success(function (data, status, headers, config) { $scope.categories = data; }).error(function (data, status, headers, config) { $scope.message = &#39;Unexpected Error&#39;; }); } $scope.GetProducts = function (detail, index) { if (detail.Category != null) { var catId = detail.Category.CategoryID; $http({ method: &#39;Get&#39;, url: &#39;/Home/GetProducts/&#39;, params: { CategoryID: catId } }).success(function (data, status, headers, config) { if (data.length &gt; 0) { $scope.Details[index].products = data; } else { $scope.Details[index].products = &#39;&#39;; } }).error(function (data, status, headers, config) { $scope.message = &#39;Unexpected Error&#39;; }); } else { $scope.Details[index].products = &#39;&#39;; } } }); &lt;/script&gt; &lt;/head&gt; &lt;body ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;table id=&#34;tblOrders&#34; class=&#34;table table-responsive&#34;&gt; &lt;tr&gt; &lt;th&gt;Cname&lt;/th&gt; &lt;th&gt;Category&lt;/th&gt; &lt;th&gt;Product&lt;/th&gt; &lt;/tr&gt; &lt;tbody ng-repeat=&#34;detail in Details&#34;&gt; &lt;tr&gt; &lt;td&gt;{{detail.CName}}&lt;/td&gt; &lt;td&gt; &lt;select class=&#34;input-sm form-control&#34; select2=&#34;&#34; name=&#34;CategortName&#34; ng-model=&#34;detail.Category&#34; containercssclass=&#34;all&#34; ng-change=&#34;GetProducts(detail,$index)&#34; ng-options=&#34;c as c.CategortName for c in categories&#34; ng-disabled=&#34;disabled&#34;&gt; &lt;option value=&#34;&#34;&gt;Select Category&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;select select2=&#34;&#34; ng-model=&#34;Product&#34; ng-disabled=&#34;!detail.products&#34; class=&#34;input-sm form-control&#34; ng-options=&#34;s as s.ProductName for s in detail.products&#34;&gt; &lt;option value=&#34;&#34;&gt;-- Select Product --&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/M8BG0TF.gif" alt="" width="416" height="173" /></span></strong></p>https://www.aspforums.net:443/Threads/151624/Implement-cascading-DropDownList-in-HTML-Table-Row-using-AngularJS-in-ASPNet-MVC/https://www.aspforums.net:443/Threads/151624/Implement-cascading-DropDownList-in-HTML-Table-Row-using-AngularJS-in-ASPNet-MVC/Mon, 05 Aug 2019 04:28:16 GMT