In this application I will developed a small Blog post application where, in the home page, all the blog pages will be bound to a DropDownList.
In this application I will create a Blog post with post comments application. This application will be Object Class Mapping using Entity Framework. That means with the mapping of classes the database and table will be created automatically.Step 1:Create a new ASP.Net MVC 3 application with an empty web application. While creating the project, check the radio button for "UnitTest".Step 2:Now under the "Model" Folder create two classes.
<connectionStrings> <add name="BlogDBContext" connectionString="data source=.;Database=Blogdb;Trusted_Connection=true;" providerName="System.Data.SqlClient" /> </connectionStrings>Step 8:Now create a Controller Class named "HomeController" under the "ControllerFolder. After that check the "Add action for create.update,delete.." so it will automatically create the action method in the Controller class.Step 9:Now in the "HomeController" class first create the object of class "BlogDbContext":
BlogDbContext _db = new BlogDbContext();After that in the Index Method write the following code:public ActionResult Index() { var GenreLst = new List<string>(); var GenreQry = from d in _db.Blog orderby d.BlogName select d.BlogName; GenreLst.AddRange(GenreQry.Distinct()); ViewBag.movieGenre = new SelectList(GenreLst); return View(_db.Comments .ToList ()); }See here I selected all the Blog Name from and after that adding into the list.Then through "ViewBag" I am passing the GenreLst.Step 10:Now create a master page in the razor engine under the "shared" folder. Give the Name "_LayoutPage1.cshtml". After that paste the following code there:<!DOCTYPE html> <html><head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> @* <script src="../../Scripts/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script> <link href="../../Content/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css" />*@</head> <body> <div class="page"> <div id="header"> <div id="title"> <h1>Blog Post</h1> </div> <div id="logindisplay"> @*@Html.Partial("_LogOnPartial")*@ </div> <div id="menucontainer"> <ul id="menu"> @* <li>@html.actionlink("home", "index", "home")</li>*@ @*<li>@Html.ActionLink("About", "About", "Home")</li>*@ <li>@Html.ActionLink("home", "index", "home")</li> <li>@Html.ActionLink("Article Post", "CreateLogin", "Article")</li> @*<li>@Html.ActionLink("BookCab", "CreateLogin", "Cab")</li> *@ </ul> </div> <script type="text/javascript"><!-- mce: 0--></script> </div> <div id="main"> @RenderBody() <div id="footer"> </div> </div> </div></body></html> Step 11:Now go the "Home controller". Right-click the Index Method and add view. It will look like:Please check "Create Strongly-typed Views".Choose Model Class "Comments" under DropDownList.Select "Scaffold Template" list. After that press the "Add" Button. It will automatically create a view named "Index" under the "Home" folder.Step 12:See the Index View Engine will create the code for the list view automatically.Paste the following code there.@model IEnumerable<blogmvc3.Models.Comments> @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_LayoutPage1.cshtml";} <h2>Index</h2> <p> @Html.ActionLink("Create New", "Create")</p><table> <tr> <@*th>@Html.ActionLink("Search Blog", "SearchIndex")</th>*@ <th> Blog Name : </th> <th></th> <th> Description : </th> <th></th> <th> Body </th> <th></th> <th> Comment : </th> <th></th> <th> BlogNAme List: @Html.DropDownList("movieGenre", "All"); </th> </tr> @foreach (var item in Model) { <tr> <td> @Html.ActionLink("Edit", "Edit", new { id=item.CommentId }) | @Html.ActionLink("Details", "Details", new { id=item.CommentId }) | @Html.ActionLink("Delete", "Delete", new { id=item.CommentId }) </td> <td> @item.Blog.BlogName</td> <td> @item.Blog.Description</td> <td> @item.Blog.Body</td> <td> @item.Comment </td> </tr>}</table>Now see the code BlogNAme List: @Html.DropDownList("movieGenre", "All"); Here "Html.DropDownList" is accepting the MovieGenre which I passed through view bag and 2nd parameter is to display all the list.Now run the Code it will look like the following figure:See here the dropdownlist I marked with red.Conclusion: So in this article we have seen how to bind and display a DropDownList in ASP.Net MVC 3 razor.
Getting Started with ASP.NET 4.5 Web Forms and Visual Studio 2013