ASP.NET MVC 3 Cascading combobox doesn't work - c#

I have two comboboxes. First comobobox I populate in such way and it works fine:
#Html.DropDownListFor(
x => x.Town,
new SelectList(Model.Towns, "Value", "Text"),
"-- Select town --")
public IEnumerable<SelectListItem> Towns
{
get
{
List<DataRow> TownsListDB = OracleSelect("select * from Towns");
List<SelectListItem> townsItems = new List<SelectListItem>();
foreach (DataRow rw in TownsListDB)
{
townsItems.Add(new SelectListItem { Value = rw[0].ToString(),
Text = rw[1].ToString() });
}
return townsItems;
}
}
And depends on the town, I want to show a list of hospitals:
#Html.DropDownListFor(
x => x.Hospital,
Enumerable.Empty<SelectListItem>(),
"-- Select hospital --")
My jQuery code is:
$('#Town').change(function() {
var selectedTown = $(this).val();
if (selectedTown != null && selectedTown != '') {
$.getJSON('#Url.Action("Hospitals")', { town: selectedTown },
function (hospitals) {
var hospitalsSelect = $('#Hospital');
hospitalsSelect.empty();
$.each(hospitals, function(i, hospital) {
hospitalsSelect.append($('<option/>', {
value: hospital.value,
text: hospital.text
}));
});
});
}
});
and C#:
public ActionResult Hospitals(string town)
{
var modelHospital = new MedicalViewModel();
List<DataRow> HospitalsListDB = modelHospital.OracleSelect
("select * from Hospitals hh where hh.TownID = " + town);
List<SelectListItem> hospitalsItems = new List<SelectListItem>();
foreach (DataRow rw in HospitalsListDB)
{
//example:
//rw[0]=101111
//rw[1]=Dublin
hospitalsItems.Add(new SelectListItem { Value = rw[0].ToString(),
Text = rw[1].ToString() });
}
return Json(
hospitalsItems,
JsonRequestBehavior.AllowGet);
return Json(hospitalsItems, JsonRequestBehavior.AllowGet);
}
But it doesn't work. If I use this code as a Return result, then it's ok:
return Json(Enumerable.Range(1, 6).Select(x => new { value = x, text = x }),
JsonRequestBehavior.AllowGet
);
Why combobox doesn't work with my List result from DB?

Use this code :
return Json(hospitalsItems.ToList(), JsonRequestBehavior.AllowGet);
Instead of this in last line
return Json(hospitalsItems, JsonRequestBehavior.AllowGet);

