Introduction

The following is a snapshot of what we will create in this article.
Agenda
  1. Creating MVC basic application
  2. Adding an ADO.Net entity model to the application
  3. Adding a Home Controller
  4. Adding a View Model (CustomerView)
  5. Adding a View
  6. Binding a dropdown to Country
  7. Binding a dropdown to states based on the country using JSON
  8. Creating a partial view for displaying records in the Grid
  9. Final output
I like to write stuff as simple as possible to make them simple to understand for the readers. I have wrote various MVC articles as in the following: http://www.c-sharpcorner.com/UploadFile/4d9083/creating-insert-update-and-delete-application-in-mvc-4-using/ http://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-webgrid-in-mvc-4-using-simple-model-and-data/ http://www.c-sharpcorner.com/UploadFile/4d9083/binding-dropdownlist-in-mvc-in-various-ways-in-mvc-with-data/ http://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-cascading-dropdownlist-in-mvc-4-using-razor/ http://www.c-sharpcorner.com/UploadFile/4d9083/binding-radiobutton-and-radiobuttonlist-in-various-way-in-mv201/ http://www.c-sharpcorner.com/UploadFile/4d9083/how-to-create-google-charts-with-mvc-4/ http://www.c-sharpcorner.com/UploadFile/4d9083/globalization-and-localization-in-Asp-Net-mvc-4/ http://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-checkboxlist-in-mvc-4-using-razor/
Let's start. For creating the basic application in MVC in Visual Studio IDE select "File" -> "New" -> "Project...". A New Project dialog will pop up. Inside that there is a template list and from that select web and in the project template list select ASP.NET MVC 4 Web Application and name your project Simplesearch and click on the OK button.
During the adding of the project a new dialog will pop up for selecting the Project Template and inside that select the basic Template.
After creating the application here is the complete folder view.
Now that we have created the application, let's work with the database part In this demo I will use the following 3 tables:
Country Table
State Table
Customerdetails Table
Procedure to Add Entity Data Model
We will add an ADO.NET Entity Data Model in the Model folder.
  1. For adding, right-click on the Model Folder select Add then inside that select ADO.NET Entity Data Model.
  2. After selecting, a small dialog will pop up to prompt for a name; I am providing the name OrderDB. Then click on the OK button.
  3. After clicking on the OK button a new wizard will pop up with the name Entity Data Model wizard. In that select Generate from Database.
  4. Next a wizard will pop up for the Connection Properties. Here just enter all the connection related information for the database that you want to use and then select “Yes include the sensitive data in the connection string”.
  5. Now in the next wizard it will ask for selecting tables from the database and inside that select [Country, State , Customerdetails ] then finally click on the Finish button.
After adding the Entity Data Model here is the complete folder view.
For adding the Controller just right-click on the Controller folder select Add then select Controller. After selecting, a new dialog will pop up with the name Add controller. Here we will name the controller HomeController and in the scaffolding option in the template select Empty MVC controller.
The Add Controller dialog snapshot is below:
After adding the Controller the default Index ActionResult is generated, here is the code.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Data.Objects.SqlClient;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.Mvc;
  7. using Simplesearch.Models;
  9. namespace Simplesearch.Controllers
  10. {
  11. public class HomeController : Controller
  12. {
  14. [HttpGet]
  15. public ActionResult Index()
  16. {
  17. return View();
  18. }
  20. }
  21. }
Now let's move forward and add ViewModel with name CustomerView. For adding just right-click on the Model folder then select Add then select Class. A new wizard will pop up asking of a class name. Name it CustomerView.cs and click on the Add button.
An empty class is generated.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using Simplesearch.Models;
  7. namespace Simplesearch.Models
  8. {
  9. public class CustomerView
  10. {
  12. }
  13. }
Now let's add some properties to it.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using Simplesearch.Models;
  7. namespace Simplesearch.Models
  8. {
  9. public class CustomerView
  10. {
  11. public int SelectedCountriesId { get; set; }
  12. public List<Country> Countrieslist { get; set; }
  13. public List<Customerdetail> Customerdetail { get; set; }
  14. }
  15. }
