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
Related
I've spent hours on this, and I'm obviously missing something. Code extracts below are from a cut-down version of my actual app.
My viewmodel contains this:
public IEnumerable<SelectListItem> DisplayPageOptions { get; set; }
public string SelectedPageOption { get; set; }
private static SelectListItem item1 = new SelectListItem() { Text = "25", Value = "25" };
private static SelectListItem item2 = new SelectListItem() { Text = "50", Value = "50" };
private static SelectListItem item3 = new SelectListItem() { Text = "100", Value = "100" };
public SelectList selectList = new SelectList(new[] { item1, item2, item3 }, "Value", "Text", item1);
My razor view contains this:
#Html.DropDownListFor(m => m.SelectedPageOption, Model.DisplayPageOptions, "Pages to display", new { onchange = #"submit()" })
My controller contains this:
SymbolViewModel vm = SymbolViewModel.Instance;
if (vm.SelectedPageOption == null)
{
vm.SelectedPageOption = "25";
}
vm.DisplayPageOptions = vm.selectList;
SymbolDataService service = new();
vm.Load(service);
return View(vm);
My intention is that the user selects 25, 50, or 100 from the dropdown and a corresponding number of rows is displayed. My understanding is that the Html.DropDownListFor should bind to the SelectedPageOption property, which I would then use in the ViewModel to load the correct number of rows.
However, the change in dropdown value has no effect on the SelectedPageOption property, so the page is reloaded always with the original default '25' rows - taken from the value that is set in the controller. I have tried making SelectedPageOption an Int, having seen examples on the web. I hadn't wanted to do this originally because the SelectedListItem Values have to be strings. It makes no difference. I also tried not using a singleton pattern for the viewmodel - also no effect.
The binding is not completely ineffective. Whatever default value I set in the controller, this is the value that appears in the dropdown. But the binding does not work the other way. If anyone can cast some light on what's going on, I'd appreciate it.
EDIT: What I didn't originally point out, and what turned out to be relevant, is that my controller method containing the above code is asynchronous.
I finally worked out what was going on. Because my controller Index method is asynchronous, I need to await the model update before reloading my viewmodel. It seems obvious now!
SymbolViewModel vm = SymbolViewModel.Instance;
await TryUpdateModelAsync(vm);
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 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>
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" } })
Can I send a SelectList through a Data Annotation? Something like...
[UIHint("DropDownList", "", new SelectList(new[] {"one","two","three"}))]
public virtual int? OptionID { get; set; }
I don't understand the syntax but this seems possible. If so, how do I access it from an editor template?
If not, how could I dynamically send a SelectList to a DropDownList Editor Template? I specifically would like to avoid making a separate template for every SelectList - I have too many of them. Thanks
EDIT: I'm working on the second option (Reflection) because I thought it might be more direct than overriding that 15-syllable monster, the DataAnnotationsModelMetadataProvider.
You might want to take a look at this blog post:
http://mikevdm.com/BlogEntry/Key/Using-UIHint-With-ControlParameters-in-MVC
Here's a relevant quote:
ControlParameters are limited in that they can only accept (compile-time) constant values, in a somewhat unusual syntax, but they do allow simple vales (true/false, enumerated values, etc.), so your templated helper can behave slightly differently based on parameters. This allows you to combine related functionality, usually found in individual templates (with lots of code duplication), into one single template.
In my app, all my drop down lists were either nullable bools (Yes, No, not set) or enums. I took the route of making a separate template for each one, but using helper methods to make the code within each template very minimal.
For example, I have a template called Level (where Level is an enum):
The code is just a couple usings plus....
#Html.DropDownListFor(model => model, Model.ToSelectList<Level>())
I use these extension methods for ToSelectList:
public static SelectList ToSelectList<TEnum>(this TEnum? value) where TEnum : struct
{
var items = GetSelectListItems<TEnum>().ToList();
items.Insert(0, new SelectListItem { Value = "", Text = LabelIfNull });
return new SelectList(items, "Value", "Text", value.ToString());
}
public static SelectList ToSelectList<TEnum>(this TEnum value)
{
var items = GetSelectListItems<TEnum>();
return new SelectList(items, "Value", "Text", value.ToString());
}
public static IEnumerable<SelectListItem> GetSelectListItems<TEnum>()
{
var values = System.Enum.GetNames(typeof(TEnum));
return values.Select(v => new SelectListItem { Value = v, Text = v.ToFriendlyName() });
}
public static SelectList ToSelectList(this bool isTrue)
{
var items = new[]
{
new SelectListItem { Value = "true", Text = LabelIfTrue },
new SelectListItem { Value = "false", Text = LabelIfFalse }
};
return new SelectList(items, "Value", "Text", isTrue.ToString());
}
public static SelectList ToSelectList(this bool? isTrue)
{
var items = new[]
{
new SelectListItem { Value = string.Empty, Text = LabelIfNull },
new SelectListItem { Value = "true", Text = LabelIfTrue },
new SelectListItem { Value = "false", Text = LabelIfFalse }
};
return new SelectList(items, "Value", "Text", !isTrue.HasValue ? string.Empty : isTrue.Value.ToString());
}
Perhaps you could use control parameters to get down to a single template, but you'll definitely need to write your own DataAnnotationsModelMetadataProvider, as indicated in the blog post.