Documente Academic
Documente Profesional
Documente Cultură
Document Controller
Data Mapping
Post A Blog
Write A Blog
ASP.Net 48
MVC 37
bind child dropdown on change of parent dropdown item? bind dropdown on selection change? bind dropdown by using
jquery? how to return json from action method in controller? how to format child dropdown items cascading GridView 5
dropdownlist in gridview edit mode cascading dropdownlist in mvc cascading dropdownlist jquery mvc cascading
dropdownlist C# 38
Binding DropDownListFor from enum, database and some hard coded values in our previous article MVC 3
DataTable
dropdown binding best ways. In this article we will try to bind child Dropdown on selection change of parent
Dropdown, say Country to State or Sate to City, by using jQuery which will call an action in controller and return Ajax 9
JSON for selected id, and with the help of jQuery append values to child Dropdown. We will try to create page to
add new employee and state and city will be used as parent and child Dropdown. LINQ To SQL 3
SQL Server 32
Angularjs 34
ReactJS 1
Web API 5
JavaScript 13
jQuery 9
HTML 8
CSS 12
XML 6
OOPs 13
Web.Config 2
Employee Model:
As you can see, I have not added anything in our model for list of states or cities because we are using Code
first, which will create the database tables, we will try to get data from database and pass to view by using
ViewBag, here is our HttpGet and HttpPost action method:
1. [HttpGet]
2. public ActionResult Create()
3. {
4. ViewBag.StateList = db.States;
5. var model = new Employees();
6. return View(model);
7. }
8. [HttpPost]
9. public ActionResult Create(Employees model)
10. {
11. if (ModelState.IsValid)
12. {
13. // code to save record and redirect to listing page
14. }
15. ViewBag.StateList = db.States;
16. return View(model);
17. }
18.
1. <div class="form-group">
2. @Html.LabelFor(m => m.State, new { @class = "control-label col-md-2" })
3. <div class="col-md-10">
4. @Html.DropDownListFor(m => m.State,
5. new SelectList(ViewBag.StateList, "StateId", "StateName"),
6. "Select state",
7. new { @class = "form-control", @onchange="FillCity()" })
8. @Html.ValidationMessageFor(m => m.State, "", new { @class = "text-danger" })
9. </div>
10. </div>
11.
12. <div class="form-group">
13. @Html.LabelFor(m => m.City, new { @class = "control-label col-md-2" })
14. <div class="col-md-10">
15. @Html.DropDownListFor(m => m.City,
16. new SelectList(Enumerable.Empty<SelectListItem>(), "CityId", "CityName"),
17. "Select city",
18. new { @class = "form-control" })
19. @Html.ValidationMessageFor(m => m.City, "", new { @class = "text-danger" })
20. </div>
21. </div>
22.
As you can notice we used @onchange="FillCity()" in our State dropdown so we need a JavaScript function
which will be call on change of state. If you are from asp.net background then forgot about the postback, in mvc
there is no postback concept so we don't need viewstate of controls so the pages are light weight. Here is our
FillCity function:
1. @section Scripts {
2. <script>
3. function FillCity() {
4. var stateId = $('#State').val();
5. $.ajax({
6. url: '/Employees/FillCity',
7. type: "GET",
8. dataType: "JSON",
9. data: { State: stateId},
10. success: function (cities) {
11. $("#City").html(""); // clear before appending new list
12. $.each(cities, function (i, city) {
13. $("#City").append(
14. $('<option></option>').val(city.CityId).html(city.CityName));
15. });
16. }
17. });
18. }
19. </script>
20. }
21.
Here we used $.each to loop the items and add item by item to city dropdown. We used to call FillCity action
method in our Employees controller.We need a separate action method which can return cities on the basis of
selection change and return JSON string.
See how we can return json from any action method in our controller. If you want to see the complete html of the
page then it is here.
1. @model MyApp.Models.Employees
2. @{
3. ViewBag.Title = "Index";
4. Layout = "~/Views/Shared/_Layout.cshtml";
5. }
6. <h2>Index</h2>
7. @using (Html.BeginForm())
8. {
9. @Html.AntiForgeryToken()
10.
11. <div class="form-horizontal">
12. <h4>New Employee</h4>
13. <div class="form-group">
14. @Html.LabelFor(m => m.EmployeeName, new { @class = "control-label col-md-2" })
15. <div class="col-md-10">
16. @Html.TextBoxFor(m => m.EmployeeName, new { @class = "form-control" })
17. @Html.ValidationMessageFor(m => m.EmployeeName, "", new { @class = "text-danger" })
18. </div>
19. </div>
20. <div class="form-group">
21. @Html.LabelFor(m => m.Address, new { @class = "control-label col-md-2" })
22. <div class="col-md-10">
23. @Html.TextBoxFor(m => m.Address, new { @class = "form-control" })
24. @Html.ValidationMessageFor(m => m.Address, "", new { @class = "text-danger" })
25. </div>
26. </div>
27. <div class="form-group">
28. @Html.LabelFor(m => m.State, new { @class = "control-label col-md-2" })
29. <div class="col-md-10">
30. @Html.DropDownListFor(m => m.State,
31. new SelectList(ViewBag.StateList, "StateId", "StateName"),
32. "Select state",
33. new { @class = "form-control", @onchange="FillCity()" })
34. @Html.ValidationMessageFor(m => m.State, "", new { @class = "text-danger" })
35. </div>
36. </div>
37. <div class="form-group">
38. @Html.LabelFor(m => m.City, new { @class = "control-label col-md-2" })
39. <div class="col-md-10">
40. @Html.DropDownListFor(m => m.City,
41. new SelectList(Enumerable.Empty<SelectListItem>(), "CityId", "CityName"),
42. "Select city",
43. new { @class = "form-control" })
44. @Html.ValidationMessageFor(m => m.City, "", new { @class = "text-danger" })
45. </div>
46. </div>
47. <div class="form-group">
48. @Html.LabelFor(m => m.ZipCode, htmlAttributes: new { @class = "control-label col-md-2" })
49. <div class="col-md-10">
50. @Html.TextBoxFor(m => m.ZipCode, new { @class = "form-control" })
51. @Html.ValidationMessageFor(m => m.ZipCode, "", new { @class = "text-danger" })
52. </div>
53. </div>
54. <div class="form-group">
55. @Html.LabelFor(m => m.Phone, new { @class = "control-label col-md-2" })
56. <div class="col-md-10">
57. @Html.TextBoxFor(m => m.Phone, new { @class = "form-control" })
58. @Html.ValidationMessageFor(m => m.Phone, "", new { @class = "text-danger" })
59. </div>
60. </div>
61. <div class="form-group">
62. <div class="col-md-offset-2 col-md-10">
63. <input type="submit" value="Create" class="btn btn-success" />
64. <a href="/Employees" class="btn btn-warning" >Cancel</a>
65. </div>
66. </div>
67. </div>
68. }
69.
If you want to add more column value into dropdown text you can concatenate them easily, say we want to show
both Id and text in city drop down then we simmply show it like this:
$('<option></option>').
val(city.CityId).html(city.CityId + " - " + city.CityName));
Whatever we see here is not complete to maintain the selected value if we found the model invalid in our post
method and return back to the view then current selected state's cities will be lost same will happen when we
need to fill and select the value in city dropdown for a saved records. We need to add one more JavaScript
method to check on document.ready if there is any value already selected in state dropdown then call the FillCity
method and fill our city dropdown and selected the city value which we get from the model.
I am leaving it for you so you can do a little bit practice, hope you will easily complete it, best of luck.
Having 13+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL
Server). Worked with Metaoption LLC, for more than 9 years and still with the same company.
Always ready to learn new technologies and tricks.
mvc dropdownlistfor jquery javascript
MVC Searh page with pagination: It’s very easy to create a search page in asp.net but when I try to
create the same in MVC I faced many problems, how to create model, how to keep searched values in
search controls, pagination, I found myself nowhere, so start searching for some good examples but...
— By Ali Adravi On 25 Aug 2013 Viewed: 36,143
CRUD (Create, Retrieve, Update and Delete) in MVC. When we start to learn new language, first we try
to run an application with “Hello World” and then CRUD functionality. So in this article we will see how
to select records from database (with WebGrid, pagination and sort functionality), update a...
— By Ali Adravi On 17 Aug 2013 Viewed: 99,531
Sometimes we need a thanks page say we have user registration, change password, activate account
functionality in our application then we need a thanks page after registering with our site, to say thanks
for registering with us or showing confirmation that your password is successfully changed or...
— By Hamden On 30 Jun 2013 Viewed: 3,207
In MVC, autocomplete with jquery is the best way to pull data from database and render according to
our requirements, so in this article we will use jquery to show the auto complete text box without any
ajax controls. We need a method to get the data from database, a controller method to handle the...
— By Ali Adravi On 29 Jun 2013 Viewed: 6,258
Upload multiple files with model data in MVC is really very easy, when I started to test by uploading
some files, I though it would be more complicated but it is really not. In my previous post [ASP.Net MVC
file upload][1], I promised to post soon about how to upload multiple files. When I was...
— By Ali Adravi On 04 Jun 2013 Viewed: 23,181
32 Comments Advancesharp.com
1 Login
LOG IN WITH
OR SIGN UP WITH DISQUS ?
Name
I'm kind of new in MVC but I'm doing my best to learn quickly; however, I'm not able to manage your code in order to make my project work properly...
could you please help me? Here is my Model, Controller, Razor and Script... What am I doing wrong?
Paris
6△ ▽ • Reply • Share ›
⛺
△ ▽ • Reply • Share ›
@Html.DropDownListFor(model => model.StateId, new SelectList(Enumerable.Empty<selectlistitem>(), "StateId", "StateName"), "Select State", new {
id = "StateId", @class = "form-control" })
Json
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/jscript">
$(function () {
$('#Country').change(function () {
$('#StateId').html(null)
$
see more
△ ▽ • Reply • Share ›
https://code.msdn.microsoft...
△ ▽ • Reply • Share ›
I used json data to show the demo, you can use any database and get data by using some kind of service like WebAPI, WebService,
WCF etc.
△ ▽ • Reply • Share ›
At the bottom of the page put your value into a variable on page load and use that latter on, see this
<script type="text/javascript">
var vbValue = @(ViewBag.someStringValue);
// now play with this variable easily
</script>
△ ▽ • Reply • Share ›
om • 4 years ago
could u upload the code source please
△ ▽ • Reply • Share ›
ALSO ON ADVANCESHARP.COM
ASP.NET Web API 2, Owin, OAuth, Bearer Token, Refresh Token Angularjs powerful paging on table and searching with delay and
with custom database demo
6 comments • a year ago 2 comments • 4 years ago
Mansur Haider — I am getting unsupported_grant_type error message naresh gorantla — i need to get the data from service from the database as
Avatarwhile call http://localhost:62670/token with postbody : { Avatarthe above Application.please suggest me. from a http service.
"userName" : "user1@dummy.com", $http.get("http://localhost/table2/mock.json").success(function(response){
Global error handling in angular 6 with HttpClient & interceptor AngularJS HTML5 mode reloading page not found solution
2 comments • a year ago 3 comments • 4 years ago
netalex — i will signal that your stackblitz has an incorrect dep, does'nt find Satish Somani — Its refreshing page continue.. not able to click on any link.
Avatarit in npm Avataras there is any suggestion how to fix it. I am using angular js ui routing with
MVC (.cshtml pages)
✉ Subscribe d Add Disqus to your siteAdd DisqusAdd 🔒 Disqus' Privacy PolicyPrivacy PolicyPrivacy
Privacy Policy Legal About Us Contact Us Feedback Copyright © 2012 - 2019 AdvanceSharp.com All rights reserved