This is my CSHTML page.
<div>
<table cellpadding="8">
<tr>
<th>File Path</th>
<td>#Html.TextBoxFor(Model => Model.returnFilename, new { id = "filepath" })</td>
</tr>
</table>
#if (Model != null)
{
<table cellpadding="8">
<tr>
<th>File Names</th>
<td>
#Html.DropDownListFor(Model => Model.getFileNamesList, new SelectList(Model.getFileNamesList, "getFilepath", "getFileNames"), " -- Select File --", htmlAttributes: new { style = "width: 200px;" })
</td>
</tr>
</table>
}
</div>
<script type="text/javascript">
$(function () {
console.log("in script");
$("[id$=filepath]").on('change', function () {
$.ajax(
{
type: 'POST',
dataType: 'JSON',
url: '/Home/LoadFiles',
data: { filePath: $(this).val() }
})
})
})
</script>
The JavaScript call is made when something is entered in the text box and return. This will call a controller method and fetch the details for a dropdown.
Controller method.
public ActionResult LoadFiles(string filePath, FeatureDisplayListModel getFileName)
{
ModelState.Clear();
string errorMessage = "";
GetFilesModel objFileNames = new GetFilesModel();
try
{
string[] fileEntries = Directory.GetFileSystemEntries(filePath);
foreach (string fileName in fileEntries)
{
if (getFileName.getFileNamesList == null)
{
getFileName.getFileNamesList = new List<GetFilesModel>();
}
string trimFileName = Path.GetFileName(fileName);
objFileNames.getFileNames = trimFileName;
objFileNames.getFilepath = fileName;
getFileName.getFileNamesList.Add(objFileNames);
}
getFileName.isFileName = true;
}
catch (Exception ex)
{
errorMessage = "NO TAG FOUND";
//featAndChannel.returnFilename = featureID + " - " + childFeatureID + " " + errorMessage;
return View("Index", getFileName);
}
return View("ConfigChecker", getFileName);
}
When the details are fetched and returned back to view. The #if condition encapsulating the dropdown is not working. Though it gets into the #if block it is not displaying the dropdown inside it.
If you want to get data from action with ajax,you can try to return List<GetFilesModel> type data to ajax,and then adding html to dropdown with the data:
action:
public List<GetFilesModel> LoadFiles(string filePath, FeatureDisplayListModel getFileName)
{
ModelState.Clear();
string errorMessage = "";
GetFilesModel objFileNames = new GetFilesModel();
try
{
string[] fileEntries = Directory.GetFileSystemEntries(filePath);
foreach (string fileName in fileEntries)
{
if (getFileName.getFileNamesList == null)
{
getFileName.getFileNamesList = new List<GetFilesModel>();
}
string trimFileName = Path.GetFileName(fileName);
objFileNames.getFileNames = trimFileName;
objFileNames.getFilepath = fileName;
getFileName.getFileNamesList.Add(objFileNames);
}
getFileName.isFileName = true;
}
catch (Exception ex)
{
errorMessage = "NO TAG FOUND";
//featAndChannel.returnFilename = featureID + " - " + childFeatureID + " " + errorMessage;
return getFileName.getFileNamesList ;
}
return getFileName.getFileNamesList ;
}
ajax:
$(function () {
console.log("in script");
$("[id$=filepath]").on('change', function () {
$.ajax(
{
type: 'POST',
dataType: 'JSON',
url: '/Home/LoadFiles',
data: { filePath: $(this).val() },
success: function (data) {
var items = '';
$("#getFileNamesList").empty();
$.each(data, function (i, FileNamesList) {
items += "<option value='" + FileNamesList.getFilepath + "' selected>" + FileNamesList.getFileNames + "</option>";
});
$('#getFileNamesList').html(items);
},
})
})
In my view I have one dropdown Role and second ListBox as Permissions. I want to change the values in ListBox as User selects the values in Dropdown Role
<tr>
<td>#Html.Label("","Role")</td>
<td>#Html.DropDownListFor(x => x.Role, #ViewBag.role as SelectList, new { #class = "dropdown"} )</td>
</tr>
<tr>
<td>#Html.Label("","Permissions in Role")</td>
<td>#Html.ListBox("permissions", #ViewBag.permissions as SelectList, new { #class = "chosen-select", data_placeholder = "Add Permissions to Role...", style = "width:500px;", tabindex = "4"})</td>
</tr>
In My js file (Updated After Stephen Suggestion)
$(document).on('change', '#Role_RefID', function () {
var selection = $(this).val();
$.getJSON(window.location.pathname + "/getPermissions?id="+selection, function (result) {
var ddl = $('#permissions');
ddl.empty().trigger("chosen:updated");
$(result).each(function () {
$(document.createElement('option'))
.attr('value', this.Id)
.text(this.Value)
.appendTo(ddl)
.attr('selected',"selected")
;
});
ddl.trigger("chosen:updated");
});
});
getPermissions (Updated after Stephen Suggestion)
public JsonResult getPermissions(int id)
{
List<Reference> perms = rep.permsInRole(id);
var res = perms.Select(p => new { Id = p.RefID, Value = p.Description }).Distinct().ToList();
return Json(res, JsonRequestBehavior.AllowGet);
}
ListBox displays the initial values from DB but when I change the values in dropdown It doesnt clear the contents of Listbox and also doesnt display the new values in ListBoxListBox
i am adding values to 2 dropdownlists dynamically ,to the state dropdownlist it is populated during form load and to the city it must be populated when the jquery fires out when the user clicks on any state,the problem i am facing is that,the state dropdownlist is easily populated but the city dropdownlist does not contain any values when i select a particular state,
the state and city are strings stored in a table in my db
i ll post my code below so that if anyone can sort out what is wrong with my code
homecontroller
public ActionResult registration()
{
ViewBag.states = dd.tb_statecities.Select(m => new SelectListItem { Text=m.state}).Distinct().ToList();
return View();
}
public ActionResult get(string state)
{
var v = (dd.tb_statecities.Where(m => m.state == state).Select(m => m.city)).ToList();
return Json(v, JsonRequestBehavior.AllowGet);
}
jquery..
$(function () {
$('#states').change(function () {
var val = $('#states').val();
$.get("home/get", { state: val }, function (data) {
var v = "<option>Select</option>"
$.each(data, function (i, q) {
alert("hello");
v += "<option value=" + q + ">" + q + "</option>";
});
$('#city').html(v);
});
});
});
registration.cshtml
State #Html.DropDownList("states","Select")
</tr>
<tr class="t">
<td>City</td>
<td>#Html.DropDownList("city", new List<SelectListItem> { new SelectListItem{Text="Select",Value="0"}})</td>
</tr>
The problem is you didn't send value/id when you use ViewBag,
I suggest you use SelectList in your ViewBag :
ViewBag.states = new SelectList(db.states, "ID", "states");
Then you can get the value from using JQuery :
var val = $('#states').val();
I am developing MVC app.
In the view, I have declare some variable and I want to use it in the Jscript.
#model PaymentAdviceEntity.EMI
#{
ViewBag.Title = "Create";
double TotalAmt = 0;
}
#using (Html.BeginForm("Edit", "EMI", FormMethod.Post, new { #id = "frmEdit" }))
{
#if (Model.EMI_Child.Count > 0)
{
#foreach (var PaidEMIList in Model.EMI_Child)
{
TotalAmt = TotalAmt + PaidEMIList.Amount;
}
}
}
<script>
$(document).ready(function () {
CheckBalAmt();
});
function CheckBalAmt()
{
var nTotalAmount = document.getElementById("TotalAmount").value;
var nAllreadyPaidAmount = document.getElementById("AllreadyPaidAmount").value;
var BalAmt = nTotalAmount - nAllreadyPaidAmount;
var totalAmt1 = #TotalAmt; <- Shows error here...
var BalAndTotalAmt = BalAmt +totalAmt1;
$('.BalanceAmt').text("Bal Amt. : " + BalAndTotalAmt );
}
</script>
in above CheckBalAmt() method I want to show the value of variable TotalAmt ...
but it dont show anything...
var totalAmt1 = ('#TotalAmt');
var BalAndTotalAmt = BalAmt - totalAmt1;
alert(#TotalAmt);
$('.BalanceAmt').text("Bal Amt. : " + BalAndTotalAmt );
this code works...
function CheckBalAmt()
{
alert('#TotalAmt');
}
You have to use the razor symbol
I am interested in how to implement cascading dropdown lists for addresses in a Razor view. My Site entity has a SuburbId property. Suburb has a CityId, and City has ProvinceId. I would like to display dropdowns for all of Suburb, City, and Province on the Site view, where e.g. the suburb dropdown will initially display "First select a City", and the City dropdown, "First select a province". On selecting a province, cities in the province are populated etc.
How can I achieve this? Where do I start?
Let's illustrate with an example. As always start with a model:
public class MyViewModel
{
public string SelectedProvinceId { get; set; }
public string SelectedCityId { get; set; }
public string SelectedSuburbId { get; set; }
public IEnumerable<Province> Provinces { get; set; }
}
public class Province
{
public string Id { get; set; }
public string Name { get; set; }
}
Next a controller:
public class HomeController : Controller
{
public ActionResult Index()
{
var model = new MyViewModel
{
// TODO: Fetch those from your repository
Provinces = Enumerable.Range(1, 10).Select(x => new Province
{
Id = (x + 1).ToString(),
Name = "Province " + x
})
};
return View(model);
}
public ActionResult Suburbs(int cityId)
{
// TODO: Fetch the suburbs from your repository based on the cityId
var suburbs = Enumerable.Range(1, 5).Select(x => new
{
Id = x,
Name = "suburb " + x
});
return Json(suburbs, JsonRequestBehavior.AllowGet);
}
public ActionResult Cities(int provinceId)
{
// TODO: Fetch the cities from your repository based on the provinceId
var cities = Enumerable.Range(1, 5).Select(x => new
{
Id = x,
Name = "city " + x
});
return Json(cities, JsonRequestBehavior.AllowGet);
}
}
And finally a view:
#model SomeNs.Models.MyViewModel
#{
ViewBag.Title = "Home Page";
}
<script type="text/javascript" src="/scripts/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function () {
$('#SelectedProvinceId').change(function () {
var selectedProvinceId = $(this).val();
$.getJSON('#Url.Action("Cities")', { provinceId: selectedProvinceId }, function (cities) {
var citiesSelect = $('#SelectedCityId');
citiesSelect.empty();
$.each(cities, function (index, city) {
citiesSelect.append(
$('<option/>')
.attr('value', city.Id)
.text(city.Name)
);
});
});
});
$('#SelectedCityId').change(function () {
var selectedCityId = $(this).val();
$.getJSON('#Url.Action("Suburbs")', { cityId: selectedCityId }, function (suburbs) {
var suburbsSelect = $('#SelectedSuburbId');
suburbsSelect.empty();
$.each(suburbs, function (index, suburb) {
suburbsSelect.append(
$('<option/>')
.attr('value', suburb.Id)
.text(suburb.Name)
);
});
});
});
});
</script>
<div>
Province:
#Html.DropDownListFor(x => x.SelectedProvinceId, new SelectList(Model.Provinces, "Id", "Name"))
</div>
<div>
City:
#Html.DropDownListFor(x => x.SelectedCityId, Enumerable.Empty<SelectListItem>())
</div>
<div>
Suburb:
#Html.DropDownListFor(x => x.SelectedSuburbId, Enumerable.Empty<SelectListItem>())
</div>
As an improvement the javascript code could be shortened by writing a jquery plugin to avoid duplicating some parts.
UPDATE:
And talking about a plugin you could have something among the lines:
(function ($) {
$.fn.cascade = function (options) {
var defaults = { };
var opts = $.extend(defaults, options);
return this.each(function () {
$(this).change(function () {
var selectedValue = $(this).val();
var params = { };
params[opts.paramName] = selectedValue;
$.getJSON(opts.url, params, function (items) {
opts.childSelect.empty();
$.each(items, function (index, item) {
opts.childSelect.append(
$('<option/>')
.attr('value', item.Id)
.text(item.Name)
);
});
});
});
});
};
})(jQuery);
And then simply wire it up:
$(function () {
$('#SelectedProvinceId').cascade({
url: '#Url.Action("Cities")',
paramName: 'provinceId',
childSelect: $('#SelectedCityId')
});
$('#SelectedCityId').cascade({
url: '#Url.Action("Suburbs")',
paramName: 'cityId',
childSelect: $('#SelectedSuburbId')
});
});
Thanks Darin for your lead to the solution. It greatly helped me to arrive to the point. But as 'xxviktor' mentioned, I did got circular ref. error. To get rid of it, I've done this way.
public string GetCounties(int countryID)
{
List<County> objCounties = new List<County>();
var objResp = _mastRepo.GetCounties(countryID, ref objCounties);
var objRetC = from c in objCounties
select new SelectListItem
{
Text = c.Name,
Value = c.ID.ToString()
};
return new JavaScriptSerializer().Serialize(objRetC);
}
And to achieve auto cascading, I've slightly extended jQuery extension this way.
$('#ddlCountry').cascade({
url: '#Url.Action("GetCounties")',
paramName: 'countryID',
childSelect: $('#ddlState'),
childCascade: true
});
And the actual JS is using this parameter as below (inside JSON request).
// trigger child change
if (opts.childCascade) {
opts.childSelect.change();
}
Hope this helps someone with similar issue.
be aware, that this solution doesn't work directly with EF 4.0. It causes "A circular reference was detected while serializing..." error. Here are possible solutions http://blogs.telerik.com/atanaskorchev/posts/10-01-25/resolving_circular_references_when_binding_the_mvc_grid.aspx , I've used second one.
To implement cascading drop down lists that support MVC's built in validation and binding, you will need to do something a little different than what is done in the other answers here.
If your model has validation, this will support it. An excerpt from a model with validation:
[Required]
[DisplayFormat(ConvertEmptyStringToNull = false)]
public Guid cityId { get; set; }
In your controller you need to add a get method, so that your view will be able to get the relevant data later:
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult GetData(Guid id)
{
var cityList = (from s in db.City where s.stateId == id select new { cityId = s.cityId, name = s.name });
//simply grabbing all of the cities that are in the selected state
return Json(cityList.ToList(), JsonRequestBehavior.AllowGet);
}
Now, to the View that I mentioned earlier:
In your view you have two drop downs similar to this:
<div class="editor-label">
#Html.LabelFor(model => model.stateId, "State")
</div>
<div class="editor-field">
#Html.DropDownList("stateId", String.Empty)
#Html.ValidationMessageFor(model => model.stateId)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.cityId, "City")
</div>
<div class="editor-field">
#*<select id="cityId"></select>*#
#Html.DropDownList("cityId", String.Empty)
#Html.ValidationMessageFor(model => model.cityId)
</div>
The content in the drop downs are bound by the controller, and are automatically populated. Note: in my experience removing this binding and relying on java script to populate the drop downs make you lose validation. Besides, the way we are binding here plays nice with validation, so there is no reason to change it.
Now onto our jQuery plugin:
(function ($) {
$.fn.cascade = function (secondaryDropDown, actionUrl, stringValueToCompare) {
primaryDropDown = this; //This doesn't necessarily need to be global
globalOptions = new Array(); //This doesn't necessarily need to be global
for (var i = 0; i < secondaryDropDown.options.length; i++) {
globalOptions.push(secondaryDropDown.options[i]);
}
$(primaryDropDown).change(function () {
if ($(primaryDropDown).val() != "") {
$(secondaryDropDown).prop('disabled', false); //Enable the second dropdown if we have an acceptable value
$.ajax({
url: actionUrl,
type: 'GET',
cache: false,
data: { id: $(primaryDropDown).val() },
success: function (result) {
$(secondaryDropDown).empty() //Empty the dropdown so we can re-populate it
var dynamicData = new Array();
for (count = 0; count < result.length; count++) {
dynamicData.push(result[count][stringValueToCompare]);
}
//allow the empty option so the second dropdown will not look odd when empty
dynamicData.push(globalOptions[0].value);
for (var i = 0; i < dynamicData.length; i++) {
for (var j = 0; j < globalOptions.length; j++) {
if (dynamicData[i] == globalOptions[j].value) {
$(secondaryDropDown).append(globalOptions[j]);
break;
}
}
}
},
dataType: 'json',
error: function () { console.log("Error retrieving cascading dropdown data from " + actionUrl); }
});
}
else {
$(secondaryDropDown).prop('disabled', true);
}
secondaryDropDown.selectedindex = 0; //this prevents a previous selection from sticking
});
$(primaryDropDown).change();
};
} (jQuery));
You can copy the above jQuery that i created, into <script>...</script> tags in your view, or in a separate script file if you wish (note I updated this to make it cross browser, however the scenario in which i was using is no longer required, it should work however).
In those same script tags, (not in a separate file) you can call the plugin by using the following javascript:
$(document).ready(function () {
var primaryDropDown = document.getElementById('stateId');
var secondaryDropdown = document.getElementById('cityId');
var actionUrl = '#Url.Action("GetData")'
$(primaryDropDown).cascade(secondaryDropdown, actionUrl);
});
Remember to add the $(document).ready part, the page must be fully loaded before you try to make the drop downs cascade.
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//Dropdownlist Selectedchange event
$("#country").change(function () {
$("#State").empty();
$.ajax({
type: 'POST',
url: '#Url.Action("State")', // we are calling json method
dataType: 'json',
data: { id: $("#country").val() },
// here we are get value of selected country and passing same value
success: function (states) {
// states contains the JSON formatted list
// of states passed from the controller
$.each(states, function (i, state) {
$("#State").append('<option value="' + state.Value + '">' +
state.Text + '</option>');
// here we are adding option for States
});
},
error: function (ex) {
alert('Failed to retrieve states.' + ex);
}
});
return false;
})
});
</script>
<div>
#Html.DropDownList("country", ViewBag.country as List<SelectListItem>, "CountryName", new { style = "width: 200px;" })
</div>
<div>
</div>
<div>
#Html.DropDownList("State", ViewBag.country as List<SelectListItem>)
</div>
From controller I am getting the values
public async Task<ActionResult> Country()
{
Country co = new Country();
List<SelectListItem> li = new List<SelectListItem>();
li.Add(new SelectListItem { Text = "Select", Value = "0" });
li.Add(new SelectListItem { Text = "India", Value = "1" });
li.Add(new SelectListItem { Text = "Nepal", Value = "2" });
li.Add(new SelectListItem { Text = "USA", Value = "3" });
li.Add(new SelectListItem { Text = "Kenya", Value = "4" }); ;
ViewBag.country= li;
return View();
}
public JsonResult state(string id)
{
List<SelectListItem> states = new List<SelectListItem>();
states.Add(new SelectListItem { Text = "--Select State--", Value = "0" });
switch (id)
{
case "1":
states.Add(new SelectListItem { Text = "MP", Value = "1" });
states.Add(new SelectListItem { Text = "UP", Value = "2" });
break;
case "3":
states.Add(new SelectListItem { Text = "USA1", Value = "3" });
states.Add(new SelectListItem { Text = "USA2", Value = "4" });
break;
}
return Json(new SelectList(states, "Value", "Text", JsonRequestBehavior.AllowGet));
}