locked
Help ASAP RRS feed

  • Question

  • User-523978134 posted

    Wanted to Create a Button ( Add ) and once you click that you should display a dropdown. 

    Whern I click ADD this dropdown should populate: 

    I should also be able to add and delete the dropdowns. 


    <div class="form-row">
    <div class="form-group col-md">
    <label asp-for="SecondaryIncomeSource">Secondary Source of Income</label>
    <select class="form-control" asp-for="SecondaryIncomeSource"
    asp-items="@Html.GetEnumSelectList<Ucfs.LoanPortal.Data.Entities.Contacts.SecondaryIncomeSourceType>()"
    data-bind="value: secondaryIncomeSource">
    <option value="">Select</option>
    </select>
    <span asp-validation-for="SecondaryIncomeSource"></span>
    </div>
    </div>

    Monday, February 11, 2019 8:02 PM

All replies

  • User-893317190 posted

    Hi srt,

    Not sure whether this is what you want,below is my sample

    @{
        ViewBag.Title = "DropDown";
    }
    
    <h2>DropDown</h2>
    
    <div><button id="plus">[+]</button>@Html.DropDownList("myname", ViewData["items"] as List<SelectListItem>) </div>
    
    @section scripts{
        
         <script>
             $(function(){
             
                 $("#plus").click(function () {
    // clone the original dropdown var clone = $(this).parent().clone();
    // insert the cloned dropdown $(this).parent().after(clone); // make the first option selected clone.find("option").prop("selected", false); clone.find("option:first").prop("seleted", true);
    // bind event to delete the dropdown clone.find("button").removeAttr("id").html("[-]").click(function () { var parent = $(this).parent(); parent.remove(); }) }) }) </script> }

    My controller.

      public  ActionResult DropDown()
            {
                ViewData["items"] = new List<SelectListItem> {
                    new SelectListItem{Text=Color.Red.ToString(),Value= Convert.ToInt32(Color.Red).ToString() },
                     new SelectListItem{Text=Color.Green.ToString(),Value= Convert.ToInt32(Color.Green).ToString(),Selected=true },
                      new SelectListItem{Text=Color.Yellow.ToString(),Value= Convert.ToInt32(Color.Yellow).ToString() }
                };
           
                 
                return View();
            }
    
           
        }
        public enum Color
        {
            Red,
            Green,
            Yellow
        }

    The result.

    Best regards,

    Ackerly Xu

    Tuesday, February 12, 2019 2:51 AM
  • User-523978134 posted

    When I click the dropdown I need the textfields to be populated. 

    FOr the first dropdown it is populating the fields and when I add the second one - it is not adding any textfields. 

    <div>
    <button id="plus">[+]</button><select class="form-control" asp-for="SecondaryIncomeSource"
    asp-items="@Html.GetEnumSelectList<Ucfs.LoanPortal.Data.Entities.Contacts.SecondaryIncomeSourceType>()"
    data-bind="value: secondaryIncomeSource">
    <option value="">Select</option>
    </select>
    </div>
    <div class="row" data-bind="visible: secondaryIncomeSource()">
    <div class="col-md-6">
    <div class="form-row">
    <div class="form-group col-md">
    <label asp-for="MonthlyIncome"></label>
    <input class="form-control" asp-for="MonthlyIncome" type="number" data-bind="numericTextBox: { value: monthlyIncome, format: 'currency' }" />
    <span asp-validation-for="MonthlyIncome"></span>
    </div>
    </div>

    <div class="form-row">
    <div class="form-group col-md">
    <label asp-for="Employer"></label>
    <input class="form-control" asp-for="Employer" type="text" data-bind="value: employer" />
    <span asp-validation-for="Employer"></span>
    </div>
    </div>
    </div>
    <div class="col-md-6">

    <div class="form-row">
    <div class="form-group col-md">
    <label asp-for="Title"></label>
    <input class="form-control" asp-for="Title" type="text" data-bind="value: title" />
    <span asp-validation-for="Title"></span>
    </div>
    </div>
    <label class="col-form-label">Time at employer</label>
    <div class="form-row">
    <div class="form-group col-md-4">
    <label asp-for="YearsAtCurrentEmployer"></label>
    <input class="form-control" asp-for="YearsAtCurrentEmployer" type="number" data-bind="numericTextBox: yearsAtCurrentEmployer" />
    <span asp-validation-for="YearsAtCurrentEmployer"></span>
    </div>
    <div class="form-group col-md-4">
    <label asp-for="MonthsAtCurrentEmployer"></label>
    <input class="form-control" asp-for="MonthsAtCurrentEmployer" type="number" data-bind="numericTextBox: monthsAtCurrentEmployer" />
    <span asp-validation-for="MonthsAtCurrentEmployer"></span>
    </div>
    </div>
    </div>
    </div>

    Wednesday, February 13, 2019 3:06 PM
  • User-893317190 posted

    Hi srt,

    It is hard to solve your problem  if  I  don't know how you write your javascript.

    What I could do is just make a small sample to bind dropdownlist , add dropdownlist with data and remove dropdownlsit.

    Below is my code.

    @model string
    @{
        ViewBag.Title = "BindSelect";
    }
    
    <h2>BindSelect</h2>
    <button data-bind="click:add">[+]</button><button data-bind="click:remove">[-]</button>
    @* loop through the selectedColor , the count of dropdownlist is the length of selectedColor *@
    <div data-bind="foreach:selectedColors">
        <select data-bind="options:colors,optionsText:'Text',value:data"></select>
    </div>
    
    
    @section scripts{
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
        <script>
          
            var colors =  @Html.Raw(@Model);
            
            var viewModel = {
                // data of options
                colors: ko.observableArray(
                  
                   colors
                ),
                // intial the dropdownlist 
                selectedColors: ko.observableArray([{ data: colors[0] }]),
                // add a dropdownlist
                add: function () {
                    this.selectedColors.push({ data:colors[0]} )
                    
                },
                // remove a dropdownlist
                remove: function () {
                    this.selectedColors.pop();
                }
            }
            ko.applyBindings(viewModel);
        </script>
        }

    My controller.

     

      public ActionResult BindSelect()
            {
    
               
                return View("BindSelect",null, JsonConvert.SerializeObject(new ArrayList
              {
                  new {Text=Color.Red.ToString(),Value= Convert.ToInt32(Color.Red).ToString() },
                  new {Text=Color.Green.ToString(),Value= Convert.ToInt32(Color.Green).ToString()},
                  new {Text=Color.Yellow.ToString(),Value= Convert.ToInt32(Color.Yellow).ToString()}
              }));
            }
    
           
        }
        public enum Color
        {
            Red,
            Green,
            Yellow
        }

    The result.

    You could also refer to knockout's document to learn how to bind dropdownlist and how to use foreach to create mutiple elements.

    https://knockoutjs.com/documentation/options-binding.html

    https://knockoutjs.com/documentation/foreach-binding.html

    Best regards,

    Ackerly Xu

    Thursday, February 14, 2019 5:59 AM