I found out what was the problem. It sounds funny I just needed capital letters in my jQuery code: code select.append($('', { value:hospital.Value, text: hospital.Text }

Related

Load Dropdownlist value in <select> from controller where value and text are different

Hello everyone im just simply trying to load values in a dropdownlist from a controller if I have both the value and text be the same values it works with the model property. But im trying to have the value be the id and the text to be the name with this setup the dropdown is not loading the id.
If both text and value are the same I can just do this and it works
vm.CustomerName = model.CustomerName;
View DDL
#Html.DropDownListFor(e => e.ServiceVM.Employee, Model.Employees, "Select Employee", new { #class = "form-control" })
Some of what i tried.
vm.Employee = new SelectListItem { Value = model.EmployeeID.ToString(), Selected=true };
//vm.EmployeeName = model.EmployeeID.ToString();
//var employee = new Employee_Main();
//try
//{
// employee = context.Employee_Main.Where(z => z.EmployeeID == model.EmployeeID).FirstOrDefault();
//}
//catch(System.Exception) { }
//vm.EmpID = employee.EmployeeID.ToString();
//vm.EmployeeName = employee.EmployeeID.ToString();
I really thought this would of worked.. Im setting the correct 'value' and 'text' that are displayed in the list of ddl items. and also saying selected=true.
//vm.EID = model.EmployeeID;
if (model.EmployeeID != null)
{
if(Int32.TryParse(model.EmployeeID.ToString(), out int empID))
{
var employee = context.Employee_Main.Where(e => e.EmployeeID == empID).FirstOrDefault();
if(employee != null)
{
vm.Employee = new SelectListItem() { Value = employee.EmployeeID.ToString(), Text = employee.EFullName, Selected=true };
}
}
#Html.DropDownListFor(e => e.ServiceVM.Employee, Model.Employees, "Select Employee", new { #class = "form-control" })
I got it working.
I forgot to change my javascript to match with the changing model fields.
var employ = modalA.find(body).find("#ServiceVM_Employee");
//empid.val(jsonObject.employeeid);
//empfn.val(jsonObject.employeefname);
//empln.val(jsonObject.employeelname);
//empem.val(jsonObject.employeeemail);
//emppo.val(jsonObject.employeeposition);
//empname.val(jsonObject.employeefullname);
employ.val(jsonObject.employeeid);
Also for adding content to a listbox.
function displayContactData(conID, modal) {
return $.ajax({
url: '#Url.Action("GetContactInfo", "Service")',
data: { contact: conID },
dataType: 'json',
success: function (data) {
var modalX = modal;
var fullL = modalX.find('.modal-body').find('#lstContact');
fullL.empty();
$.each(data, function () {
fullL.append("<option value='" + this.Value + "'>" + this.Text + "</option");
});
}
});
}

Concatenate between two Razor elements and save value in Database table column in the POST ActionResult

I have a static dropdownlist and editor need to take the selected value from the dropdownlist and the written value from the editor and make a concatenation between the two values and save it in a Database table column in the post ActionResult:
This is the View:
#Html.DropDownList("Term.Description", new List<SelectListItem>
{
new SelectListItem{ Text="Winter", Value = "Winter-" },
new SelectListItem{ Text="Spring", Value = "Spring-" },
new SelectListItem{ Text="Fall", Value = "Fall-" },
new SelectListItem{ Text="Summer", Value = "Summer-" }
}, new { #class = "description-text" })
#Html.Editor("TermYear","", new { htmlAttributes = new { #class = "description-text", placeholder = "2018", data_placeholder = " " } })
ActionResult:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Term term, int[] applicantTypes)
{
ModelState.Remove("ApplicantTypes");
if (ModelState.IsValid)
{
if (applicantTypes != null && applicantTypes.Length > 0)
{
foreach (var item in applicantTypes)
{
term.ApplicantTypes.Add(db.ApplicantTypes.FirstOrDefault(x => x.ApplicantTypeID == item));
}
}
db.Terms.Add(term);
db.Configuration.ValidateOnSaveEnabled = false;
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.ApplicantTypes = new MultiSelectList(db.ApplicantTypes, "ApplicantTypeID", "Name", term.ApplicantTypes.Select(x => x.ApplicantTypeID));
return View(term);
}
Finally, I need the `Term.Description = DropDownListSelectedValue-EditorValue'

How to show an empty dropdownlist when another one isn't selected

I have two dropdownlists both connected to the database, one is called Distritos and the other is called Concelhos, while distritos isn´t selected, concelhos should show empty, when the user selects one of the words of distritos, the Concelhos should show. I want to make it like a state-City relation.
This is what i have in my controller:
public ActionResult getcidades(int? distrito = null)
{
var concelho =
Db.Concelhos.OrderBy(r => r.Nome) as IQueryable<Concelho>;
if (distrito != null)
{
concelho = concelho.Where(t => t.Distritos.Id == distrito);
}
return Json(concelho.Select(r => new { Nome = r.Nome, r.Id }), JsonRequestBehavior.AllowGet);
}
This is what i have in my view:
$("#Distrito").on("change", function() {
var valor = $(this).val();
$.ajax({
type: "get",
url: "#Url.Action("
getcidades ","
PiHelper ")",
data: {
distrito: valor
}
})
.done(function(concelho) {
var dropdown = $("#Concelho");
dropdown.empty().focus();
console.log(concelho, dropdown)
for (var i = 0; i < concelho.length; i++) {
$("<option>")
.attr("value", concelho[i].Id)
.text(concelho[i].Nome)
.appendTo(dropdown);
}
})
})
Try this:
$('#distritos').each(function() {
if ($(this).not(':selected'))
{
$('#concelhos').val(0);
}
});
or
if ($('#distritos :selected').length == 0)
{
$('#concelhos options').remove();
}

Populate a RadioButton

I have a class called [SchoolingLevels], with this code:
public List<SelectListItem> schoolingLevels = new List<SelectListItem>();
public List<SelectListItem> Populate()
{
schoolingLevels.Add(new SelectListItem { Text = "Primary incomplete", Value = "Primary incomplete" });
schoolingLevels.Add(new SelectListItem { Text = "Primary", Value = "Primary" });
schoolingLevels.Add(new SelectListItem { Text = "Secondary incomplete", Value = "Secondary incomplete" });
schoolingLevels.Add(new SelectListItem { Text = "Secondary", Value = "Secondary" });
schoolingLevels.Add(new SelectListItem { Text = "Higher education incomplete", Value = "Higher education incomplete" });
schoolingLevels.Add(new SelectListItem { Text = "Higher education", Value = "Higher education" });
schoolingLevels.Add(new SelectListItem { Text = "Post-graduation/MBA", Value = "Post-graduation/MBA" });
return schoolingLevels;
}
And I want to populate my RadioButton based on this List..
In my controller:
ViewBag.Scholarity = new SchoolingLevels().Populate();
In my view:
#Html.RadioButton("Scholarity", "a")
It's not working.. (I tested with DropDown and works perfectly), isn't it possible to RadioButton?
EDIT
I tried it:
#foreach (var myValue in ViewBag.Scholarity)
{
Html.RadioButton("Scholarity","Value")
}
It seems work, but where can I put the NAME of the radiobuttons?
Ty.
I think the below code will help you:
#foreach (var myValue in ViewBag.Scholarity)
{
string text = myValue.Text.ToString();
string val = myValue.Value.ToString();
#Html.RadioButton("ScholarityList", val);
<span>#text</span>
}
or Create your custom HTML helper like below:
public static MvcHtmlString RadioButtonList(this HtmlHelper helper,
string NameOfList, List<string> RadioOptions) {
StringBuilder sb = new StringBuilder();
// put a similar foreach here
foreach(var myOption in RadioOptions) {
sb.Append(helper.RadioButton(NameOfList, myOption));
}
return new MvcHtmlString(sb.ToString());
}
#Html.RadioButtonList("ScholarityList", ViewBag.Scholarity);
Please follow the link to know more : http://www.codeproject.com/Tips/657164/Radio-Button-List-for-MVC
you can also iterate through your list and change the code below according to the data you have.
foreach (var item in Model)
{
#Html.RadioButtonFor(m => m.item, "Yes") #:Yes
#Html.RadioButtonFor(m => m.item, "No") #:No
}

SelectListItem selected = true not working in view

I have a gender select field (--Select--, Male, Female) and I'm populating that in my controller. When the page loads, I want the gender that is selected in the model pm.Gender to be automatically selected when the page loads.
The values from pm.Gender come back as:
" "
"M"
"F"
View:
<%: Model.Gender %>
<%: Html.DropDownListFor(m => m.Gender, (IEnumerable<SelectListItem>)ViewData["gender"], new { #class = "span2" })%>
Controller:
gender = new[] { "Select", "Male", "Female" };
List<SelectListItem> genderselectList = new List<SelectListItem>();
foreach (string item in gender)
{
SelectListItem sli = new SelectListItem { Text = item, Value = item };
if (item.Trim().StartsWith(pm.Gender))
sli.Selected = true;
genderselectList.Add(sli);
}
ViewData["gender"] = genderselectList;
After debugging the application, I can see that genderselectList contains the proper data with Selected = true for the proper value that is supposed to be selected. But when the page loads, nothing is selected in the dropdown list that was supposed to be generated with the Html.DropDownListFor.
Edit: Does not work in any browser.
Anyone know what could be causing this problem? Any help would be appreciated.
Cheers.
EDIT: (After implementing Kaf's solution)
Ok so this is what I'm doing after implementing Kaf's solution.
View:
<%: Html.DropDownListFor(m => m.Gender, (SelectList)(ViewData["gender"]), new { #class = "span2" }) %>
Controller:
gender = new[] { "Select", "Male", "Female" };
List<SelectList> genderselectList = new List<SelectList>();
foreach (string item in gender)
{
SelectList sli;
if (item.Trim().StartsWith(pm.Gender))
sli = new SelectList(GetGender(), item, item, item);
else
sli = new SelectList(GetGender(), item, item);
//without selectedValue
genderselectList.Add(sli);
}
ViewData["gender"] = genderselectList;
When I do that, I get the following exception:
Unable to cast object of type 'System.Collections.Generic.List`1[System.Web.Mvc.SelectList]' to type 'System.Web.Mvc.SelectList'.
Anyone know what I'm doing wrong?
I suggest it's better if you use strongly typed property for SelectList (rather than using ViewBag/ViewData). I believe what you are expecting is that your dropdownlist to be pre-selected with the gender selection made in the model. Here is a solution (code is not 100% clean. But this will work)
Model
public class TestModel
{
public string Gender { get; set; }
public IEnumerable<SelectListItem> GenderList
{
get
{
List<SelectListItem> list = new List<SelectListItem> { new SelectListItem() { Text = "Select", Value = "Select" }, new SelectListItem() { Text = "Male", Value = "Male" }, new SelectListItem() { Text = "Female", Value = "Female" } };
return list.Select(l => new SelectListItem { Selected = (l.Value == Gender), Text = l.Text, Value = l.Value });
}
}
}
Controller Action
public ActionResult MyView()
{
TestModel m = new TestModel();
m.Gender = "Female";
return View(m);
}
MyView.cshtml
#model TestModel
#{
ViewBag.Title = "MyView";
}
<h2>MyView</h2>
#using (Html.BeginForm())
{
<div>
#Html.DropDownListFor(model => model.Gender, Model.GenderList)
</div>
}
OUTPUT
dropdown with 'Female' option selected
EDIT
Based on comments find below links to sample projects
1) https://github.com/prashanth-t/DropdownDemo_BareBones (Using the MVC 4 empty template. Smaller file size with bare minimum)
2) https://github.com/prashanth-t/DropdownDemo (Using the MVC 4 internet application template. Bigger file size)
This is a known bug in ASP.NET MVC Razor View. As per the known bug documentation
"The reason behind this problem is that asp.net MVC first looks for a match between the name of the drop down and property on the model. If there’s a match, the selected value of the SelectList is overridden. Changing the name of the drop down is all it takes to remedy the issue."
I'm here giving a small example which you can use to test the resolution.
var paymentTypeList = new List<SelectListItem>
{
new SelectListItem { Text = "Select Payment Type", Value = "NA" },
new SelectListItem { Text = "Card", Value = "Card" },
new SelectListItem { Text = "Paytm Wallet", Value = "Paytm Wallet" },
new SelectListItem { Text = "Cash", Value = "Cash", Selected = true },
new SelectListItem { Text = "Credit", Value = "Credit" },
new SelectListItem { Text = "Other", Value = "Other" }
};
ViewBag.paymentTypeList = paymentTypeList;
Resolution Option 1 (Easiest) - Change the Name of declaration id of select list id in MVC view e.g
#Html.DropDownList("paymentTypeListNew", (List<SelectListItem>)ViewBag.paymentTypeList, new { #class = "form-control select2 select1" })
Resolution 2: (Use only single constructor of #Html.DropDownList that matches viewbag/viewdata property)
To ensure that selected item (cash in this example) gets selected do the following in MVC Razor View. Use only the following constructor without any CSS or new object values
#Html.DropDownList("paymentTypeList")
Now if you are worried that you cannot initialize the CSS then you need to initialize the css programitally. For example if you are using Jquery then can you can use
$("#paymentTypeList").addClass("form-control");
$("#paymentTypeList").addClass("select2");
Method to get genders with select:
private Dictionary<string,string> GetGender(){
Dictionary<string, string> myDic = new Dictionary<string, string>();
myDic.Add(System.DBNull.Value.ToString(), "Select");
myDic.Add("Male", "Male");
myDic.Add("Female", "Female");
return myDic;
}
In the controller:
//without selectedValue
ViewData["gender"] = new SelectList(GetGender(), "Key", "Value");
OR
//"Male" as selectedValue
ViewData["gender"] = new SelectList(GetGender(), "Key", "Value", "Male");
In the view:
Html.DropDownListFor(m => m.Gender, (SelectList)(ViewData["gender"]),
new { #class = "span2" })
Try this instead in the controller:
string[] gender = new string[] {"Male", "Female"};
string selectedGender = gender.Where(x => x.StartsWith(pm.gender)).FirstOrDefault();
ViewData["gender"] = new SelectList(gender, selectedGender);
And in the view:
<%: Html.Dropdownlist(x => x.Gender, ViewData["gender"], "Select") %>
After searching myself for answer to this problem - I had some hints along the way but this is the resulting solution. It is an extension Method. I am using MVC 5 C# 4.52 is the target. The code below sets the Selection to the First Item in the List because that is what I needed, you might desire simply to pass a string and skip enumerating - but I also wanted to make sure I had something returned to my SelectList from the DB)
Extension Method:
public static class SelectListextensions
{
public static System.Web.Mvc.SelectList SetSelectedValue
(this System.Web.Mvc.SelectList list, string value)
{
if (value != null)
{
var selected = list.Where(x => x.Text == value).FirstOrDefault();
selected.Selected = true;
}
return list;
}
}
And for those who like the complete low down (like me) here is the usage.
The object Category has a field defined as Name - this is the field that will show up as Text in the drop down. You can see that test for the Text property in the code above.
Example Code:
SelectList categorylist = new SelectList(dbContext.Categories, "Id", "Name");
SetSelectedItemValue(categorylist);
select list function:
private SelectList SetSelectedItemValue(SelectList source)
{
Category category = new Category();
SelectListItem firstItem = new SelectListItem();
int selectListCount = -1;
if (source != null && source.Items != null)
{
System.Collections.IEnumerator cenum = source.Items.GetEnumerator();
while (cenum.MoveNext())
{
if (selectListCount == -1)
{
selectListCount = 0;
}
selectListCount += 1;
category = (Category)cenum.Current;
source.SetSelectedValue(category.Name);
break;
}
if (selectListCount > 0)
{
foreach (SelectListItem item in source.Items)
{
if (item.Value == cenum.Current.ToString())
{
item.Selected = true;
break;
}
}
}
}
return source;
}
You can make this a Generic All Inclusive function / Extension - but it is working as is for me.
Try this;
public static List<SelectListItem> ListSexo { get; } = new List<SelectListItem>
{
new SelectListItem{Selected =true, Value="N", Text="Seleccione"},
new SelectListItem{Value="F", Text="Femenino"},
new SelectListItem{Value="M", Text="Masculino"}
};
<select asp-for="Sexo" asp-items="Commons.ListSexo" class="form-control"></select>

Categories