I have added SelectedCountriesId and Country List properties for binding to the dropdownlist. And for binding the grid I have use a Customerdetail List. And for binding the state we will use JSON. Now we have completed the adding of the View Model, let's add a View. To add a view just right-click inside the Index ActionResult. A new dialog will pop up with the name Add View and we have a default view name the same as the ActionResult Name (Index). We will not be using the scaffolding template when adding the View.
A blank view is generated and now here is the default code that is generated.
  1. @{
  2. ViewBag.Title = "Index";
  3. }
  4. <h2>Index</h2>
Now let's configure an Index [HttpGet] ActionResult such that we can pass a CustomerView Model to the index View. Here is the code that I wrote in the Index ActionResult for binding the Country Dropdownlist. I created an object of OrderDBEntities and using LINQ I get data from the Countries table. And creating the CustomerView object for sending the model to the view and in the Countrieslist property of CustomerView I passed a list, Countrieslist, that we got data for by querying the database.
Code snippet of Index ActionResult
  1. [HttpGet]
  2. public ActionResult Index()
  3. {
  5. OrderDBEntities objord = new OrderDBEntities();
  7. var Countrieslist = (from clist in objord.Countries
  8. select clist);
  10. CustomerView CV = new CustomerView();
  12. CV.Countrieslist = Countrieslist.ToList();
  14. ViewData["Selectedstate"] = 0;
  16. CV.Customerdetail = null;
  18. return View(CV);
  19. }
  20. }
Here you will also find that we have sent a Customerdetail model a null because we are not showing records on the HttpGet request. And using ViewData["Selectedstate"] for maintaining the state after a postback to the controller. For binding the state we will use jQuery ajax and that is why we created a JsonResult to get the state value by passing the country id to Jsonresult.
Code snippet of GetStates JsonResult
  1. public JsonResult GetStates(string id)
  2. {
  3. if (id == null)
  4. {
  5. id = "0";
  6. }
  8. int CountriesID = Convert.ToInt32(id);
  10. OrderDBEntities objord = new OrderDBEntities();
  12. var states = (from slist in objord.States
  13. where (slist.CountriesID == CountriesID)
  14. select new { slist.StateID, slist.Statename }).ToList();
  16. return Json(new SelectList(states, "StateID", "Statename"));
  17. }
After adding an Action method let's move toward configuring a View. We will now add a ViewModel (CustomerView) and a Dropdownlist to the View.
Adding Model to View
  1. @model Simplesearch.Models.CustomerView
  3. @{
  4. Layout = null;
  5. }
Adding a Dropdownlist of County and State to the View.
  1. <div class="CSSTableGenerator">
  2. <table style="width: 100%">
  3. <tr>
  4. <td>
  5. @Html.DropDownListFor(m => m.SelectedCountriesId,
  6. new SelectList(Model.Countrieslist, "CountriesID", "CountriesName"),
  7. "Select Country", new { style = "width:250px", @class = "dropdown1" })
  8. </td>
  9. <td>
  10. @Html.DropDownList("State",
  11. new SelectList(string.Empty, "StateID", "Statename"), "Select State",
  12. new { style = "width:250px", @class = "dropdown1" })
  13. </td>
  15. </tr>
  16. <tr>
  17. <td colspan="2">
  18. <input type="submit" value="Search" />
  19. </td>
  20. </tr>
  21. </table>
  22. </div>
After adding a Dropdownlist list, now let's add a jQuery script for binding the state on a change of the country dropdownlist. Adding jQuery Ajax script for binding State dropdownlist.
  1. <script src="~/Scripts/jquery-1.7.1.min.js"></script>
  2. <script src="~/Scripts/jquery.validate.min.js"></script>
  3. <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready(function () {
  7. //Dropdownlist Selectedchange event
  8. $("#SelectedCountriesId").change(function () {
  9. $("#State").empty();
  10. $.ajax({
  11. type: 'POST',
  12. url: '@Url.Action("GetStates")', // we are calling json method
  13. dataType: 'json',
  14. data: { id: $("#SelectedCountriesId").val() },
  15. success: function (states) {
  16. // states contains the JSON formatted list
  17. // of states passed from the controller
  19. $("#State").append('<option value="' + "0" + '">' + "Select State" + '</option>');
  20. debugger;
  21. $.each(states, function (i, state) {
  22. $("#State").append('<option value="' + state.Value + '">' + state.Text + '</option>');
  23. // here we are adding option for States
  24. });
  25. },
  26. error: function (ex) {
  27. alert('Failed to retrieve states.' + ex);
  28. }
  29. });
  30. return false;
  31. })
  32. });
  34. </script>
