CODEWITHSUNDEEP
asp.netangularjsasp.net-mvc
Riccarr
Riccarr

Reputation: 111

Where to populate multiple dropdown lists

I'm trying to determine the correct approach to populating multiple dropdown lists on a view page of an .net MVC application, which is using angularJS.

In my app, designed as a silo-SLA app. I'm using the angular ngRoute module, and the $routeProvider to describe the multiple HTML pages for a single CSHTML page.

.config(function ($routeProvider, $locationProvider) {
        $routeProvider.when('/club', { templateUrl: '/App/Club/Views/MCLView.html', controller: 'mclViewModel' });
        $routeProvider.when('/club/list', { templateUrl: '/App/Club/Views/MCLView.html', controller: 'mclViewModel' });
        $routeProvider.when('/club/show/:clubId', { templateUrl: '/App/Club/Views/ClubView.html', controller: 'clubViewModel' });
        $routeProvider.otherwise({ redirectTo: '/club' });
        $locationProvider.html5Mode(true);
    });

My CSHTML page is basically empty except for the <div ng-view></div> tag. The routed HTML pages get loaded into the ng-view div.

<div data-ng-app="club" id="club" data-ng-controller="rootViewModel">
    <h2>{{ pageHeading }}</h2>
    <div ng-view></div>
</div

Each html view page loaded into the ng-view has an associated viewmodel javascript controller.

I started out populating the first dropdown on the html page by using $http.get in the angular controller to get the list data (json) from a server call. Then do a JSON.parse on the result.data and populate the select list control that is defined in the html page.

$scope.refreshColorsDropdown = function () {

    var sel = document.getElementById('colorDropdown');
    var colors = JSON.parse($scope.mycolors);
    angular.forEach(colors, function(color) {
        var opt = document.createElement('option');
        opt.innerHTML = color.name;
        opt.value = color.hex;
        sel.appendChild(opt);
    });
}

I could continue this approach for each dropdown on my page, creating several server calls to populate all my dropdowns ... but this seems tedious and code heavy.

Would a reasonable approach be to consider building one server calls that returns multiple collections, one for each dropdown, and then I'd parse those to populate all the dropdowns?

I'd like to pre-populate the lists on the server side C# code, however my cshtml files are empty except for the ng-view div, so there's no coding going on there.

So to my question ... if my HTML views contain all the html content, and the cshtml are empty ... what strategy should I be using to populate multiple html list controls from the server side?

Upvotes: 0

Views: 562

Answers (2)

Rani Radcliff
Rani Radcliff

Reputation: 5076

Using MVC, you can make a ViewModel that contains all collections needed and return this collection to your Angular Controller. Your View Model would be something like:

public class MyViewModel
{
public List<ColorModel> Colors{get;set;}
public List<FabircModel> Fabrics {get;set;}
}

In your MVC Controller:

MyViewModel mvm = new MyViewModel();
mvm.Colors = get colors here;
mvm.Fabrics = get fabrics here;

return Json(mvm, JsonRequestBehavior.AllowGet);

In your success object in Angular:

myservice.getData()
.success(function(data){
$scope.colors = data.Colors;
$scope.fabrics = data.Fabrics;
})

Hopefully, that helps or at least gets you started.

Upvotes: 1

Paul Swetz
Paul Swetz

Reputation: 2254

If you ignore the fact you are using angular the answer would be to populate a view model with what you need and razor the cshtml, because you are using angular...nothing changes....because you said SERVER-SIDE that is still the answer.

If you move this to the client an angular service that can cache the data is probably the most direct way.

Upvotes: 0

Related Questions