-1

I'm facing with a very hard problem (for me).

I have a page in ASP.NET MVC with a list of contracts.

For each contract I have 3 DropDown (Contract, Payee, Currency)

These dropdown are used to change the details of the contracts.

The dropdowns are full of options, but they are always the same for each row.

What I obtain is a page very heavy to load, and it freeze the browser while loads all the dropdown lists.

Do you kindly know a way to bind all the dropdowns to the same list of options?

this is part of the code:

 @foreach (Models.ContractsModel CM in Model)
          { ...
<div class="form-group">
<label class="hidden-lg">Site</label>
@Html.DropDownListFor(model => CM.Site, StudyGlobalProperties.FillDropDownList(...), "", new { @class = "form-control" })

Thank you very much for all your help. KR

Lorenzo Moraldo
  • 3
  • 3
  • Not related to your performance issue, but I suggest your read [this](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943) and [this](http://stackoverflow.com/questions/37407811/mvc5-razor-html-dropdownlistfor-set-selected-when-value-is-in-array/37411482#37411482) - your code will never bind to your model as it is –  Mar 27 '18 at 09:04

1 Answers1

0

You can make the client do most of the work with JavaScript. You provide the list once inside a hidden element, then you use JavaScript to extract this data and fill in the Dropdowns.

Example:

@{
    //Assigning example values
    IEnumerable<string> contracts = new[] { "contract a", "contract b", "etc." };
    IEnumerable<string> payees = new[] { "person a", "person b", "etc." };
    IEnumerable<string> currencies = new[] { "Euro", "Dollar", "etc." };
}
@{/* Example on how you could store the values in hidden input elements */}
@Html.Hidden("hiddenContracts", contracts.Aggregate((left, right) => left + "," + right))
@Html.Hidden("hiddenPayees", payees.Aggregate((left, right) => left + "," + right))
@Html.Hidden("hiddenCurrencies", currencies.Aggregate((left, right) => left + "," + right))

@{/* some sets of dropdowns for demonstration */}
<select class="contractDropdown" id="conList1"></select>
<select class="contractDropdown" id="conList2"></select>
<select class="contractDropdown" id="conList3"></select>
<select class="contractDropdown" id="conList4"></select>
<select class="contractDropdown" id="conList5"></select>

<select class="payeeDropdown" id="payList1"></select>
<select class="payeeDropdown" id="payList2"></select>
<select class="payeeDropdown" id="payList3"></select>
<select class="payeeDropdown" id="payList4"></select>
<select class="payeeDropdown" id="payList5"></select>

<select class="currencyDropdown" id="curList1"></select>
<select class="currencyDropdown" id="curList2"></select>
<select class="currencyDropdown" id="curList3"></select>
<select class="currencyDropdown" id="curList4"></select>
<select class="currencyDropdown" id="curList5"></select>

@{/* i include javascript here for this demonstration, you should propably do that in the header */}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
    /**
     * Fills the target node with the comma seperated list of options in the list node
     * @@param target The target node, preferably a select element
     * @@param list The list node, containing the possible options seperated by commas
     */
    function fill(target, list) {
        $.each(list.val().split(","), function (i, value) {
            target.append("<option value='" + value + "'>" + value + "</option>");
        });
    }
    //fills the contract-, payee- and currency dropdowns with their respective data
    fill($("select.contractDropdown"), $("input#hiddenContracts"));
    fill($("select.payeeDropdown"), $("input#hiddenPayees"));
    fill($("select.currencyDropdown"), $("input#hiddenCurrencies"));
</script>

Note that you will probably need to make a slightly more complex approach, as you might need to assign the ids of the values in the dropdowns. But with this you should get an idea on how to do that.

spfi
  • 103
  • 6