Drag Drop and Reorder Rows using AngularJS in ASP.Net

Last Reply one year ago By dharmendr

Posted one year ago

How to reorder list using angularjs in asp.net

You are viewing reply posted by: dharmendr one year ago.
Posted one year ago

Hi rani,

Check this example. Now please take its reference and correct your code.

For this example i have used angular-drag-and-drop-lists.js file.

You can can be downloaded from GitHub using the following link.

Download angular-drag-and-drop-lists

Database

I have made use of the following table HolidayLocations with the schema as follows.

I have already inserted few records in the table.

You can download the database table SQL by clicking the download link below.

Download SQL file

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="angular-drag-and-drop-lists.js" type="text/javascript"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', ['dndLists']);
    app.controller('MyController', ['$scope', '$http', function ($scope, $http) {
        $scope.Locations = [];
        $scope.PopulateLocations = function () {
            $http.post('Default.aspx/GetLocations', { headers: { 'Content-Type': 'application/json'} })
            .then(function (response) {
                $scope.Locations = response.data.d;
            });
        }
        $scope.PopulateLocations();
        $scope.Sorting = function (index) {
            $scope.Locations.splice(index, 1);
            var newOrders = [];
            angular.forEach($scope.Locations, function (val, index) {
                val.Preference = index + 1;
                newOrders.push(val);
            });
            $http.post('Default.aspx/UpdateLocations', { reorderLocations: newOrders }, { headers: { 'Content-Type': 'application/json'} })
            .then(function (response) {
                $scope.Locations = response.data.d;
            });
        }
    } ]);
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <table dnd-list="Locations" class="table table-striped table-bordered table-hover table-condensed">
        <tr class="danger">
            <th>Id</th>
            <th>Location</th>
            <th>Preference</th>
        </tr>
        <tbody ng-repeat="item in Locations" dnd-list-id="{{item.Id}}" dnd-draggable="item"
            dnd-moved="Sorting($index)" dnd-effect-allowed="move" dnd-selected="models.selected = item"
            ng-class="{'selected': models.selected === item}" style="cursor: move">
            <tr>
                <td>{{item.Id}}</td>
                <td>{{item.Location}}</td>
                <td>{{item.Preference}}</td>
            </tr>
        </tbody>
    </table>
</div>

Code

C#

[System.Web.Services.WebMethod]
public static List<HolidayLocation> GetLocations()
{
    TestEntities entities = new TestEntities();
    List<HolidayLocation> locations = entities.HolidayLocations.OrderBy(x => x.Preference).ToList();
    return locations;
}

[System.Web.Services.WebMethod]
public static List<HolidayLocation> UpdateLocations(List<HolidayLocation> reorderLocations)
{
    TestEntities entities = new TestEntities();
    foreach (HolidayLocation newLocations in reorderLocations)
    {
        HolidayLocation oldLocation = entities.HolidayLocations.Where(x => x.Id == newLocations.Id).FirstOrDefault();
        // Updating new Preference.
        oldLocation.Preference = newLocations.Preference;
        entities.SaveChanges();
    }
    return entities.HolidayLocations.OrderBy(x => x.Preference).ToList();
}

VB.Net

<Services.WebMethod()>
Public Shared Function GetLocations() As List(Of HolidayLocation)
    Dim entities As TestEntities = New TestEntities()
    Dim locations As List(Of HolidayLocation) = entities.HolidayLocations.OrderBy(Function(x) x.Preference).ToList()
    Return locations
End Function

<Services.WebMethod()>
Public Shared Function SaveLocations(ByVal reorderLocations As List(Of HolidayLocation)) As List(Of HolidayLocation)
    Dim entities As TestEntities = New TestEntities()
    For Each newHolidayLocation As HolidayLocation In reorderLocations
        Dim oldHolidayLocation As HolidayLocation = entities.HolidayLocations.Where(Function(x) x.Id = newHolidayLocation.Id).FirstOrDefault()
        ' Updating new Preference.
        oldHolidayLocation.Preference = newHolidayLocation.Preference
        entities.SaveChanges()
    Next
    Return entities.HolidayLocations.OrderBy(Function(x) x.Preference).ToList()
End Function

Screenshots

Updated Database Preference