Modifying dropdown menu - Autogenerated MVC / CRUD code - html

Question

I am new to Entity Framework/MVC and need to know how to modify a dropdown menu autogenerated by Visual Studio. I imagine it should be pretty simple, but I have not been able to figure it out. I have used the database-first approach and have the two following tables in my database:
public partial class RestaurantRating
{
public int RestaurantRatingId { get; set; }
public int RestaurantRatingScore { get; set; }
}
public partial class RestaurantType
{
public int RestaurantTypeId { get; set; }
public string RestaurantTypeDesc { get; set; }
}
I removed the extra details, but basically one of them will store restaurant ratings (the rating being an integer) and the other one will store restaurant types (what type of food they serve). The only really difference between the two is that the rating is an integer and they type description is a string.
Visual Studio autogenerated code for the CRUD operations for these and other tables. The HTML code in Create.cshtml for these two tables is as follows:
<div class="form-group">
#Html.LabelFor(model => model.RetaurantTypeId, "RetaurantTypeId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("RetaurantTypeId", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.RestaurantTypeId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.RestaurantRatingId, "RestaurantRatingId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("RestaurantRatingId", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Id, "", new { #class = "text-danger" })
</div>
</div>
And the ViewBag information for these two tables in the Create Action result in the controller is the following:
ViewBag.RestaurantRatingId = new SelectList(db.RestaurantRating, "RestaurantRatingId", "RestaurantRatingId");
ViewBag.RestaurantTypeId = new SelectList(db.RestaurantType, "RestaurantTypeId", "RestaurantTypeDesc");
The problems and expected results are the following:
The dropdown menu for RestaurantType works as expected. It simply loads the different types into a dropdown menu and allows the user to select one of them. However, the RestaurantRating will load the RatingIds instead of the descriptions, which is what I need. I have tried changing the viewbag without success.
The HTML code automatically selects the first value for the dropdown menus, but it is possible to save NULL values to the database for these fields. How can I add an empty default value for the dropdown menus above, so that if the user selects the empty value (or does not touch the dropdown menu) a NULL value will be pushed to the database?
Any help is greatly appreciated. I will be happy to provide any additional code/information. Thank you so much!

Answer 1

You Just need to add an option label to your dropdown like this:-
#Html.DropDownList("RetaurantTypeId", null,"optionLable goes Here", htmlAttributes: new { #class = "form-control" })
and make sure on the other side that you are binding it to a nullable model property so the model binder will be able to set the model property value to Null.
hope this answer your question.