Set initial dropdown value to viewmodel

Question

I'm having some issues with a dropdown list where I need to pass the initial value to the viewmodel. Just to clarify: I'm working on an edit-form, so the dropdownlist will be populated with an already-selected value.

What I have so far is:

Razor:

<select data-bind="selectedOptions: selectedLength"> 
// razor code omitted 
foreach(var preValue in lengthPreValues) 
{ 
   if(lengthPreValues.Contains(preValue.value)) 
   { 
      <option selected="selected" value='@preValue'>@preValue</ option> 
   } 
  else 
  { 
     <option value='@preValue'>@preValue</option> 
  } 
}

And my viewmodel looks like this:

var editOfferViewModel = { 
  // Properties omitted 
  selectedLength: ko.observable("") 
}; 

ko.applyBindings(editOfferViewModel);

While this definately works when selecting a new value, I'm a bit stuck when it comes to setting the initial value. I was fortunate enough to get some great help from Ryan Niemeyer here on stackoverflow.com with checkboxes and creating custom bindinghandlers, but I'm still having a hard time to figure it out to be honest.

So, any help and/or hint on this is greatly appreciated!

neeebzz · Accepted Answer · 2011-07-20 03:14:05Z

2

A common and easy way to do this is to serialize your model values to the page. This would be something like:

var viewModel = {
  choices: ko.observableArray(@Html.Raw(Json.Encode(Options))),
  selectedChoices: ko.observableArray(@Html.Raw(Json.Encode(SelectedOptions)))
};

Then, just use a standard data-bind on your select like:

data-bind="options: choices, selectedOptions: selectedChoices"

You then don't even need to populate the option elements in Razor.

If your viewModel is built in an external file, then you can just set the value of the observables in your view (after your external script has been loaded)

edited Jul 20, 2011 at 3:14

neeebzz

11.5k7 gold badges50 silver badges65 bronze badges

answered Jul 19, 2011 at 22:51

RP Niemeyer

115k18 gold badges295 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luffy · Accepted Answer · 2011-07-20 14:42:31Z

My data is something like :

dataList = [ {name:'length1',id:1},{name:'length2',id:2},{name:'length3',id:3},{name:'length4',id:4},{name:'length5',id:5} ]

And I have been using that data with dropdown like this :

<select name="xxx" id="xxxid" data-bind="options: dataList,  value: selectedLength , optionsText: 'name', optionsValue: 'id', optionsCaption: 'Please Select...'"></select>


<select name="xxx2" id="xxxid2" data-bind="options: dataList,  selectedOptions: multiSelectedLength , optionsText: 'name', optionsValue: 'id', optionsCaption: 'Please Select...'" size="5" multiple="true"></select>   

var editOfferViewModel = {
 selectedLength: ko.observable(),
 multiSelectedLength: ko.observableArray()    
};

ko.applyBindings(editOfferViewModel);

$(document).ready(function() {
    // Set initial value
    editOfferViewModel.selectedLength(2);
    // Set inital multi value
    editOfferViewModel.multiSelectedLength(['2','3']);   
});

You can use value property to set initial value.

Here is the working example.

Collectives™ on Stack Overflow

Set initial dropdown value to viewmodel

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related