In this article, I am going to explain how to create cascading dropdownlist in asp.net mvc using jQuery to display multiple values. When the user selects the DropdownList, on the dropdown change jQuery, it loads the product price in a div tag.
Create a dropdroplist bind product using entity framework and also create a div tag.
Here I am using Northwind database. You can download it from following link.
Open Microsoft SQL management studio and right click on the database and attach it.
Step 1: Create an ado.net entity data model using table Products and generate entity for that.
Step 2: Right click on the "Controllers" folder and add "Home" controller. Copy and paste the following code.
private models db = new models();
public ActionResult Index()
{
ViewBag.ProductId = new SelectList(db.Products, "ProductId", "Name");
return View();
}
[HttpPost]
public JsonResult GetProducts(int ProductId)
{
var mrp = db.Products.Where(x => x.ProductId == ProductId).First().MRP;
return Json(mrp.ToString());
}
Step 2: Copy and paste the following code in the design page index.cshtml.
<h2>DropdownList with productprice</h2>
<script type="text/javascript">
$(function () {
$('#ProductId').change(function() {
$.ajax({
type: "POST",
url: "/Home/GetProducts",
datatype: "Json",
data: { ProductId: $('#ProductId').val() },
success: function (data) {
$('#txtProductRate').html(data);
}
});
});
});
</script>
<div class="form-group">
<label class="col-sm-3control-label">Product:</label>
<div class="col-sm-9">
@Html.DropDownList("ProductId", null, "Select Product", new { Class = "form-control", Style = "width:180px;" })
<div id="txtProductRate" style ="color:green"></div>
</div></div>
Post your comments / questions
Recent Article
- Requested setting INSTALLED_APPS, but settings are not configured. You must either define..
- ValueError:All arrays must be of the same length - Python
- Check hostname requires server hostname - SOLVED
- How to restrict access to the page Access only for logged user in Django
- Migration admin.0001_initial is applied before its dependency admin.0001_initial on database default
- Add or change a related_name argument to the definition for 'auth.User.groups' or 'DriverUser.groups'. -Django ERROR
- Addition of two numbers in django python
- The request was aborted: Could not create SSL/TLS secure channel -Error in Asp.net
Related Article