Now, let's see the procedure.
Step 1
At the very first, we need a model class that defines the properties for storing data.
public class ApplicationForm
{
public string Name { get; set; }
public string State { get; set; }
public string District { get; set; }
}
Step 2
Now, we need an initial controller that will return an Index view by a packing list of states in ViewBag.StateName.
public ActionResult Index()
{
List<SelectListItem> state = new List<SelectListItem>();
state.Add(new SelectListItem { Text = "Bihar", Value = "Bihar" });
state.Add(new SelectListItem { Text = "Jharkhand", Value = "Jharkhand" });
ViewBag.StateName = new SelectList(state, "Value", "Text");
return View();
}
In the above controller we have a List<SelectListItem> containing states attached to ViewBag.StateName. We could get a list of states from the database using a LINQ query or something and pack it into ViewBag.StateName. Well let's go with in-memory data.
Step 3
Once we have a controller we can add its view and start creating a Razor form.
@Html.ValidationSummary("Please correct the errors and try again.")
@using (Html.BeginForm())
{
<fieldset>
<legend>DropDownList</legend>
@Html.Label("Name")
@Html.TextBox("Name")
@Html.ValidationMessage("Name", "*")
@Html.Label("State")
@Html.DropDownList("State", ViewBag.StateName as SelectList, "Select a State", new { id = "State" })
@Html.ValidationMessage("State", "*")
@Html.Label("District")
<select id="District" name="District"></select>
@Html.ValidationMessage("District", "*")
<p>
<input type="submit" value="Create" id="SubmitId" />
</p>
</fieldset>
}
You can see I have added proper labels and validation fields with each input control (two DropDownLists and one TextBox) and also a validation summery at the top. Notice, I have used <select id="District"….> which is HTML instead of a Razor helper; this is because when we make a JSON call using jQuery we will return HTML markup of the pre-populated option tag. Now, let's add jQuery code in the above view page.
Step 4
Here
is the jQuery code making a JSON call to the DDL named controller's
DistrictList method with a parameter (which is the selected state name).
The DistrictList method will return JSON data. With the returned JSON
data we are building <option> tag HTML markup and attaching this
HTML markup to "District" which is a DOM control.
@Scripts.Render("~/bundles/jquery")
<script type="text/jscript">
$(function () {
$('#State').change(function () {
$.getJSON('/DDL/DistrictList/' + $('#State').val(), function (data) {
var items = '<option>Select a District</option>';
$.each(data, function (i, district) {
items += "<option value='" + district.Value + "'>" + district.Text + "</option>";
});
$('#District').html(items);
});
});
});
</script>
Please make sure you are using jQuery library references before the <script> tag.
Step 5
In
the above jQuery code we are making a JSON call to DDL named
controller's DistrictList method with a parameter. Here is the
DistrictList method code that will return JSON data.
public JsonResult DistrictList(string Id)
{
var district = from s in District.GetDistrict()
where s.StateName == Id
select s;
return Json(new SelectList(district.ToArray(), "StateName", "DistrictName"), JsonRequestBehavior.AllowGet);
}
Please
note, the DistrictList method will accept an "Id" (it should be "Id"
always) parameter of string type sent by the jQuery JSON call. Inside
the method, I am using an "Id" parameter in the LINQ query to get a list
of matching districts and conceptually, in the list of district data
there should be a state field. Also note, in the LINQ query I am making a
method called District.GetDistrict().
Step 6
In
the above District.GetDistrict() method call, District is a model that
has a GetDistrict() method. And I am using the GetDistrict() method in
the LINQ query, so this method should be of type IQueryable. Here is the
model code.
public class District
{
public string StateName { get; set; }
public string DistrictName { get; set; }
public static IQueryable<District> GetDistrict()
{
return new List<District>
{
new District { StateName = "Bihar", DistrictName = "Motihari" },
new District { StateName = "Bihar", DistrictName = "Muzaffarpur" },
new District { StateName = "Bihar", DistrictName = "Patna" },
new District { StateName = "Jharkhand", DistrictName = "Bokaro" },
new District { StateName = "Jharkhand", DistrictName = "Ranchi" },
}.AsQueryable();
}
}
Step 7
You
can run the application here because the cascading dropdownlist is
ready now. I will do some validation when the user clicks the submit
button. So, I will add another action result of the POST version.
[HttpPost]
public ActionResult Index(ApplicationForm formdata)
{
if (formdata.Name == null)
{
ModelState.AddModelError("Name", "Name is required field.");
}
if (formdata.State == null)
{
ModelState.AddModelError("State", "State is required field.");
}
if (formdata.District == null)
{
ModelState.AddModelError("District", "District is required field.");
}
if (!ModelState.IsValid)
{
//Populate the list again
List<SelectListItem> state = new List<SelectListItem>();
state.Add(new SelectListItem { Text = "Bihar", Value = "Bihar" });
state.Add(new SelectListItem { Text = "Jharkhand", Value = "Jharkhand" });
ViewBag.StateName = new SelectList(state, "Value", "Text");
return View("Index");
}
//TODO: Database Insertion
return RedirectToAction("Index", "Home");
}
And,
this action result will accept ApplicationForm model data and based on
posted data will do validations. If a validation error occurs, the
action method calls the AddModelError method to add the error to the
associated ModelState object. The AddModelError method accepts the name
of the associated property and the error message to display. After the
action method executes the validation rules, it uses the IsValid
property of the ModelStateDictionary collection to determine whether the
resulting data complies with the model.
So, this is all. If you wish to see the complete code, use the links given below.
Source collected from Csharpcorner.com
http://www.c-sharpcorner.com/UploadFile/abhikumarvatsa/cascading-dropdownlist-in-Asp-Net-mvc/
No comments :
Post a Comment