I have 3 tables country , state , city .
I want cascading drop down list as usual.
How can i do that without using the LINQ.
I don't know that how to start. I want to do that using RAZOR. It is okay if it is in JQUERY or JSON.
How to start that.
Thanks in advance.
Can i do that using stored procedure.
tables are:-
user:
name
cityid
country:
id stateid name
state
stateid cityid name
city
cityid name .
i have tried nothing because i don't know where to start.
A general approach to creating cascading selects
Create a view model containing the properties you want to display, including properties for the country and state ID's and a SelectList for the Country options
In your view render selects using #HtmlDropDownFor() for the Country, Sate and Property ID's (the Country select will be populated; the others will be empty)
Using jQuery, in the Country change event, use an AJAX call to an action method which returns a list of States based on the selected Country (either return html to replace the City select, or return JSON to create a new set of option elements.
Repeat the above when a State is selected (to populate the City select)
No one here will provide you complete code like you are asking in your question but usage of dropdown i m explaining below :
Basic and cleanest way to make a dropdown in MVC is like :
Model :
public List<SelectListItem> ItemTypes { get; set; }
public int ItemVal { get; set; }
In your [HttpGet] Controller just bind `Model.ItemTypes` with values
View:
#Html.DropDownListFor(m => m.ItemVal , new SelectList(Model.ItemTypes , "Value", "Text"), " -----Select List----- ")
here in above example the 3rd overload of DropDownListFor() i.e. " -----Select List----- " will be the initial selected item of your dropdown with value equal to ' '.
At Controller during POST ItemVal will have selected dropdown value.
The above shown code is best and simplest way to bind Dropdownlist in MVC.
See this exmple. You'll have an idea. I'm just showing sample which is not tested.
public ActionResult Index()
{
var countries = new List<string> { "USA", "India" };
ViewBag.Countries = new SelectList(countries);
return View();
}
public ActionResult GetStates(string country)
{
//perform filter here based on country
return Json(new[] {
new { Id = 1, Value = "State 1" },
new { Id = 2, Value = "State 2" },
new { Id = 3, Value = "State 3" },
}, JsonRequestBehavior.AllowGet);
}
View Page
<div>Select country:</div>
<div>#Html.DropDownList("country",
ViewBag.Countries as SelectList,
"Please select",
new { id = "country" })
</div>
<div>Select state:</div>
<div>
<select id="state"></select>
</div>
On Country selection, do ajax call and get related states.
<script type="text/javascript">
$(function () {
$('#country').on('change', function () {
$.getJSON('#Url.Action("GetStates")', function (result) {
var ddl = $('#state');
ddl.empty();
$(result).each(function () {
$(document.createElement('option'))
.attr('value', this.Id)
.text(this.Value)
.appendTo(ddl);
});
});
});
})
</script>
Related
I'm working with an ASP.NET mvc projekt and I'm familiar with the usual razor helpers #Html.TextBoxFor... etc. but I'm in the situation where I need to set a string value in the model using a dropdown list, the list always has the same twelve items in it and I just need to populate this list with those items and make sure it sets the field value in the model to the selected one.
I'm curious how I should go about doing this? I've looked at dropdown tutorials and I might be able to get a dropdown working but I'm not sure how to set the field value and I'm not sure where to store these twelve strings. I thought about hardcoding them instead of putting them in a db or something since it's so few but I'm open to better suggestions.
Any help is appreciated
UPDATE
This is my Razor code, I created a simple viewmodel which contains the list of items to display in the dropdown and including the model class I wanna use for this create view.
#Html.DropDownListFor(x => x.question.QuestionId, new SelectList(Model.AreasList), new { #class = "dropdown" })
This is my viewmodel
public class CreateQuestionViewModel
{
public Question question { get; set; }
public IEnumerable<String> AreasList = new List<String> { "Option 1", "Option 2" };
}
It works but I can't figure out why visual studio keeps throwing me a null reference and points at my razor code for the dropdown?
sure, so you need to set the model field based on the selected List Item when the user selects it, assuming that you have a static dropdown list:
//this is your view View1.chtml
#model Class1
<select id="list1" name="list1">
<option value="0">option1</option>
<option value="1">option2</option>
</select>
<script>
$(document.ready)(function(){
//set the list from model
var modelvalue = '#Html.Raw(Json.Encode(Model.ValueFromList))';
$(#list1).val(modelvalue);
});
//handle the change event of Dropdown list
$("#country").change(function()
{
var _selected = $("#list1").val();
var options =
{
type: "POST",
url: '#Url.Action("Action1","controller1")',
data: _selected + ,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
//set the returned value as the selected dropdownlist value
$(#list1).val(msg);
}
}
};
.ajax(options);
</script>
//this is the class that you want to set the value in (the Model)
Class1
{
public string ValueFromList {get;set;}
}
//then you need an action method ( in your Controller) that will update the Model with the new Value:
public Controller1
{
[HttpPost]
public JsonResult Action1(string value)
{
Class1 cl1=new Class1();
cl1.ValueFromList=value;
return Json(new {Success="true", cl1});
}
I am working on a MVC project.I have a view having a dropdownlist with an option label "Select Task".Now the integer property bound with this dropdown is not a required field.
But then too after I try to save, I get the dropdown having a red border showing that it is required. When I analysed, I found that the option label has value null.
Using firebug when I entered 0 for the value of option label, the view was saved with no model state error. Am I doing something wrong ? How to avoid it ?
View
#Html.DropDownListFor(model => model.projecttaskid, new SelectList((IList<SelectListItem>)ViewData["MyTasks"], "Value", "Text"),"Select Task", new { #class = "span2" })
Model public int projecttaskid { get; set; } Controller It doesn't reach the controller action.
projecttaskid is not nullable. Unless you provide a default value for the drop down list, the model will not bind properly, which is why you are getting validation error even though the model field is not marked as [required].
Edit: by default value I mean an item in the list with a value of 0, since the default value for projecttaskid is 0.
For instant, you use an overload of DropDownListFor with the optionLabel argument (your "Select Task" argument.
If no item is selected, this will be taken as the "selected option", and return a null value for model.projecttaskid.
The easiest way would be to add an element with a 0 value when you create your list (ViewData["MyTasks"])
With, for example :
Value = 0;
Text = "Select Task;
And use an overload of DropDownListFor without the optionLabel.
[By the way, usage of ViewModels instead of ViewData would be a good thing, but that's another problem]
*EDIT *
We do use some extension methods to manage these cases :
public static IEnumerable<SelectListItem> ToSelectListItem<T, TValue, TText>(
this IEnumerable<T> enumerable,
Func<T, TText> text,
Func<T, TValue> value)
{
return enumerable.Select(item => new SelectListItem
{
Text = text(item).ToString(),
Value = value(item).ToString()
}).AsEnumerable();
}
public static IEnumerable<SelectListItem> WithDefaultZeroValue(this IEnumerable<SelectListItem> selectListItems, string chooseText/* = ChooseText*/)
{
IList<SelectListItem> items = selectListItems.ToList();
items.Insert(0, new SelectListItem { Value = "0", Text = chooseText });
return items.AsEnumerable();
}
usage
var myList = mySourceForDropDown.ToSelectListItem(m => m.TextField, m => m.ValueField)
.WithDefaultZeroValue("SelectTask")
use this:
#Html.DropDownListFor(model => model.Type, new SelectList(Enum.GetNames(typeof(Enums.TenderType))), new Dictionary<string, object>() { { "data-val", "false" } })
I'm trying to set the selected Value for a drop down list.
In Controller I have
ViewData["productType"] = new SelectList(myDropDownList);
And in the View:
<%= Html.DropDownList("productType", ViewData["productType"] as SelectList, "defaultValue")%>
So far So good, but the problem is that now I have "defaultValue" twice in my drop down list. so I have all my values in dropdownlist including the "defaultValue". but this code will add the "defaultValue" as the first element. and I see two samples of it.
I like to set the selected valiue to "defaultValue" without adding it twice.
I tried
ViewData["productType"] = new SelectList(myDropDownList, "defaultValue" );
but it didn't work.
Can anyone please tell me what to do?
You should not be using the same name as first argument for the dropdown as the second one. In your example you have used productType for storing both the selected value and the list of available values. In order to render a DropDown in ASP.NET MVC you need 2 properties:
<%= Html.DropDownList(
"selectedProductType",
ViewData["productType"] as SelectList,
"defaultValue"
) %>
and inside your controller action you could set those 2 properties:
ViewData["selectedProductType"] = "abc";
ViewData["productType"] = new SelectList(myDropDownList);
this assumes that you already have an element with value="abc" inside your dropdown list of product types. The value will then be automatically preselected.
I would recommend you an alternative approach though for rendering dropdown lists. It consists of getting rid of view data and introducing view models and using the strongly typed version of the helper:
public class ProductViewModel
{
public string SelectedProductType { get; set; }
public IEnumerable<SelectListItem> ProductTypes { get; set; }
}
then you will have a controller action that will populate this view model and pass it to the view:
public ActionResult SomeAction()
{
var model = new ProductViewModel();
// preselected an element with value = "type2"
model.SelectedProductType = "type2";
// bind the available product types
model.ProductTypes = new SelectList(
// Obviously those could come from a database or something
new[] {
new { Value = "type1", Text = "product type 1" },
new { Value = "type2", Text = "product type 2" },
new { Value = "type3", Text = "product type 3" },
new { Value = "type4", Text = "product type 4" },
},
"Value",
"Text"
);
// pass the view model to the view
return View(model);
}
and finally inside your strongly typed view:
<%= Html.DropDownListFor(
x => x.SelectedProductType,
Model.ProductTypes,
"defaultValue"
) %>
I am looking for detailed ASP.NET MVC examples which make extensive use of grouped checkboxes (where multiple checkboxes can be selected, use case: choose the magazines you want to subscribe to with options such as "SI", "Forbes", "Money" etc) as well as grouped radio buttons (use case: at a bank choose either "savings" or "checking" account).
I have searched and found only scattered UI snipped but no complete MVC example which makes heavy use of these two UI elements and goes into detail on how the values from these elements are processed in the controller, captured in the model and persisted in the database.
Thanks,
The example here is for HTMLHelper for Checkbox Grouping
public static class HtmlHelperGroup
{
static string container = #"<div id=""{0}"">{1}</div>";
static string checkboxhtml = #"<input type=""checkbox"" name=""{0}"" value=""{1}"" {3} />{2}</br>";
public static string CheckBoxGroup(this HtmlHelper obj, string name, List<SelectListItem> data)
{
StringBuilder sb = new StringBuilder();
foreach (var content in data)
{
sb.Append(string.Format(checkboxhtml, name, content.Value,content.Text, content.Selected ? "checked" : string.Empty ));
}
return string.Format(container, "container_" + name, sb.ToString());
}
}
<%=Html.CheckBoxGroup("account", new List<SelectListItem>()
{
new SelectListItem() { Text="Checking", Value = "1" },
new SelectListItem() { Text="Saving", Value = "2" }}) %>
Hope this helps
i'm buildin' an employee registration form in aspnet mvc, i have fields like "School" list in 1 dropdown box and "Department" list another, problem is i want to show Department list on change of School list, i have done followin' code:
public ActionResult EmployeeCreate()
{
var getSchool = SchoolRepository.GetAllSchoolsInArray();//this gets school_id as value and school_name as text for dropdown box
ViewData["SchoolsList"] = getSchool;
return View();
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EmployeeCreate()
{
_employeeRepository.CreateEmployee(employeeToCreate);
_employeeRepository.SaveToDb();
}
Here is the View
Html.DropDownList("SchoolLists")
Html.DropDownList("DepartmentLists")
now, how do i get the departments of selected school in dropdown boxes
If you want to populate the Departments list based on the value of the selected School when this value changes you could use javascript and AJAX. So you setup a controller action which would return the departments for a given school:
public DepartmentsController: Controller
{
public ActionResult Index(int? schoolId)
{
var departments = _depsRepo.GetDepartmentsForSchool(schoolId);
return Json(departments);
}
}
Once you have this controller you could use jQuery to register a change event of the schools drop down:
$(function() {
$('#SchoolList').change(function() {
var schoolId = $(this).val();
$.getJSON('/departments/index', { schoolId: schoolId },
function(departments) {
var depsList = $('#DepartmentLists');
depsList.empty();
$(departments).each(function(i, department) {
// Id and Name used here should be properties
// of the department model
depsList.append(
'<option value="' + department.Id + '">' +
department.Name + '</option>'
);
});
});
});
});