Skip to main content

The best way to use DropDownListFor with ASP.NET MVC

Things don't need to be difficult and, of course, do everything you can to reuse your code

Posted in C#, Code snippets, Tutorials, ASP.NET

One of the most annoying things on ASP.NET MVC is to create a decent dropdown list, and Scott Allen already covered it here nicely. While I like his explanation I often see people facing different scenarios. What I will describe here is the way I use to create the dropdown lists for all my projects.

The problems

  1. Create a common place dropdowns will be placed, so we can maintain it easily;
  2. Get the data from somewhere;
  3. Put the minimum necessary logic into the Controller;
  4. Show it in the View.

The solution

First of all, we need a class. I will use a Model, as example, since this data can also come from the database.

This class has only 2 properties since it’s all you need to use with a DropDownListFor. But keep in mind that your class can have other properties.

Now, we need the code to generate the items for the DropDownListFor.

I have this code in a helper specially build for dropdown lists. In this way, as mentioned before, I can ease the maintenance of the project. And if you didn't notice, this code is concatenating with the DefaultItem property, which I show below.

This property will add the standard "-SELECT-" item at the first position in our dropdown list.

Also, you will see once you download the code that I am hard coding the items in the DropDownListHelper's constructor. In the real world I would load the data directly in the property.

Now that we have the class (Model) and the helper, we will go for the ViewModel. This is a pretty standard situation: I personally like to keep my Model exclusively for database while my ViewModel is the one going to create the forms. The reason is that I can customize the ViewModel for my needs, not needing to have a Model with a lot of properties using [NotMapped] on the top.

Here is what we need in the ActionMethod.

And here is the View.

Some might say it’s an unnecessary effort, and I would agree if we would use only one dropdown list. However, when we start building bigger systems which are going to use multiple dropdown lists, this approach comes in handy.

You can check the full code in my GitHub repository: https://github.com/davidsonsousa/DropDownList

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network:

Create a video gallery with modal using ASP.NET and Bootstrap

Learn how to create a video gallery using the Youtube API with ASP.NET and Bootstrap modal

Posted in API, Youtube, Code snippets, Tutorials, ASP.NET, JavaScript

We are in the 3rd article of the series about Youtube API. The articles are:

  1. Load a single predefined video
  2. Load a custom video with the Youtube API in ASP.NET
  3. Create a video gallery with modal using ASP.NET and Bootstrap (this article)

We saw in the previous how to load a custom video from the backend using ASP.NET. For this one we will use the same approach to create our gallery, plus Bootstrap for the modal.

The player

We will need to put the player we saw on the first article in the Bootstrap modal, as it’s shown below.

The Javascript

There are 2 scripts to be used. The first one is the general script, which I've shown in the previous articles and it didn't change. The second one is the script below, which will handle the video gallery.

The View

As you saw in the javascript above we are using only one modal. The magic happens in the code below, where I am passing all parameters via data-* attribute. I am using the same Model from the previous article.

As you can see there is no mystery on working with Youtube API and ASP.NET. And the next article will show how you can detect the state of the videos, which is very important for tagging and user interaction.

Check the full code here: https://github.com/davidsonsousa/YoutubeAPI

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network:

Load a custom video with the Youtube API using ASP.NET

Learn how to load a video from the backend (ASP.NET) using the Youtube API

Posted in API, Youtube, Code snippets, Tutorials, ASP.NET, JavaScript

Let’s continue with this very simple series of articles about the Youtube API. The articles are:

  1. Load a single predefined video
  2. Load a custom video with the Youtube API in ASP.NET (this article)
  3. Create a video gallery with modal using ASP.NET and Bootstrap

On the previous article, we saw how to load a predefined video using the API. It was simple and clean, while we could load only that specific video. In the real world that would be a bit different since we would have to load the video from diferent sources, by using the backend. In this article we will see how we load the from the backend using ASP.NET

The player

We will use a div tag as player, which should be handled by the javascript later.

<div id="player"><div>

The Javascript

We will split this script in 2 parts: The general script, which makes the API calls and the Video script, which actually calls the video.

General script

We use this one just once, as we did before.

Video script

Here is the trick. Since I am using ASP.NET MVC here and I need to have some flexibility since we are using the back end to bring the video, I will need to put the script in a partial view. Also, I am passing the Video model, which should bring all the parameters needed for the video.

Video model

Here is the model I am using. Keep in mind that such model could bring the video data from a database, for example. Or some web service.

That's it.

Next article will be about a video gallery opening a video in a modal window. All of it using videos loaded from the backend in ASP.NET MVC and bootstrap.

Check the full code here: https://github.com/davidsonsousa/YoutubeAPI

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network:

