I don't know how much code is needed in order for you to understand my problem so I'm starting with explaining what I want to do.
I have a form in my View where I create a new object.
In this form I want to use a dropdownlist and I've tried a lot with #Html.Dropdownlistfor() but realized I don't want to use that since I don't know how to use som Jquery UI-code on this and I don't know how to send a different value than what is shown in the dropdownlist.
Does any of you know how i just send the value selected in the dropdownlist to my controller?
DropDownListFor helper method esssentially render a SELECT element. So if you do not want to use the helper method, You may write the RAW HTML code
#model CreateUserVM
#using(Html.BeginForm())
{
<select name="SelectedCity" id="SelectedCity">
<option value='1'>Ann Arbor</option>
<option value='2'>Novi</option>
<option value='3'>Detroit</option>
</select>
}
Make sure your SELECT elements name property value is same as what you use in your Model, so that Model binding will work.
public class CreateUserVM
{
public int SelectedCity { set;get;}
//other properties
}
In view model:
puclic class ViewModel
{
int SelectId{get;set;}
}
In view
<select name="SelectId" id="SelectId">
<option value='1'>one</option>
<option value='2'>Two</option>
</select>
After post form ViewModel.SelectId will contain value of selected item in dropdown
Related
I have several select lists in my .cshtml view page populated successfully from SQL Server. After a selection is made in the Payee list, I want to perform some additional database work based on the PayeeID. I can handle the SQL and C# coding, I just can't figure out how to get the PayeeID back into the code behind file.
I know I can go from Model to View, but how do I do it the other way around?
If you want to pass PayeeID from view to handler,here is a demo(Set PayeeID as values of options,.net core will bind data with name attribute,such as name="Payee"):
<form method="post" asp-page-handler="PassPayeeId">
<select id="Payee" name="Payee">
<option value="1">Payee1</option>
<option value="2">Payee2</option>
<option value="3">Payee3</option>
</select>
<input type="submit" value="submit"/>
</form>
handler:
public IActionResult OnPostPassPayeeId(string Payee)
{
return Page();
}
result:
This kind of a bizarre issue and I can't figure out a solution how I want.
I'm using .net core 2.1. I have a orders view model like this:
public class OrdersFilterViewModel
{
[Display(Name = "Account Numbers:")]
public IEnumerable<SelectListItem> AccountNumbers { get; set; }
}
My viewmodel and SelectList in my orders controller is called like this:
var vm = new OrdersFilterViewModel
{
AccountNumbers = new SelectList(_context.Account.Where(m => m.UserID == userId), "AccountNumber", "AccountNumber", account)
};
return PartialView("_FilterOrders", vm);
The problem lies when trying to get a dropdown list in the view which looks like this:
<form asp-action="FilterOrders" asp-controller="Order" id="ordersFilterForm" method="post">
<div class="form-group">
<label asp-for="AccountNumbers" class="control-label"></label>
<select asp-for="AccountNumbers" class="form-control" asp-items="#Model.AccountNumbers">
</select>
</div>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-default" />
</div>
</form>
This somewhat works but gives me a textarea type display where multiple = "multiple" is always tacked on in the browser. I've discovered that if I add something like the following to my viewmodel:
public int? AccountId { get; set; }
Then change my view to:
<select asp-for="AccountId" class="form-control" asp-items="#Model.AccountNumbers">
I can then have my dropdown list. However, I don't need that property for anything as far as I know. I tried a million things so it's possible I made some other slight changes I'm forgetting to get that to work, but that's the gist of it.
Is there any way around adding that extra property? Or do I need it for something I'm not aware of? Or is there any way to set multiple = "false" or something to that effect so I can get my dropdown list with my original viewmodel and such?
I haven't dealt with the post back to the controller yet, so maybe that will reveal the gotchas. I'm basically trying to create a modal type query filter that doesn't really do much other than modify some parameters and send them back to my query to update it. Thanks.
Is there any way around adding that extra property? Or do I need it
for something I'm not aware of?
Yes, you need this extra property, because in your select there are many items, and the user will select one or multiple items, and on the server side you'll need to know what the user selected, this is the purpose of the select tag.
And the multiple = "multiple" depends on what you put in the asp-for in the case of asp-for="AccountId" it is a single int value, so it won't use multiple, is you have an array in the asp-for then it will use the multiple.
Here is a pretty detailed description about the select tag helper:
Select Tag Helper in ASP.NET Core MVC
I have a simple select list in my Aurelia view which I'm trying to set a default value on of 'Select...'. I'm also using the aurelia-validation plugin to ensure that the value is changed before the form is submitted. The plugin works great for other field types in my project.
<div class="form-group">
<label for="agencies" class="control-label">Agency</label>
<select value.bind="agencyId" class="form-control">
<option value="">Select..</option>
<option repeat.for="agency of agencies" value.bind="agency.id">${agency.name}</option>
</select>
</div>
In the VM:
constructor(validation) {
this.agencies = null;
this.agencyId = 0;
this.validation = validation.on(this)
.ensure('agencyId')
.isNotEmpty();
}
activate() {
//call api and populate this.agencies
}
After the page initially loads I get my agencies in the list and my default value is correct, but it shows the validation error message:
Other form fields, like text boxes don't do this and show no error message until the user interacts with the form controls.
Is there something special I need to do for a select list to hide validation errors on the initial loading of the view? I suspect that binding the select list in the view is somehow triggering a change event.
Thanks to a kind Aurelia user on Gitter, the problem was solved by setting the initial value of this.agencyId to "". Originally I had the this.agencyId = null. That was my mistake. Because it was null and not "" (as was the default value in the select list) the values didn't match so the select list was invalid when the view loaded. At least, that's my understanding.
The lesson is, if you want to validate a select list, make sure you VM property is initialized to the same value as your select list's default value.
constructor() {
this.agencyId = ""; **//must match the bound property's initial value**
}
And in the view:
<div class="form-group">
<label for="agencies" class="control-label">Agency</label>
<select value.bind="agencyId" class="form-control">
<option value="" **<!-- this value must match the VM initial value -->** selected="true">Select...</option>
<option repeat.for="agency of agencies" value.bind="agency.id">${agency.name}</option>
</select>
</div>
I am building a dropdownlist using the answer here: SelectListItem with data-attributes. This will allow me to add a different class and data annotations to different <option>'s
However I am struggling with building the <select> initially. I have
<select name="#Html.NameFor(a=>a.ValueType)"
id="#Html.IdFor(a=>a.ValueType)">
</select>
My ViewModel looks like
[Required(ErrorMessage = "Value Type is required")]
public string ValueType { get; set; }
How do I get the Required annotation validation into the view?
The final html in the browser should look like:
<select id="ValueType" name="ValueType" data-val-required="Value Type is required" data-val="true"></select>
but I currently have:
<select id="ValueType" name="ValueType"></select>
Is there a #Html method to get these data-val from the ViewModel attributes or how do i do this? Do I have to hard-code it?
I'm trying to make a hidden field show by adding a class when the "other" option is selected from a pull-down list. But I'm not quite sure the correct way to do it.
I have the input hidden and when option is chosen I want to add the class "view" which adds display block making the hidden field visible.
Here is a fiddle showing what I have so far, any help would be much appreciated: http://jsfiddle.net/maikunari/NX795/
$(document).ready(function(){
$("#select-box").change(function(){
if($(this).val() == "other"){
$("#text-field").show();
} else {
$("#text-field").hide();
}
});
});
<select id="select-box">
<option value="Email Newsletter">Email Newsletter</option>
<option value="Yellow Pages ">Yellow Pages </option>
<option id="other-select" value="other">Other</option>
</select>