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.Set DropDownList selected value on GridView Edit Button Click using AngularJS in ASP.Net MVC<p>Hi&nbsp;mahesh213,</p> <p>Check the below 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 GetCountry() { List&lt;Country&gt; countries = new List&lt;Country&gt;(); countries.Add(new Country { COI_Id = 1, COI_Name = &#34;India&#34; }); countries.Add(new Country { COI_Id = 2, COI_Name = &#34;Australia&#34; }); countries.Add(new Country { COI_Id = 3, COI_Name = &#34;England&#34; }); return Json(countries, JsonRequestBehavior.AllowGet); } public ActionResult GetState(int id) { List&lt;State&gt; states = new List&lt;State&gt;(); states.Add(new State { COI_Id = 1, STI_Id = 1, STI_Name = &#34;Mh&#34; }); states.Add(new State { COI_Id = 1, STI_Id = 2, STI_Name = &#34;AP&#34; }); states.Add(new State { COI_Id = 1, STI_Id = 3, STI_Name = &#34;KA&#34; }); states = states.Where(x =&gt; x.COI_Id == id).ToList(); return Json(states, JsonRequestBehavior.AllowGet); } public ActionResult GetParty() { List&lt;Party&gt; parties = new List&lt;Party&gt;(); parties.Add(new Party { PAI_Id = 1, COI_Id = 1, COI_Name = &#34;India&#34;, STI_Id = 1, STI_Name = &#34;Mh&#34; }); parties.Add(new Party { PAI_Id = 2, COI_Id = 1, COI_Name = &#34;India&#34;, STI_Id = 2, STI_Name = &#34;AP&#34; }); parties.Add(new Party { PAI_Id = 3, COI_Id = 1, COI_Name = &#34;India&#34;, STI_Id = 3, STI_Name = &#34;KA&#34; }); return Json(parties, JsonRequestBehavior.AllowGet); } public ActionResult getPartyByNo(int id) { List&lt;Party&gt; parties = new List&lt;Party&gt;(); parties.Add(new Party { PAI_Id = 1, COI_Id = 1, COI_Name = &#34;India&#34;, STI_Id = 1, STI_Name = &#34;Mh&#34; }); parties.Add(new Party { PAI_Id = 2, COI_Id = 1, COI_Name = &#34;India&#34;, STI_Id = 2, STI_Name = &#34;AP&#34; }); parties.Add(new Party { PAI_Id = 3, COI_Id = 1, COI_Name = &#34;India&#34;, STI_Id = 3, STI_Name = &#34;KA&#34; }); parties = parties.Where(x =&gt; x.PAI_Id == id).ToList(); return Json(parties, JsonRequestBehavior.AllowGet); } public class Country { public int COI_Id { get; set; } public string COI_Name { get; set; } } public class State { public int STI_Id { get; set; } public string STI_Name { get; set; } public int COI_Id { get; set; } } public class Party { public int PAI_Id { get; set; } public int COI_Id { get; set; } public string COI_Name { get; set; } public int STI_Id { get; set; } public string STI_Name { 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 runat=&#34;server&#34;&gt; &lt;title&gt;Index&lt;/title&gt; &lt;link href=&#34;//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&#34; rel=&#34;stylesheet&#34; /&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css&#34; /&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css&#34; /&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script&gt; var app = angular.module(&#34;myApp&#34;, []); app.directive(&#34;select2&#34;, function ($timeout, $parse) { return { restrict// Code goes here : &#39;AC&#39;, require: &#39;ngModel&#39;, link: function (scope, element, attrs) { console.log(attrs); $timeout(function () { element.select2(); element.select2Initialized = true; }); var refreshSelect = function () { if (!element.select2Initialized) return; $timeout(function () { element.trigger(&#39;change&#39;); }); }; var recreateSelect = function () { if (!element.select2Initialized) return; $timeout(function () { element.select2(&#39;destroy&#39;); element.select2(); }); }; scope.$watch(attrs.ngModel, refreshSelect); if (attrs.ngOptions) { var list = attrs.ngOptions.match(/ in ([^ ]*)/)[1]; // watch for option list change scope.$watch(list, recreateSelect); } if (attrs.ngDisabled) { scope.$watch(attrs.ngDisabled, refreshSelect); } } }; }); app.controller(&#34;myCntrl&#34;, [&#39;$scope&#39;, &#39;$http&#39;, &#39;myService&#39;, &#39;$timeout&#39;, function ($scope, $http, myService, $timeout) { $scope.mahesh = false; GetCountries(); GetParties(); function GetCountries() { $scope.countries = []; $http({ method: &#39;Get&#39;, url: &#39;/Home/GetCountry/&#39; }).success(function (data, status, headers, config) { $scope.countries = data; }).error(function (data, status, headers, config) { $scope.message = &#39;Unexpected Error&#39;; }); } function GetParties() { $scope.countries = []; $http({ method: &#39;Get&#39;, url: &#39;/Home/GetParty/&#39; }).success(function (data, status, headers, config) { $scope.parties = data; }).error(function (data, status, headers, config) { $scope.message = &#39;Unexpected Error&#39;; }); } $scope.GetStates = function () { var country = $scope.COI_Name; $http({ method: &#39;Get&#39;, url: &#39;/Home/GetState/&#39;, params: { id: country } }).success(function (data, status, headers, config) { $scope.states = data; }).error(function (data, status, headers, config) { $scope.message = &#39;Unexpected Error&#39;; }); } $scope.AddPartyDiv = function () { $scope.mahesh = true; GetCountries(); $scope.Action = &#34;Add&#34;; } $scope.editparty = function (party) { $scope.mahesh = true; var getData = myService.getParty(party.PAI_Id); getData.then(function (pa) { $scope.COI_Name = pa.data[0].COI_Id; $scope.GetStates(); $timeout(function () { $scope.STI_Name = pa.data[0].STI_Id; }, 100); $scope.Action = &#34;Edit&#34;; }, function (msg) { alert(msg.data); $scope.msg = msg.data; }); } } ]); app.service(&#34;myService&#34;, function ($http) { // get Party By Id this.getParty = function (Id) { var response = $http({ method: &#34;post&#34;, url: &#34;/Home/getPartyByNo&#34;, params: { id: JSON.stringify(Id) } }); return response; } }); &lt;/script&gt; &lt;/head&gt; &lt;body ng-app=&#34;myApp&#34; ng-controller=&#34;myCntrl&#34;&gt; &lt;div class=&#34;container&#34;&gt; &lt;div&gt;&lt;br /&gt; &lt;div id=&#34;wrapper&#34; class=&#34;clearfix&#34; ng-show=&#34;mahesh&#34;&gt; &lt;div class=&#34;well&#34;&gt; &lt;div class=&#34;row&#34;&gt; &lt;div class=&#34;col-md-3&#34;&gt; &lt;label for=&#34;COI_Name&#34;&gt; Country&lt;/label&gt; &lt;select style=&#34;display: inline; width: 252px;&#34; class=&#34;form-control input-sm&#34; select2=&#34;&#34; name=&#34;COI_Name&#34; id=&#34;COI_Name&#34; ng-model=&#34;COI_Name&#34; ng-change=&#34;GetStates()&#34; containercssclass=&#34;all&#34; ng-options=&#34;c.COI_Id as c.COI_Name for c in countries&#34; ng-disabled=&#34;disabled&#34;&gt; &lt;option value=&#34;&#34;&gt;Select Country&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class=&#34;col-md-3&#34;&gt; &lt;label for=&#34;STI_Name&#34;&gt; State&lt;/label&gt;&lt;br /&gt; &lt;select style=&#34;display: inline; width: 252px;&#34; select2=&#34;&#34; ng-model=&#34;STI_Name&#34; ng-disabled=&#34;!states&#34; name=&#34;STI_Name&#34; class=&#34;form-control input-sm&#34; ng-options=&#34;s.STI_Id as s.STI_Name for s in states&#34;&gt; &lt;option value=&#34;&#34;&gt;-- Select State --&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;button class=&#34;btn btn-success btn-sm &#34; ng-click=&#34;AddPartyDiv();&#34;&gt;Add Party&lt;/button&gt; &lt;/div&gt;&lt;br /&gt;&lt;br /&gt; &lt;div id=&#34;dvContainer&#34;&gt; &lt;div&gt; &lt;div class=&#34;table-responsive &#34;&gt; &lt;table id=&#34;dvData&#34; class=&#34;table table-bordered &#34;&gt; &lt;tr class=&#34;success&#34;&gt; &lt;th&gt;Country&lt;/th&gt; &lt;th&gt;State&lt;/th&gt; &lt;th&gt;Actions&lt;/th&gt; &lt;/tr&gt; &lt;tr ng-repeat=&#34;party in parties&#34;&gt; &lt;td&gt; &lt;input type=&#34;hidden&#34; ng-model=&#34;party.PAI_Id&#34; /&gt;{{party.COI_Name}} &lt;/td&gt; &lt;td&gt;{{party.STI_Name }}&lt;/td&gt; &lt;td&gt;&lt;a ng-click=&#34;editparty(party)&#34; href=&#34;&#34;&gt;Edit&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&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/ZRUmSHM.gif" alt="" width="315" height="414" /></span></strong></p>https://www.aspforums.net:443/Threads/135031/Set-DropDownList-selected-value-on-GridView-Edit-Button-Click-using-AngularJS-in-ASPNet-MVC/https://www.aspforums.net:443/Threads/135031/Set-DropDownList-selected-value-on-GridView-Edit-Button-Click-using-AngularJS-in-ASPNet-MVC/Fri, 19 Jul 2019 02:18:29 GMT