How to use the Youtube API to load a single video

Learn how to use the Youtube API and javascript to load only one video

Posted in API, Youtube, Code snippets, Tutorials, JavaScript

The most common way to embed any video on Youtube is: Click in Share, Embed, copy the code and place in the website. I guess everybody used this at least once but let’s be realistic: This is not the best approach when you are working with clients as you never know what the client is going to ask in the future. It might happen the client will not request anything extra. Or he might ask to record the time the user paused the video.

My idea here is to make a very simple series of 4 articles which should cover the most basic usage of Youtube API. And they are:

  1. Load a single predefined video (this article)
  2. Load a custom video with the Youtube API in ASP.NET
  3. Create a video gallery with modal using ASP.NET and Bootstrap

For this series I am going to use the Youtube API for iframe embeds which forces the HTML5 player and it’s better for compatibility with mobile. You will find the code to download in the end of the article.

The player

When embedding a video we normally get a code like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/XdlmoLAbbiQ" frameborder="0" allowfullscreen><iframe>

However, since we are going to use the Youtube API, we will need a very simple code:

<div id="player"><div>

The Javascript

Here is where the magic happens. The javascript code will load the video we want and replace that div with the proper embed code. However, I will split this script in 2 parts.

General script

This script is used only to make the API calls. Note that we are using this approach since we still don’t have full support for async javascript calls straight from the script tag, so this script should take care of this for us. We need to call it just once.

Video Script

After setting the API call we need to load the video and the way we will do that is also through javascript. So far, in this example, all we will need is the video dimensions (height and width) and also the ID. We will set this up in the function onYouTubeIframeAPIReady(), which is executed once the API is ready to be used.

That’s it for now. In the next article I will show a very simple way to load a custom video. And for that I will use ASP.NET to simulate some database retrieval. But you can use your language/framework of choice.

Check the full code here: https://github.com/davidsonsousa/YoutubeAPI

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network:

How philosophy is related with business and why we should care about it

Who do you think is able to make more damage - a bad teacher or a bad doctor?

Posted in Business, Misc, Career

Back in 2003, when I was starting my unfinished business degree, I had philosophy classes. Probably I was one of the few enjoying to listen to things we thought we would never use in our lives. Don’t get me wrong: Philosophy is a very cool topic. The main problem was the mentality we had at that time – We were all aspiring to become executives in some company right after the university. In addition, as far we thought, an executive doesn’t need philosophy.

That was a horrible mistake, but I will get to that later.

One day our professor turned to the class and asked a question which I will never forget. “Who do you think is able to make more damage – a bad teacher or a bad doctor?”. The whole class answered what seemed obvious: The doctor. The professor asked why and we all said that a doctor’s mistake could cost lives while a teacher’s mistake can just make a person not understand some subject.

The right answer is the bad teacher and it’s simple to understand why: While a bad doctor will make the mistake a couple of times before his license will be revoked, a bad teacher can stay in the school for decades teaching badly, damaging the education of hundreds of students. In the end, we would have many uneducated people wandering around the job market. And, in the best case scenario, the bad teacher will have his license revoked only after an entire year of work with, for example, 40 students.

We were all surprised with the explanation and we understood at that moment how important a good education is.

Now, I believe you might be confused about why I mentioned that an executive not needing philosophy is a horrible mistake. Let me explain.

Philosophy is the study of problems related with existence, moral values, knowledge and the mind. The advantage of the philosophical thought is the way the problems are treated. Mostly the philosophical thought is overloaded of logic and rational thought, which differ itself from the religious thought. And what an executive must be in order to succeed?

Logic and rational.

Mostly, in the corporate world, the companies are targeting the “bad doctors” – those professionals who didn’t bring results. For example: Developers who were unable to deliver some project; Designers, who couldn’t finish some art in the way the client wanted; Testers who couldn’t identify some bug in the project. And so on. Firing any of them would be just the easy way to solve the problem but, since we should be logic and rational, there are some points that we should consider. After all, philosophy teaches us how to deal with any situation – personal or professional:

  1. Why were they hired if they lacked knowledge?
  2. How did they get the materials/documentation? And from who?
  3. Was the environment good for them to work?
  4. Does the department have high number of hires and dismissals?

As you can see it’s no easy task to identify the problem. If I would be in this position I’d start to investigate the department itself. In that way I could:

  1. Be sure they really had the knowledge to join the company
  2. Check if the materials/documentation was giving full condition for a good work
  3. Know if the environment was motivating enough for success
  4. Check if the department has a low rate of hires/dismissals

Why? Because it could be a case of “bad teacher”. Or bad management, if you prefer.

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network: