I am creating a options list using knockout data-binding. Basically on my server side i have an enum
public enum CarType
{
Saloon = 1,
Hatch = 2,
Convertable = 3,
SUV = 4
}
This basically get created into a dictionary on the server side and is sent back to the client side.
So the above enum will return to the client side as an object with a key and value.
My viewmodel is like so:
this.carName= ko.observable();
this.carType = ko.observable();
My options binding is as below:
<select class="form-control" data-bind="options: $root.carTypes, optionsText: 'value', optionsValue: 'key', value: carType"></select>
So basically when i press the edit button this view will get rendered correctly first time round. But if i cancel the edit page and re-open it then it selects the first element in the options list.
Not sure if i am doing anything wrong or if knockout behaves differently with dictionarys?
The car type object returned is an array of dictionary elements example below
[{key="1", value="Saloon"}, {key="2", value="Hatch"} .......
I'm not sure if I understand your problem. Do you wish to avoid the first item being selected? If so, take a look at the optionsCaption in the docs: http://knockoutjs.com/documentation/options-binding.html#parameters
optionsCaption
Sometimes, you might not want to select any particular option by
default. But a single-select drop-down list usually starts with some
item selected, so how can you avoid preselecting something? The usual
solution is to prefix the list of options with a special dummy option
that just reads “Select an item” or “Please choose an option” or
similar, and have that one selected by default.
This easy to do: just add an additional parameter with name
optionsCaption, with its value being a string to display. For example:
<select data-bind='options: myOptions, optionsCaption: "Select an item...", value: myChosenValue'></select>
KO will prefix the list of items with one that displays the text
“Select an item…” and has the value undefined. So, if myChosenValue
holds the value undefined (which observables do by default), then the
dummy option will be selected. If the optionsCaption parameter is an
observable, then the text of the initial item will update as the
observable’s value changes.
Related
I got weird issue. I'm working with kendo and I've got two cells. First is dropdownlist and the second is depending what I pick in first one. If it's string the second cell is dropdown, if it's int in second cell I got numericbox etc. Now when I'm picking string value second dropdown is showing, but after that when I want to pick another attribute, for example int, the dropdown is not changing on numericbox, just numerixbox is create next to my dropdown.
Screens:
I tried to use .empty() function, but after using this the cell is empty all the time, even if I'll pick another attribute. I just want clear grid cell once after choosing new attribute, not clear it for all time. Tried also $('#myid').html("") but I got the same effect. Can somebody explain me what can I do?
It seems like you'll need a refresh to happen after inputting a new value in the first dropdown. On the kendo UI API page, I've found this reference.
You can code the second dropdown to subscribe to the change event of the first dropdownlist, then emptying the second dropdownlist wont be needed anymore. The example in the reference already shows using the value of the dropdown as a variable. Seeing that the dropdownlist widget in kendo UI doesn't have a visibility property, you'll need to hide or show the wrapper for the element, see the answer from Lars Höppner.
I've added an example I made based on the references:
<input id="dropdownlist" />
<input id="dropdownlist2" />
<script>
function dropdownlist_change(e) {
var dropdownlistToHide = $("#dropdownlist2").data("kendoDropDownList");
var value = this.value();
if (value === "Apples"){
dropdownlistToHide.wrapper.hide();
} else if (value === "Oranges") {
dropdownlistToHide.wrapper.show();
}
}
$("#dropdownlist").kendoDropDownList({
dataSource: [ "Apples", "Oranges" ]
});
$("#dropdownlist2").kendoDropDownList({
dataSource: [ "Dinges", "Dinges2" ]
});
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
dropdownlist.bind("change", dropdownlist_change);
var dropdownlistToHide = $("#dropdownlist2").data("kendoDropDownList");
dropdownlistToHide.wrapper.hide();
</script>
The final dropdownlistToHide.wrapper.hide(); is meant to hide the dropdownlist widget from the start.
I am using ASP.NET Core. I currently use the following <select> element in my view, within a form:
<select asp-for="CarTypeId"></select>
When I make the post I will only get the value for Model.CarTypeId.
However I have another field, Model.CarType which I want to give the value of the selected text in the <select>.
You can add another model property for this and set it during select event using jquery or use formcollection.
It is not a good practice, only the type id should be enough, and use it as a reference to the car type itself, shouldn't be one more field as you described, as this will be redundant.
Anyway the solution is adding a hidden field for CarType, and upon cartypeid change, update its value.
something like this
$('#CarTypeId').on('change', function(){
// this will get the text of the selected option
var theText = $('#CarTypeId').find(":selected").text();
//Update value of the hidden field
$('#CarType').val(theText);
});
Using MVC 5 with a Razor (.cshtml) view
You have a list of values in a model that needs to ultimately get data from a control in the view and append them to the list.
For example:
The model contains: public List<string> value { get; set; }
The List is allowed to contain up to 70 values, but can contain less.
In the view you have a button that dynamically adds #Html.editorfor fields, much like this:
For each new field that is created, it's corresponding value must be appended to the List<string> value. So in this example,
The user clicks "Add Field", the new text box appears, and he enters "Line 1"
When submitted, this field will post to the first index of the value list like so: value[0] = "Line 1"
The user clicks "Add Field" again to add another value - he enters "Line 2"
When submitted, this field will post to the second index of the value list like so: value[1] = "Line 2"
The User can add UP TO 70 fields (i.e He can click "add field" 65 times to add 65 values to the value list)
What would be the quickest and most efficient way to bind the data in this manner?
Before you submit make sure those dynamically added inputs have correct model names and you should be fine. So in your example it would be something similar to this:
<input type="text" name="value[0]" value="Line 1"/>
<input type="text" name="value[1]" value="Line 2"/>
<input type="text" name="value[3]" value="Line 3"/>
And the model binder will automatically create a List of string with those 3 strings ("Line 1","Line 2","Line 3") in them and assign it to the corresponding property, in this case, value.
EDIT: Here's how your addField function could look like to do just that:
function addField(){
var addedFieldCount=$('input.dynamic-field').length;
if(addedFieldCount==70){//But you should check it on the server side too.
alert('No more field allowed');
return;
}
$('#fieldContainer').append('<input name="value['+addedFieldCount+']"/>');
}
That's all. If you call it hard coding then go call it.
EDIT2: As Stephen Muecke noted, you do not need indexer when you're dealing with a collection of string. (I was not aware of that :)). So your function becomes even simpler:
function addField(){
var addedFieldCount=$('input.dynamic-field').length;
if(addedFieldCount==70){//But you should check it on the server side too.
alert('No more field allowed');
return;
}
$('#fieldContainer').append('<input name="value"/>');
}
I have dropdown and binding values from database and values like below.
Value Text
AP AndraPradesh
BL Bangalore
KL Kerala
AP ArunaChalPradesh
When I select ArunaChalPradesh By default AndraPradesh is selecting back again.
Value fields for a dropdown list should be unique. Since they are generally not displayed, I'd say it'd be a good idea to change the value fields to be an ID of some sort instead of abbreviations of the Text.
Since you are trying to set the selected value to AP, it is grabbing the first value from the dropdown list.
If you are sticking with the abbreviations, just change the 2nd AP to another unique value (maybe AC?)
I have a table of experiments, and for each experiment I need to be able to turn it on or off. I pass in a list of my experiments to my view, and iterate over them to create table rows.
Table row creation:
<tr>
<td>#experiment.ExperimentId</td>
<td>#experiment.ExperimentName</td>
<td>#experiment.StartDate</td>
//radio button code goes here
</tr>
I've decided to use the radio button helper to generate the two radio buttons for each experiment.
<td>#Html.RadioButton(experiment.ExperimentName, true, false)ON #Html.RadioButton(experiment.ExperimentName, false, false)OFF</td>
I've used the 'ExperimentName' as the input name, as I want each set of radio buttons to be in their own group.
My question is, when I submit this form, how should I bind the data to the post model. I'm looking to create something like this in the model
Experiments
ExperimentOne -> selected radiobutton value
ExperimentTwo -> selected radiobutton value
I'm assuming i'll need to create a Dictionary object, but i'm not sure how to bind the name and the selected value to this. Any help will be greatly appreciated
Since you are dealing with an enabled/disabled situation, I would recommend using a checkbox over two radio buttons. In either case, your model might look something like this:
public class ExperimentsViewModel
{
// other properties
public IDictionary<int, bool> ExperimentStatus { get; set; }
}
And you would bind to this in your view like so:
<td>#Html.CheckBox("ExperimentStatus[0]", Model.ExperimentStatus[0]) Enabled</td>
The model binder treats dictionaries like an array or a list; use can use indexes (keys in this case) to bind to a value. You can also use a string key instead of an integer.
If you must use radio buttons, your view would look like this:
<td>
#Html.RadioButton("ExperimentStatus[0]", true, Model.ExperimentStatus[0], new {id = "ExperimentStatus_0_ON"})#:ON
#Html.RadioButton("ExperimentStatus[0]", false, Model.ExperimentStatus[0], new {id = "ExperimentStatus_0_OFF"})#:OFF
</td>
You'll have to manually include the id attributes like this because otherwise the ON and OFF inputs would have the same ids, which is invalid HTML.