Solved

Child Gender Dropdownlist

Posted on 2015-02-03
11
138 Views
Last Modified: 2016-02-25
I have a Parent-Child insert form created in MVC 5. I need to add a couple of dropdown lists to a table of inputs.
The problem is that I can't see how to access the details of the child list to data-bind to. I just want a hard coded list as it is very generic, short, and will not change. The example below shows my attempt to use lambda expression to bind to the Gender field, but in real code, this isn't possible. Is there a way to do this? I would need to do the same to the other fields shown.

    <tbody data-bind="foreach: Members">
        <tr>
            <td class="form-group">
@Html.DropDownListFor(model => model.Members.Gender, new List<SelectListItem> {
       new SelectListItem { Text= "Female", Value="Female"},
       new SelectListItem { Text= "Male", Value="Male"}, "Select"
} )
            </td>

            <td class="form-group"><input class="form-control input-sm" data-bind="value: FamilyRole" /></td>
            <td class="form-group"><input class="form-control input-sm" data-bind="value: RelationshipType" /></td>

        </tr>
    </tbody>

Open in new window

0
Comment
Question by:wdarnellg
  • 6
  • 5
11 Comments
 
LVL 96

Expert Comment

by:Bob Learned
ID: 40588884
I don't understand your question.

What is the problem with this line?

@Html.DropDownListFor(model => model.Members.Gender, new List<SelectListItem>

Open in new window

0
 

Author Comment

by:wdarnellg
ID: 40590333
@The Learned One
The table is data-bound to a child viewModel and intellisense does not allow me to see "Gender". When I try to use that line it refers to the Parent model. I don't know what to do to get it to see the child of the model. Does that make more sense? I get what is shown in the screenshot. No child properties.

DDList.jpg
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 40591039
So, Members is a list of objects...

What do you want to show in the drop-down list?
0
 

Author Comment

by:wdarnellg
ID: 40591368
It is, I think. But I think it is a child list of objects. I am sending the entire page to show parent/child structure. In the dropdownlist, I want to show "Female" and "Male".


@model FamilyProfile.Web.ViewModels.FamilyViewModel

<h2>@ViewBag.Title</h2>
<p data-bind="text: MessageToClient"></p>

<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4">
        <div class="input-group">
            <label class="control-label" for="FamilyName">Family Name</label>
            <input name="FamilyName" class="form-control" id="FamilyName" data-bind="value: FamilyName" />
        </div>
        <div class="input-group">
            <label class="control-label" for="FamilyPhone">Family Phone</label>
            <input name="FamilyPhone" class="form-control" id="FamilyPhone" data-bind="value: PhoneNumber" />
        </div>
        <div class="input-group">
            <label class="control-label" for="FamilyEmail">Family Email</label>
            <input name="FamilyEmail" class="form-control" id="FamilyEmail" data-bind="value: Email" />
        </div>
    </div>

    <div class="col-xs-12 col-sm-4 col-md-4">
        <div class="input-group">
            <label class="control-label" for="StreetAddress">Street Address</label>
            <input name="StreetAddress" class="form-control" id="StreetAddress" data-bind="value: Address1" />
        </div>
        <div class="input-group">
            <label class="control-label" for="AptOrUnit">Apt or Unit</label>
            <input name="AptOrUnit" class="form-control" id="AptOrUnit" data-bind="value: Address2" />
        </div>
        <div class="input-group">
            <label class="control-label" for="City">City</label>
            <input name="City" class="form-control" id="City" data-bind="value: City" />
        </div>
    </div>

    <div class="col-xs-12 col-sm-4 col-md-4">

        <div class="input-group">
            <label class="control-label" for="State">State</label>
            <input name="State" class="form-control" for="State" id="State" data-bind="value: State" />
        </div>
        <div class="input-group">
            <label class="control-label" for="ZipCode">Zip Code</label>
            <input name="ZipCode" class="form-control" id="ZipCode" data-bind="value: ZipCode" />
        </div>
        <div class="input-group">
            <label class="control-label" for="IncomeRange">Income Range</label>
            @Html.DropDownListFor(r => r.FamilyIncome, new List<SelectListItem> {
       new SelectListItem { Text= "$0 - $24,999", Value="$0 - $24,999"},
       new SelectListItem { Text= "$25,000 - $49,999", Value="$25,000 - $49,999"},
       new SelectListItem { Text= "$50,000 - $74,999", Value="$50,000 - $74,999"},
       new SelectListItem { Text= "$75,000 - $99,999", Value="$75,000 - $99,999"},
       new SelectListItem { Text= "$100,000 - plus", Value="$100,000 - plus"}
       }, "Income Range", new { @class = "form-control"  })
        </div>
    </div>
</div>
<hr />
<div class="row">
    
    <table class="table table-striped table-responsive">
        <tr>
            <th>First</th>
            <th>Middle</th>
            <th>Last</th>
            <th>Gender</th>
            <th>Member Phone</th>
            <th>Email</th>
            <th>Birthdate</th>
            <th>Decline BD</th>
            <th>Ethnicity</th>
            <th>USTA Num</th>
            <th>Family Role</th>
            <th>Relationship Type</th>
            <th><button data-bind="click: addFamilyMember" class="btn btn-info btn-xs">Add</button> </th>
        </tr>
        <tbody data-bind="foreach: Members">
            <tr>
                <td class="form-group"><input name="FirstName" class="form-control input-sm" data-bind="value: FirstName" /></td>
                <td class="form-group"><input name="MiddleName" class="form-control input-sm" data-bind="value: MiddleName" /></td>
                <td class="form-group"><input name="LastName" class="form-control input-sm" data-bind="value: LastName" /></td>
          [b]  <td class="form-group">
@Html.DropDownListFor( model => model.Members.Gender, new List<SelectListItem> {
       new SelectListItem { Text= "Female", Value="Female"},
       new SelectListItem { Text= "Male", Value="Male"}, "Select"
} )
            </td>[/b]
                <td class="form-group"><input name="MemberPhone" class="form-control input-sm" data-bind="value: PhoneNumber" /></td>
                <td class="form-group"><input name="MemberEmail" class="form-control input-sm" data-bind="value: Email" /></td>
                <td class="form-group"><input name="Birthdate" class="form-control input-sm" data-bind="value: Birthdate" /></td>
                <td class="form-group"><input name="DeclineBirthdate" class="form-control input-sm" data-bind="value: AdultBirthdateDecline" /></td>
                <td class="form-group"><input name="Ethnicity" class="form-control input-sm" data-bind="value: Ethnicity" /></td>
                <td class="form-group"><input name="USTANumber" class="form-control input-sm" data-bind="value: USTANumber" /></td>
                <td class="form-group"><input name="FamilyRole" class="form-control input-sm" data-bind="value: FamilyRole" /></td>
                <td class="form-group"><input name="RelationshipType" class="form-control input-sm" data-bind="value: RelationshipType" /></td>
                <td class="form-group">Remove</td>
            </tr>
        </tbody>
    </table>
</div>
<p><a class="btn btn-default btn-sm" href="/">&laquo; Back to List</a></p>


<p><button data-bind="click: save" class="btn btn-primary btn-sm">Save</button></p>

Open in new window

0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 40591467
You can't reference Gender for a list of objects.  You would need a single object at that point, so you can see the gender for a person.

Is that portion of the view for a single person, or a list of people?  It is is a list, it wouldn't make sense for a drop-down.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:wdarnellg
ID: 40592163
As you can see in the attached screenshot, there is an 'Add' button that allows more than one view model to be displayed if there is more than one family member
The cells for gender, ethnicity, family role and relationship type should be drop downs as I want to limit the choice of answers there. That is one of the dreams at least. :-)

