Interesting ASP MVC5 question

[mic_y]

I have the following question for you guys:

I have a js file for an editable datatable. When a user clicks to edit a row, the cell contents are changed out with a control to edit the contents of that cell through injecting HTML via js.

This all works well for a simple text input, but gets a bit more tricky with things like drop-downs where the amount of markup to be injected increases exponentially.

What I would like to do is use the MVC HTML helpers to generate the code for dropdowns (based on values passed in through the model passed to the view).

What would be the easiest way to do this, as the HTML helpers do not work in external JS files.

The code in the JS file is as follows:

jqTds[3].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[3] + '">';

When coding the dropdown manually, things come out looking more horrible:

jqTds[2].innerHTML = '<select class="form-control"><option value="Nikon">Nikon</option><option value="Canon">Canon</option></select>';

This gets messy and I have yet to figure out how to pass in the list of options for each of the drop-downs (there would be 2 dropdowns and a textbox for each line. The options for the 2 dropdowns are different.

How do I get around this?

Cheers

 

[insom]

Just some quick thoughts off the bat (without trying anything out)

- If your dropdowns change as you go along, maybe use an ajax call to either return the html to be dropped in, or return json and use something like mustache to build the html to be dropped in

- or if they are known inputs from the beginning, build the a single version of each of the inputs (1 textbox, 2 selects, etc) in your view with your html helpers, hide them, then clone them and stick the clones into the td as needed. ($("select1").clone().appendTo(blah))

Edit: Had the appendto the wrong way around

 

[mic_y]

Just some quick thoughts off the bat (without trying anything out)

- If your dropdowns change as you go along, maybe use an ajax call to either return the html to be dropped in, or return json and use something like mustache to build the html to be dropped in

- or if they are known inputs from the beginning, build the a single version of each of the inputs (1 textbox, 2 selects, etc) in your view with your html helpers, hide them, then clone them and stick the clones into the td as needed. ($("select1").clone().appendTo(blah))

Edit: Had the appendto the wrong way around

So, I went about it a slightly different way. First I create a global JS array with the contents of the dropdowns (generated from the List<SelectListItem>). I loop through the array using JS in the editRow method, and add each of the options.

            $.each(window.typeOptions, function (i, value) {
                $('select[name=gearType]')
                    .append($('<option>', { 
                        value: value.Text,
                        selected: value.Selected,
                        disabled: value.Disabled
                    })
                    .text(value.Text));
            })
;

Now my next problem is figuring out to how to bind the Model.GearItems property with the values that have been added to the table.