CODEWITHSUNDEEP
javascriptasp.netknockout.js
A NewBie
A NewBie

Reputation: 181

Binding a dropdownList using knockout

I am new to knockout and MVC. Am trying to bind knockout observable array to a dropdownlist.Here is the code I am using.

JS code

       var Provider =
          {
              ProviderID: ko.observable(""),
              FirstName: ko.observable(""),
              LastName: ko.observable(""),
              Certification: ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N"]),
              Specialization: ko.observable(""),
              TaxonomyCode:ko.observable(""),
              SSN: ko.observable(""),
              ContactNumber: ko.observable(""),
              ContactEmail: ko.observable(""),
              FacilityName: ko.observable(""),
          }
             ko.applyBindings(Provider);

Am trying to bind Certification field.

My HTML code is as follows

 <head>
     <title>CREATE PROVIDER</title>
 </head>
 <body>
<div class="container">    
    <h1 class="col-sm-offset-2">Enter Provider Details:</h1><br />
    <form class="form-horizontal" role="form" id="ProviderDetailsForm">
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">FIRST NAME:</label>
            <div class="col-sm-6">
               <input type="text" class="form-control" autofocus="autofocus" placeholder="Enter the First Name" id="FirstName" data-bind="value: FirstName" onkeypress="return onlyAlphabets(event);">
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_FirstName">Enter the first name</label>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">CERTIFICATION:</label>
            <div class="col-sm-6">
                <select class="form-control" id="Certification" data-bind="value: Certification, optionsCaption: 'Select a Certification'">
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">SPECIALIZATION:</label>
            <div class="col-sm-6">
                <select class="form-control" id="Specialization" data-bind="value: Specialization">
                    <option>Select a Specialization</option>    
                    <option>Doctor</option>
                    <option>Facility</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">TAXONOMY CODE:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="Taxonomy code" id="TaxonomyCode" data-bind="value: TaxonomyCode" disabled="disabled">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">SSN:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="Enter the SSN" id="SSN" data-bind="value: SSN" onkeypress="return onlyNumbers(event);" maxlength="9">
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_SSN">Enter the SSN</label>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">FACILITY NAME:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" data-bind="value: FacilityName" placeholder="Enter the Facility Name" id="FacilityName">
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_FacName">Enter the Facility name</label>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">CONTACT NUMBER:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" data-bind="value: ContactNumber" placeholder="Enter the Contact Number" id="ContactNumber" onkeypress="return onlyNumbers(event);" maxlength="10">
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_ContactNum">Enter the Contact Number</label>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">EMAIL ADDRESS:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" data-bind="value: ContactEmail" placeholder="Enter your email address" id="EmailAddress">
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_EmailAddress">Enter the Email Address</label>
        </div>

        <div class="form-group">
            <button type="submit" id="Submit" class="btn btn-primary col-sm-1 col-sm-offset-4">Submit</button>
            <button type="reset" class="btn btn-primary col-sm-1">Reset</button>
        </div>
    </form>
</div>
<script type="text/javascript" src="../../Scripts/Create_Script.js"></script>

The other bindings seem to be working fine,But the dropdown list is not getting populated.New to this,So any guidance would be appreciated.

Upvotes: 0

Views: 978

Answers (1)

dotnetom
dotnetom

Reputation: 24901

You need to have 2 properties for certification in your model - one to hold a list of available values, and one to hold the selected value. For example:

Certification: ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N"]),
SelectedCertification: ko.observable(""),

Then for your select element you can use binding as follows:

<select data-bind="options: Certification, 
                   value: SelectedCertification,
                   optionsCaption: 'Choose a certification...'">
</select>

Upvotes: 1

Related Questions