After adding Dropdownlist and jQuery ajax script now let's run the application and check how your dropdownlist displays.
Here is the View of Index.cshtml after rendering on the browser.
URL: http://localhost:1381/Home/index
We have a dropdownlist bound. Now let's add a partial view. For adding the View just right-click inside Index ActionResult then a new dialog will pop up with the name Add View and we have a default view name the same as the ActionResult name (Index). Just change the name of the view to Displaygrid then we just need to check the “Create as a Partial View” option and click on the Add button.
An empty Partial view is created.
Now let's add a Model to it to display records depending on the Sorting of the dropdownlist. We will use a Customerdetail Model here for displaying the records in Partial view.
  1. @model List<Simplesearch.Models.Customerdetail>
  3. <link href="~/Content/TableCSSCode1.css" rel="stylesheet" />
  4. <div class="CSSTableGenerator">
  6. <table>
  7. <tr>
  8. <td>Customer ID</td>
  9. <td>Customer name</td>
  10. <td>Customer Address</td>
  11. </tr>
  13. @for (int i = 0; i < Model.Count(); i++)
  14. {
  15. <tr>
  16. <td>
  17. @Model[i].CustomerID
  18. </td>
  19. <td>
  20. @Model[i].Customername
  21. </td>
  22. <td>
  23. @Model[i].CustomerAddress
  24. </td>
  25. </tr>
  27. }
  28. </table>
  30. </div>
Here I have used a for loop for displaying the list of customers that are sorted depending on dropdownlist. Now we have added the partial view, now let's render the partial view on the Mainpage (Index) and pass the Model to it .
Rendering Partial view on Index page and Passing Model.
  1. <table style="width: 100%">
  2. <tr>
  3. <td>
  4. @if (Model.Customerdetail != null)
  5. {
  6. @Html.Partial("Displaygrid", Model.Customerdetail);
  7. }
  8. </td>
  9. </tr>
  10. </table>
Finally we will get input from the Index.cshtml View. The [HttpPost] Action Selectors Method that we will create will get a FormCollection and CustomerView as input and in this method we will get a Dropdownlist selected value and from that value we will display the grid.
  1. [HttpPost]
  2. public ActionResult Index(FormCollection fc, CustomerView objcv)
  3. {
  5. string CountriesID = Convert.ToString(objcv.SelectedCountriesId); //tightly coupled
  7. string StateID = fc["State"];
  9. ViewData["Selectedstate"] = StateID;
  12. OrderDBEntities objord = new OrderDBEntities();
  14. var Countrieslist = (from clist in objord.Countries select clist);
  16. CustomerView CV = new CustomerView();
  19. int stateid = Convert.ToInt32(StateID);
  22. var Customerlist = (from Custlist in objord.Customerdetails
  23. where Custlist.StateID == stateid
  24. select Custlist);
  27. CV.Countrieslist = Countrieslist.ToList();
  29. CV.SelectedCountriesId = objcv.SelectedCountriesId;
  31. CV.Customerdetail = Customerlist.ToList();
  33. return View(CV);
  34. }
Here we are getting the posted value of the Country and State dropdownlist.
  1. string CountriesID = Convert.ToString(objcv.SelectedCountriesId); //tightly coupled
  2. string StateID = fc["State"];
Here I have used a ViewData to show the selected state after posting to the controller. We lose the state of the dropdownlist after posting.
  1. ViewData["Selectedstate"] = StateID;
Here we are rebinding a Country dropdownlist to maintain the state after posting to the controller.
  1. OrderDBEntities objord = new OrderDBEntities();
  2. var Countrieslist = (from clist in objord.Countries select clist);
Here we are getting data from the database according to the state dropdownlist. Finally assigning all the values to the CustomerView to send it to the View.
  1. CustomerView CV = new CustomerView();
  2. int stateid = Convert.ToInt32(StateID);
  3. var Customerlist = (from Custlist in objord.Customerdetails
  4. where Custlist.StateID == stateid
  5. select Custlist);
  7. CV.Countrieslist = Countrieslist.ToList();
  9. CV.SelectedCountriesId = objcv.SelectedCountriesId;
  11. CV.Customerdetail = Customerlist.ToList();
  13. return View(CV);