AddFamUI.jpg
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 40592365
How does the section on top relate the row below?

Is that a grid in the bottom section, with an Add button?

Is there a for loop to display multiple rows?
0
 

Author Comment

by:wdarnellg
ID: 40592979
How does the section on top relate the row below?

The top section is the "Parent" table. The code posted above shows the layout for it using bootstrap.

Is that a grid in the bottom section, with an Add button?

The bottom section is a table with a bootstrap formatted button for the 'add' and also the 'remove' buttons.

Is there a for loop to display multiple rows?

I am using some knockoutjs code to loop through the child viewmodel when displaying. But the 'Add' button actually uses some knockoutjs code to create a new blank viewmodel (save for displaying some default values).

  <tbody data-bind="foreach: Individuals">
            <tr>

Open in new window

The full code is a few post up.

    self.addFamilyMember = function () {
        var individuals = new IndividualsViewModel({ Id: -1, FirstName: "", MiddleName: "", LastName: "", Gender: "", PhoneNumber: "0000000000", Email: "", Birthdate: "2015-06-06", AdultBirthdateDecline: 0, Ethnicity: "Other", USTANumber: "0", FamilyRole: "Other", RelationshipType: "Other", ObjectState: ObjectState.Added });
        self.Individuals.push(individuals);
    }

Open in new window


Each time the button is clicked a new row is created representing the "IndividualsViewModel". So, I think it should be possible to provide the dropdowns I want.

This is pretty new to me trying to put these different technologies together, but to provide this UI, it has been the most workable solution I have been able to find. I commented in a previous post on a related topic how IRONIC I find the world of Parent/Child records struggles with actual Parents and Children records.
It is starting to come together though.

This concept is borrowed from a tutorial by Adam Churvis from Pluralsight.com. The course is here:
http://www.pluralsight.com/courses/parent-child-data-ef-mvc-knockout-ajax
The tutorial doesn't address dropdowns and such however.
0
 
LVL 96

Accepted Solution

by:
Bob Learned earned 500 total points
ID: 40595668
You would need to bind to a single element, that you would get from a loop.

Example:

@foreach (var member in Model.Members)
{
    @Html.DropDownList("gender",  genderList)
}

Open in new window

0
 

Author Comment

by:wdarnellg
ID: 40616971
I apologize for taking so long to get back here. A family emergency took me away from this project.

I looked deeper into this seemingly simple, but turned out to be more complex issue. It turns out that I need to create an array in knockoutjs for my list and bind that list to the <select> (dropdownlist) element in my view. All on the client side.

JavaScript:
MembersViewModel = function (data) {
    var self = this;
    ko.mapping.fromJS(data, {}, self);

        self.GenderList = [
            { genderName: "Female" },
            { genderName: "Male" }
        ];

Open in new window


HTML:
<td class="form-group">
                    <select name="Gender" class="form-control input-sm" data-bind="options: GenderList, value: Gender, optionsText: 'genderName', optionsValue: 'genderName', optionsCaption: 'Select Gender'</select>
                </td>

Open in new window


RESULTING FIELD:
Dual view of a html select element
@TheLearnedOne Thanks for looking at this for me. :-)
0
 

Author Closing Comment

by:wdarnellg
ID: 40681742
Sorry it took so long to close this. I thought I already had.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now