I want to know how to put drop down list like this:
<div>
<label>Price Range</label>
<select>
<option value="1">min</option>
<option value="50000">50,000</option>
<option value="100000">100,000</option>
<option value="150000">150,000</option>
</select>
in the view , and read the selected parameter in the controller
tnx
There are many ways to make it work.
Its depend on your needs.
I am going to show you the simplest way to create it in the view itself
You can do it like this all inlined in your *.cshtml file like so:
#{
var loadListItems = new List<SelectListItem>();
loadListItems.Add(new SelectListItem { Text = "text1", Value = "value1", Selected = true });
loadListItems.Add(new SelectListItem { Text = "text2", Value = "value2" });
}
//Begin Form
#Html.DropDownList("ListKey",loadListItems);
//End Form
Will produce the result as follows:
<select name="ListKey">
<option value="value1">text1</option>
<option value="value2">text2</option>
</select>
And on submitting it on controller side you can get the values as follows:
ActionResult YourActionName(FormCollection collection){
var selectedValue = collection["ListKey"];
}
Related
I have a table in this format:
table format
And i try to get this result programmatically:
desired result
I'm using asp.net mvc with razor.
I know there is an example here but i couldnt adapt in my situation :(
May you give an example please?
ADDED my work:
I think i must get the records via json, am i wrong? and im not good at in json
<script type="text/javascript">
$('#ddl_Hours').multiselect();
</script>
<select id="ddl_Hours" multiple>
#foreach (myModel item in ((MultiSelectList)ViewBag.MyList).Items)
{
int dayID = 0;
if (dayID != item.DayID )
{
<optgroup label="#item.DayID ">
<option value="#item.HourID">#item.Name</option>
</optgroup>
}
dayID = item.DayID;
}
</select>
Controller:
var list = (from p in db.T_MYTABLE
select new MyModel { HourID = p.HourID ,
DayID = p.DayID,
Name = p.Name
}).ToList();
ViewBag.MyList= new MultiSelectList(list, !string.IsNullOrEmpty(selectedValue) ? selectedValue.Split(',').ToArray() : null);
For generating such a grouped multi select using the jQuery plugin, first you need to render the HTML markup for grouped options like below
<select id="ddl_Hours">
<optgroup label="4">
<option value="1">00.00</option>
<option value="2">01.00</option>
<option value="3">02.00</option>
<option value="4">03.00</option>
</optgroup>
<optgroup label="2">
<option value="5">04.00</option>
<option value="6">05.00</option>
<option value="7">06.0</option>
</optgroup>
<optgroup label="3">
<option value="8">07.00</option>
<option value="9">08.00</option>
</optgroup>
</select>
To generate the above markup in your view, you can create a list of item's in your action method with the Group property.
var list = db.T_MYTABLE.ToList();
//Create a list of Groups
var groups = list.Select(x => x.DayId)
.Select(f => new SelectListGroup() { Name = "Day " + f.ToString() }).ToList();
var groupedOptions = list.Select(x => new SelectListItem
{
Value = x.HourId.ToString(),
Text = x.Name,
Group = groups.FirstOrDefault(a => a.Name == "Day " + x.DayId.ToString())
}).ToList();
ViewBag.MyList = groupedOptions;
return View();
Assuming Name property of your entity is string type. If it is numeric type, use the ToString() method when setting the Text property value in the projection part of the above linq query (Text=x.Name.ToString())
Now in your razor view, you can use the Html.DropDownList helper method to render the SELECT element.
#Html.DropDownList("ddl_Hours", ViewBag.MyList as List<SelectListItem>)
or for the multi select
#Html.ListBox("ddl_Hours", ViewBag.MyList as List<SelectListItem>)
Now you can call your jQuery plugin to make it fancy. I would call it inside the document's ready event
$(function () {
$('#ddl_Hours').multiselect();
})
and Voila!
I am working on an asp.net application. I have a viewbag with a boolean result (true or false) and I need to select one option from a razore view using this viewbag. I have done it like this.
Controller:
ViewBag.AMZ = result.shipment.ShipAMZ ;
View:
#{
var IsAmzSelected = (bool)ViewBag.AMZ;
}
<select id="amz" name="amz" class="form-input">
#if (IsAmzSelected == true)
{
<option value='1' selected>AMZ</option>
<option value='0'>BBW</option>
}
else
{
<option value='1'>AMZ</option>
<option value='0' selected>BBW</option>
}
</select>
I tried using Html dropdownlist helper method but it didn't work.
in controller i did it like this:
ViewBag.AMZ = new SelectList(new List<SelectListItem>() { new SelectListItem() { Text = "AMZ", Value = "1" }, new SelectListItem() { Text = "BBW", Value = "0",Selected=true } }, "Value", "Text" , result.shipment.amz);
and then bound it to htmldropdown to this viewbag but it didn't work
Can you please suggest how to do it using html.dropdown?
<select id="TypeOfUser" name="typeOfUser" class="active text-normal">
<option value="2" onclick="location.href='#(Url.Action("Index", "User", new { typeOfUser = 2}))'">CMS Users</option>
<option value="3" onclick="location.href='#(Url.Action("Index", "User", new { typeOfUser = 3}))'">Site Users</option>
</select>
on selection of dropdown item I want to call my action method with selected value-
public async Task<IActionResult> Index([FromQuery] int typeOfUser = 2)
{
SearchUsersResponse searchUserResponse = await new SearchUsersHandler(_db).Handle(new SearchUsersCommandAsync
{
Type = typeOfUser
});
return View("Index", searchUserResponse);
}
Currently on dropdown selection change I am not able to call action method.
onclick won't work on the option. What you can do is execute your javascript code for redirecting on the onchange event of the SELECT element.
<select id="TypeOfUser" name="typeOfUser" class="active text-normal"
onchange="doIt(this,'#Url.Action("Index", "User")')">
<option value="2" >CMS Users</option>
<option value="3">Site Users</option>
</select>
Assuming you have a javascript method which has 2 parameters. The first parameter is a reference to the SELECT element on which the onchange event occurred. So you can access the value property to get the selected option's value.
function doIt(item,baseUrl) {
window.location.href = baseUrl + '?typeOfUser=' + item.value;
}
I am trying to set the selected value in a dropdown in a razor view.
<select id="drpStatus" name="status">
<option value="A">Active</option>
<option value="S">Suspended</option>
<option value="T">Terminated</option>
<option value="D">Deleted</option>
</select>
//I am trying with the below code, based on the value in Model, I want to set the particular option as selected
<option selected=#{if(#Model!=null && #Model.Status=='A'){'selected'}} value="A">Active</option>
Above code is not working, please let me know if I am working in a right direction or is there any other/better way to achieve it.
Try this from your controller
Controller :
var record = db.Records.Find(id);
ViewBag.DropStatus = new SelectList(ListOfStatus, record.Status);
The first parameter for SelectList should be an IEnumerable which will serve as the data source for your DropDownList, the second parameter is for the selected value, so just pass the status property of the record you want to edit.
View:
#Html.DropDownList("Status", string.Empty)
The first parameter is the name of the ViewBag we assigned in the controller, it will also serve as the name when you post the data. Hope I've made myself clear.
The following is one of some possible solutions
#{
ViewBag.Title = "Index";
Func<char, MvcHtmlString> function = (c) => Model != null && Model.Status == c
? MvcHtmlString.Create("selected='selected'")
: MvcHtmlString.Empty;
}
<h2>Index</h2>
<select id="drpStatus" name="status">
<option #function('A') value="A">Active</option>
<option #function('S') value="S">Suspended</option>
<option #function('T') value="T">Terminated</option>
<option #function('D') value="D">Deleted</option>
</select>
It would be better to use SelectList in your ViewModel.
Another possible solution is using Razor's helper tag in the cshtml:
#helper SetGender(string dropdownvalue)
{
var selected = string.Format("value=\"{0}\"", dropdownvalue);
if ((string.IsNullOrEmpty(dropdownvalue) && string.IsNullOrEmpty(User.GetClaim(ClaimTypes.Gender.ToString()))) ||
(User.GetClaim(ClaimTypes.Gender.ToString()) == dropdownvalue))
{
selected = string.Concat("selected='selected' ", selected);
}
#Html.Raw(selected);
}
<select name="gender">
<option #SetGender("") >-not set-</option>
<option #SetGender("male") >male</option>
<option #SetGender("female") >female</option>
</select>
#{
List<SelectListItem> lstOrderTypes = new List<SelectListItem>();
lstOrderTypes.Add(new SelectListItem {Value = "1", Text = "plan1" });
lstOrderTypes.Add(new SelectListItem {Value = "2", Text = "plan2" });
}
#functions {
public static string GetString(IHtmlContent content)
{
var writer = new System.IO.StringWriter();
content.WriteTo(writer, HtmlEncoder.Default);
return writer.ToString();
}
}
#{
var x = GetString(Html.DisplayFor(model => model.OrderType));
}
<select>
#foreach (SelectListItem option in lstOrderTypes)
{
<option value="#option.Value" selected="#(option.Value == x)">#option.Text</option>
}
</select>
Are there any helpers for displaying dropdownlists in asp.net-mvc?
I have an enumeration that I need to populate, and pre-select in a dropdownlist.
The FluentHtml library from MVC Contrib has built-in support for generating select boxes from enumerations.
<%= this.Select("example")
.Options<System.IO.FileOptions>()
.Selected(System.IO.FileOptions.Asynchronous) %>
This outputs:
<select id="example" name="example">
<option value="0">None</option>
<option value="16384">Encrypted</option>
<option value="67108864">DeleteOnClose</option>
<option value="134217728">SequentialScan</option>
<option value="268435456">RandomAccess</option>
<option selected="selected" value="1073741824">Asynchronous</option>
<option value="-2147483648">WriteThrough</option>
</select>
<%= Html.DropDownList() %> has about 8 overloads that you can use. You'll need to map your enumeration into an IEnumerable<SelectListItem> to pass to it though. Something like this:
var names = Enum.GetNames(typeof(MyEnum));
List<SelectListItem> items = new List<SelectListItem>();
foreach (var s in names)
{
items.Add(new SelectListItem() { Text = s,
Value = s,
Selected = (s == "SelectedValue") };
}