Finally to maintain (the state dropdownlist) state I have called a rebindState() function on the Windows.onload method that will check whether or not ViewData["Selectedstate"] is “0” and depending on it it will bind the State dropdownlist and then it will make the state dropdownlist selected.
  1. if (@ViewData["Selectedstate"] != 0)
  2. {
  3. $("#State").val(@ViewData["Selectedstate"]);
  4. }
Here is the complete code of the snippet of rebindState().
  1. <script type="text/javascript">
  2. window.onload = function()
  3. {
  4. rebindState ()
  5. };
  6. </script>
  9. <script type="text/javascript">
  11. function rebindState () {
  12. debugger;
  13. if (@ViewData["Selectedstate"] != 0) {
  14. $("#SelectedCountriesId").val(@Model.SelectedCountriesId);
  16. $.ajax({
  17. type: 'POST',
  18. url: '@Url.Action("GetStates")',
  19. dataType: 'json',
  20. data: {
  21. id: $("#SelectedCountriesId").val()
  22. },
  23. success: function (states) {
  25. $.each(states, function (i, state) {
  26. $("#State").append('<option value="' + state.Value + '">'
  27. + state.Text + '</option>');
  29. if (@ViewData["Selectedstate"] != 0) {
  30. $("#State").val(@ViewData["Selectedstate"]);
  31. }
  33. });
  34. },
  35. error: function (ex) {
  36. alert('Failed to retrieve states.' + ex);
  37. }
  38. });
  39. }
  42. }
  43. </script>
Completed Home Controller Code snippet
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Data.Objects.SqlClient;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.Mvc;
  7. using Simplesearch.Models;
  9. namespace Simplesearch.Controllers
  10. {
  11. public class HomeController : Controller
  12. {
  14. [HttpGet]
  15. public ActionResult Index()
  16. {
  18. OrderDBEntities objord = new OrderDBEntities();
  20. var Countrieslist = (from clist in objord.Countries
  21. select clist);
  23. CustomerView CV = new CustomerView();
  25. CV.Countrieslist = Countrieslist.ToList();
  27. ViewData["Selectedstate"] = 0;
  28. CV.Customerdetail = null;
  29. return View(CV);
  30. }

  32. [HttpPost]
  33. public ActionResult Index(FormCollection fc, CustomerView objcv)
  34. {
  36. string CountriesID = Convert.ToString(objcv.SelectedCountriesId); //tightly coupled
  37. string StateID = fc["State"];
  38. ViewData["Selectedstate"] = StateID;
  39. OrderDBEntities objord = new OrderDBEntities();
  41. var Countrieslist = (from clist in objord.Countries select clist);
  43. CustomerView CV = new CustomerView();
  44. int stateid = Convert.ToInt32(StateID);
  45. var Customerlist = (from Custlist in objord.Customerdetails
  46. where Custlist.StateID == stateid
  47. select Custlist);
  48. CV.Countrieslist = Countrieslist.ToList();
  50. CV.SelectedCountriesId = objcv.SelectedCountriesId;
  52. CV.Customerdetail = Customerlist.ToList();
  54. return View(CV);
  55. }
  58. public JsonResult GetStates(string id)
  59. {
  60. if (id == null)
  61. {
  62. id = "0";
  63. }
  66. int CountriesID = Convert.ToInt32(id);
  67. OrderDBEntities objord = new OrderDBEntities();
  69. var states = (from slist in objord.States
  70. where (slist.CountriesID == CountriesID)
  71. select new { slist.StateID, slist.Statename }).ToList();
  73. return Json(new SelectList(states, "StateID", "Statename"));
  74. }
  75. }
  76. }
