Create composite text for a drop down using html helpers

Question

I want to save bandwidth; I have a drop down that will have duplicate data for the value and text fields. Using MVC and Razor, I want to concatenate the data on the client side, so as to not waste bandwidth sending duplicate data down the wire. How?

So, for example, you want to display the following in a drop down:

<option value="myValue1">myValue1 modifierText</option>

So as to not waste bandwidth, why would we concatenate the data on the server side only to pass duplicate data to the client? What I'm stating/asking is, what is the best way to go about this?

The best alternative, I have found, is to do it on the client side:

<select id="ddlMyList name="ddlMyList">
    <option value="">Select One...</option>
    @For Each li In Model.MyList
        @<option value="@li.v">@li.v @li.t</option>
    Next
</select>

There, now we are concatenating it on the client side and not passing duplicate data down the wire wasting bandwidth.

If anyone knows how to accomplish this using HTML Helpers instead, please let me know! :) Something like the following:

@Html.DropDownList("ddlMFCReference", New SelectList(Model.MFCReferenceList, "Value", "Value" & " " & "TextField", ViewBag.SelectedValue), "Select One...")

Notice the "Value" & " " & "TextField" as the text field reference for the html helper.

Answer 1

Any Razor code is actually run on the server side and the HTML is sent down to the client. HTML helpers are also run on the server side and the output is HTML and is then sent to the client. To truly save bandwidth you would need to render your List from your Model into JSON and then use JavaScript to setup your dropdown list options. This seems like a lot more complexity for not much gain.