Angular 2 MVC 5 Razor - How does one create an @Html.DropDownFor with angular attributes?

Question

I wish to create something like this:

<select class="form-control" ([ngModel])="selectedWorkout" (ngModelChange)="updateWorkout($event)" #selectList="ngModel">
   <option value="44">Pick me!</option>
</select>

Using Html.DropDownFor in razor. How can I do that? Specifically, how do I add in ([ngModel]), (ngModelChange), and #selectList?

My dropdownfor is like:

@Html.DropDownListFor(m => m.itemId, Model.itemList, new { @class = "form-control" })

DropDownListFor is a method executes in the server. It has no idea about your angular modal or even what client side framework/library you are using at that time. — Shyju
– Shyju, Commented Mar 23, 2017 at 19:50
@Shyju Yes but I need the angular attributes to be on the tags when they are rendered out so my angular code can pick it up later on. I'm wondering how do I write out those fancy symbols ([,(,),],#) with the drop down for provided ability to put attributes on the tag. — SolidSnake4444
– SolidSnake4444, Commented Mar 23, 2017 at 19:57
Why do you use the mvc helper method ? Why not simply use angular to generate the SELECT element ? — Shyju
– Shyju, Commented Mar 23, 2017 at 19:57
@Shyju I get certain features such as automatic binding to the selected object from the database and it automatically sets the first item to selected if I don't have anything preselected from the database. If I make it by hand, such as writing out the select tag with one item, it always shows up empty and then I have to click to select the first item, instead of having the first item already selected.The Helper does that and maps to the server post name specifications that are needed for MVC to bind. I can then use angular to bind to these names without having to know about the data beforehand — SolidSnake4444
– SolidSnake4444, Commented Mar 24, 2017 at 1:41

SolidSnake4444 · Accepted Answer · 2017-03-24 02:42:35Z

1

I ended up finding this out. One of the overloads uses a dictionary for the html attributes rather than an object. I use this dictionary to add the required elements.

@Html.DropDownListFor(m => m.itemId, Model.itemList, new Dictionary<string, object>()
    {
        { "class", "form-control" },
        { "required", String.Empty },
        { "maxlength", "4" },
        { "minlength", "2" },
        { "[(ngModel)]", "dataForm.itemId" }
    })

answered Mar 24, 2017 at 2:42

SolidSnake4444

3,5976 gold badges44 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dylan Wright · Accepted Answer · 2017-03-23 19:56:33Z

0

You need to make sure you're hooked up for angular.  You would have to create your model ('Model.itemList') inside of a controller to inject into your HTML.  Like below, $scope.names would be your collection.  Inject it into your view/HTML and loop through it in a select element and should be all set. 

Reference: https://www.w3schools.com/angular/angular_select.asp 
<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

answered Mar 23, 2017 at 19:56

Dylan Wright

1,22213 silver badges21 bronze badges

4 Comments

SolidSnake4444 Over a year ago

This is angular 1. I need the server side solution to output the required attributes for angular 2 to pickup.

silentsod Over a year ago

The OP is asking about Angular 2 not AngularJS.

Dylan Wright Over a year ago

@SolidSnake4444 what about using the same code in a template property?stackoverflow.com/questions/34736161/…

SolidSnake4444 Over a year ago

@DylanWright Anything angular based would make me lose the benefits I get from using the HtmlHelper. I know I could make the select by hand in a template but I need it to be server aware.

Collectives™ on Stack Overflow

Angular 2 MVC 5 Razor - How does one create an @Html.DropDownFor with angular attributes?

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related