Completed Index.cshtml Code snippet
  1. @model Simplesearch.Models.CustomerView
  3. @{
  4. Layout = null;
  5. }
  7. <!DOCTYPE html>
  9. <html>
  10. <head>
  11. <meta name="viewport" content="width=device-width" />
  12. <title>Index</title>
  15. <link href="~/Content/TableCSSCode(1).css" rel="stylesheet" />
  16. <link href="~/Content/TableCSSCode.css" rel="stylesheet" />
  18. <script src="~/Scripts/jquery-1.7.1.min.js"></script>
  19. <script src="~/Scripts/jquery.validate.min.js"></script>
  20. <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
  22. <script type="text/javascript">
  23. $(document).ready(function () {
  24. //Dropdownlist Selectedchange event
  25. $("#SelectedCountriesId").change(function () {
  26. $("#State").empty();
  27. $.ajax({
  28. type: 'POST',
  29. url: '@Url.Action("GetStates")', // we are calling json method
  30. dataType: 'json',
  31. data: { id: $("#SelectedCountriesId").val() },
  32. success: function (states) {
  33. // states contains the JSON formatted list
  34. // of states passed from the controller
  36. $("#State").append('<option value="' + "0" + '">' + "Select State" + '</option>');
  37. debugger;
  38. $.each(states, function (i, state) {
  39. $("#State").append('<option value="' + state.Value + '">' + state.Text + '</option>');
  40. // here we are adding option for States
  41. });
  42. },
  43. error: function (ex) {
  44. alert('Failed to retrieve states.' + ex);
  45. }
  46. });
  47. return false;
  48. })
  49. });
  51. </script>
  52. <script type="text/javascript">
  53. window.onload = function () { rebindState() };
  54. </script>
  57. <script type="text/javascript">
  59. function rebindState() {
  60. debugger;
  61. if (@ViewData["Selectedstate"] != 0) {
  62. $("#SelectedCountriesId").val(@Model.SelectedCountriesId);
  64. $.ajax({
  65. type: 'POST',
  66. url: '@Url.Action("GetStates")',
  67. dataType: 'json',
  68. data: {
  69. id: $("#SelectedCountriesId").val()
  70. },
  71. success: function (states) {
  73. $.each(states, function (i, state) {
  74. $("#State").append('<option value="' + state.Value + '">' + state.Text + '</option>');
  76. if (@ViewData["Selectedstate"] != 0) {
  77. $("#State").val(@ViewData["Selectedstate"]);
  78. }
  80. });
  81. },
  82. error: function (ex) {
  83. alert('Failed to retrieve states.' + ex);
  84. }
  85. });
  86. }
  89. }
  90. </script>
  92. </head>
  93. <body>
  94. @using (Html.BeginForm())
  95. {
  96. @Html.ValidationSummary(true)
  97. <div class="CSSTableGenerator">
  98. <table style="width: 100%">
  99. <tr>
  100. <td>
  101. @Html.DropDownListFor(m => m.SelectedCountriesId,
  102. new SelectList(Model.Countrieslist, "CountriesID", "CountriesName"), "Select Country", new { style = "width:250px", @class = "dropdown1" })
  103. </td>
  104. <td>
  105. @Html.DropDownList("State",
  106. new SelectList(string.Empty, "StateID", "Statename"), "Select State", new { style = "width:250px", @class = "dropdown1" })
  107. </td>
  109. </tr>
  110. <tr>
  111. <td colspan="2">
  112. <input type="submit" value="Search" />
  113. </td>
  114. </tr>
  115. </table>
  116. </div>
  117. <table style="width: 100%">
  118. <tr>
  119. <td>
  120. @if (Model.Customerdetail != null)
  121. {
  122. @Html.Partial("Displaygrid", Model.Customerdetail);
  123. }
  124. </td>
  125. </tr>
  126. </table>
  128. }
  129. </body>
  130. </html>
Completed Displaygrid.cshtml Code snippet
  1. @model List<Simplesearch.Models.Customerdetail>
  3. <link href="~/Content/TableCSSCode1.css" rel="stylesheet" />
  4. <div class="CSSTableGenerator">
  6. <table>
  7. <tr>
  8. <td>Customer ID</td>
  9. <td>Customer name</td>
  10. <td>Customer Address</td>
  11. </tr>
  13. @for (int i = 0; i < Model.Count(); i++)
  14. {
  15. <tr>
  16. <td>
  17. @Model[i].CustomerID
  18. </td>
  19. <td>
  20. @Model[i].Customername
  21. </td>
  22. <td>
  23. @Model[i].CustomerAddress
  24. </td>
  25. </tr>
  27. }
  30. </table>
  31. </div>
Final Output
Here I have selected the country India and the state Maharashtra and clicked on the Search button then it brought all the customer-related data of Maharashtra into the grid.
If I select the country India and the state Rajasthan and click on the Search button then it shows all the customer-related information of Rajasthan in the grid.