Set DropDownList selected value on GridView Edit Button Click using AngularJS in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted one month ago

Hi,

I have one table with relevant fields

MA_STI

STI_Id      STI_Name     COI_Id

1               Mh                 1

2                AP                  1

3                KA                  2

Party

PAI_Id    COI_Id    COI_Name     STI_Id   STI_Name

1            1               India             1            Mh

2             1                India             2           AP

3              2                India             3            KA       

currently my requirement is that

after clciking of edit button at country selected value is displaying properly, state no value is displaying

<html ng-app="myApp">
<head>
    <title>Index</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
    <script>
        var app = angular.module("myApp", []);
        app.directive("select2", function ($timeout, $parse) {
            return {
                restrict// Code goes here
            : 'AC',
                require: 'ngModel',
                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('change');
                        });
                    };
 
                    var recreateSelect = function () {
                        if (!element.select2Initialized) return;
                        $timeout(function () {
                            element.select2('destroy');
                            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("myCntrl", ['$scope', '$http', 'myService',function ($scope, $http,myService,) {
            $scope.mahesh = false;
            GetCountries();
            function GetCountries() {
                $scope.countries = [];
                $http({
                    method: 'Get',
                    url: '/Home/GetCountry/'
                }).success(function (data, status, headers, config) {
                    $scope.countries = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }
 
            $scope.GetStates = function () {
                var country = $scope.COI_Name;
                $http({
                    method: 'Get',
                    url: '/Home/GetState/',
                    params: { id: country }
                }).success(function (data, status, headers, config) {
                    $scope.states = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }
 
            $scope.AddPartyDiv = function () {
                $scope.mahesh = true;
                GetCountries();
                $scope.Action = "Add";
            }
            $scope.editparty = function (party) {       
        $scope.mahesh = true;       
        var getData = myService.getParty(party.PAI_Id);
        getData.then(function (pa) {
            $scope.party = pa.data;
            $scope.PAI_Id = party.PAI_Id;
            $scope.COI_Name = party.PAI_CoiId;
            $scope.STI_Name = party.PAI_StiId;            
            $scope.Action = "Edit";
        },
      function (msg) {
          alert(msg.data);
          $scope.msg = msg.data;
      });
       
    }             
        } ]);
app.service("myService", function ($http) {

 // get Party By Id
    this.getParty = function (Id) {
        debugger;
        var response = $http({
            method: "post",
            url: "/party/getPartyByNo",
            params: {
                id: JSON.stringify(Id)
            }
        });
        return response;
    }

});

    </script>
</head>
<body ng-controller="myCntrl">
    <div class="container">
        <div><br /><br /><br />
            <div id="wrapper" class="clearfix" ng-show="mahesh">
                <div class="well">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="COI_Name">
                                Country</label>
                            <select style="display: inline; width: 252px;" class="form-control input-sm" select2=""
                                name="COI_Name" id="COI_Name" ng-model="COI_Name" ng-change="GetStates()" containercssclass="all"
                                ng-options="c.COI_Id as c.COI_Name for c in countries" ng-disabled="disabled">
                                <option value="">Select Country</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="STI_Name">
                                State</label><br />
                            <select style="display: inline; width: 252px;" select2="" ng-model="STI_Name" ng-disabled="!states"
                                name="STI_Name" class="form-control input-sm" ng-options="s.STI_Id as s.STI_Name for s in states">
                                <option value="">-- Select State --</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <button class="btn btn-success btn-sm " ng-click="AddPartyDiv();">Add Party</button>
        </div>
             <div id="dvContainer">
                <div>
                    <div class="table-responsive " >
                        <table id="dvData"  class="table table-bordered ">
                            <tr class="success">
                                <th ><b>Country</b></th>
                                <th ><b>State</b></th>
                                <th><b>Actions</b></th>
                            </tr>
                            <tr ng-repeat="party in parties">
                                <td>
                                    <input type="hidden" ng-model="party.PAI_Id" />
                                    {{party.COI_Name}}
                                </td>
                                <td>
                                    {{party.STI_Name }}
                                </td>
                                
                                <td>
                                    <a  ng-click="editparty(party)" href=""></a>
                                </td>
                            </tr>
                        </table>
                       
                    </div>
                </div>
            </div>
    </div>
</body>
</html>

 

Posted one month ago

Hi mahesh213,

Check the below code.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }
    public ActionResult GetCountry()
    {
        List<Country> countries = new List<Country>();
        countries.Add(new Country { COI_Id = 1, COI_Name = "India" });
        countries.Add(new Country { COI_Id = 2, COI_Name = "Australia" });
        countries.Add(new Country { COI_Id = 3, COI_Name = "England" });
        return Json(countries, JsonRequestBehavior.AllowGet);
    }

    public ActionResult GetState(int id)
    {
        List<State> states = new List<State>();
        states.Add(new State { COI_Id = 1, STI_Id = 1, STI_Name = "Mh" });
        states.Add(new State { COI_Id = 1, STI_Id = 2, STI_Name = "AP" });
        states.Add(new State { COI_Id = 1, STI_Id = 3, STI_Name = "KA" });
        states = states.Where(x => x.COI_Id == id).ToList();
        return Json(states, JsonRequestBehavior.AllowGet);
    }

    public ActionResult GetParty()
    {
        List<Party> parties = new List<Party>();
        parties.Add(new Party { PAI_Id = 1, COI_Id = 1, COI_Name = "India", STI_Id = 1, STI_Name = "Mh" });
        parties.Add(new Party { PAI_Id = 2, COI_Id = 1, COI_Name = "India", STI_Id = 2, STI_Name = "AP" });
        parties.Add(new Party { PAI_Id = 3, COI_Id = 1, COI_Name = "India", STI_Id = 3, STI_Name = "KA" });
        return Json(parties, JsonRequestBehavior.AllowGet);
    }

    public ActionResult getPartyByNo(int id)
    {
        List<Party> parties = new List<Party>();
        parties.Add(new Party { PAI_Id = 1, COI_Id = 1, COI_Name = "India", STI_Id = 1, STI_Name = "Mh" });
        parties.Add(new Party { PAI_Id = 2, COI_Id = 1, COI_Name = "India", STI_Id = 2, STI_Name = "AP" });
        parties.Add(new Party { PAI_Id = 3, COI_Id = 1, COI_Name = "India", STI_Id = 3, STI_Name = "KA" });
        parties = parties.Where(x => 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; }
    }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
    <script>
        var app = angular.module("myApp", []);
        app.directive("select2", function ($timeout, $parse) {
            return {
                restrict// Code goes here
            : 'AC',
                require: 'ngModel',
                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('change');
                        });
                    };

                    var recreateSelect = function () {
                        if (!element.select2Initialized) return;
                        $timeout(function () {
                            element.select2('destroy');
                            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("myCntrl", ['$scope', '$http', 'myService', '$timeout', function ($scope, $http, myService, $timeout) {
            $scope.mahesh = false;
            GetCountries();
            GetParties();
            function GetCountries() {
                $scope.countries = [];
                $http({
                    method: 'Get',
                    url: '/Home/GetCountry/'
                }).success(function (data, status, headers, config) {
                    $scope.countries = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }

            function GetParties() {
                $scope.countries = [];
                $http({
                    method: 'Get',
                    url: '/Home/GetParty/'
                }).success(function (data, status, headers, config) {
                    $scope.parties = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }

            $scope.GetStates = function () {
                var country = $scope.COI_Name;
                $http({
                    method: 'Get',
                    url: '/Home/GetState/',
                    params: { id: country }
                }).success(function (data, status, headers, config) {
                    $scope.states = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }

            $scope.AddPartyDiv = function () {
                $scope.mahesh = true;
                GetCountries();
                $scope.Action = "Add";
            }

            $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 = "Edit";
                }, function (msg) {
                    alert(msg.data);
                    $scope.msg = msg.data;
                });
            }
        } ]);
        app.service("myService", function ($http) {
            // get Party By Id
            this.getParty = function (Id) {
                var response = $http({
                    method: "post",
                    url: "/Home/getPartyByNo",
                    params: {
                        id: JSON.stringify(Id)
                    }
                });
                return response;
            }
        }); 
    </script>
</head>
<body ng-app="myApp" ng-controller="myCntrl">
    <div class="container">
        <div><br />
            <div id="wrapper" class="clearfix" ng-show="mahesh">
                <div class="well">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="COI_Name">
                                Country</label>
                            <select style="display: inline; width: 252px;" class="form-control input-sm" select2=""
                                name="COI_Name" id="COI_Name" ng-model="COI_Name" ng-change="GetStates()" containercssclass="all"
                                ng-options="c.COI_Id as c.COI_Name for c in countries" ng-disabled="disabled">
                                <option value="">Select Country</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="STI_Name">
                                State</label><br />
                            <select style="display: inline; width: 252px;" select2="" ng-model="STI_Name" ng-disabled="!states"
                                name="STI_Name" class="form-control input-sm" ng-options="s.STI_Id as s.STI_Name for s in states">
                                <option value="">-- Select State --</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <button class="btn btn-success btn-sm " ng-click="AddPartyDiv();">Add Party</button>
        </div><br /><br />
        <div id="dvContainer">
            <div>
                <div class="table-responsive ">
                    <table id="dvData" class="table table-bordered ">
                        <tr class="success">
                            <th>Country</th>
                            <th>State</th>
                            <th>Actions</th>
                        </tr>
                        <tr ng-repeat="party in parties">
                            <td>
                                <input type="hidden" ng-model="party.PAI_Id" />{{party.COI_Name}}
                            </td>
                            <td>{{party.STI_Name }}</td>
                            <td><a ng-click="editparty(party)" href="">Edit</a></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Screenshot