Using Html.DropDownList in javascript

Question

I have a Razor page that allows users to add a variable amount of attendees to a meeting object. On the page, there is an "add attendee" button that inserts the textbox onto the page and increments the subscript so that the model binder can pick it up.

$('#addInternalAttendee').on('click', function () {
    $('#internalAttendees').append(
        '<div class=\'attendee\'>' +
            '<input type=\'text\' name=\'Attendees[' + x + ']\' class=\'form-control\' />' +
        '</div>'
    );

    ++x;
});

This piece works fine. What I'm trying to do now is to add a drop down box to select the attendee's role.

    var ddb = '@Html.DropDownList("AttendeeRoleIds[*]", (SelectList)ViewBag.EventAttendeeRoleId, htmlAttributes: new { @class = "form-control", })';

The issue I'm running into is that the HTML contains double quotes which aren't properly escaped, so the function's body on the rendered page looks like this:

$('#addInternalAttendee').on('click', function () {

    var ddb = '<select class="form-control" id="AttendeeRoleIds___" name="AttendeeRoleIds[*]"><option value="1">Host/Organizer</option>
<option value="2">Note Taker</option>
<option value="3">Supervising Manager</option>
<option value="4">Attendee (Participating)</option>
<option value="5">Attendee (Non-Participating)</option>
</select>';
    ddb = ddb.replace('\"', '\'');

    $('#internalAttendees').append(
        '<div class=\'attendee\'>' +
            '<input type=\'text\' name=\'Attendees[' + x + ']\' class=\'form-control\' />' +
            ddb +
        '</div>'
    );

    ++x;
});

Is there a way to get this HTML into the jquery function's body properly escaped so it can be rendered?

I have similar case, after use @Html.Raw() , code work fine.. Try : @Html.Raw(@Html.DropDownList("AttendeeRoleIds[*]", (SelectList)ViewBag.EventAttendeeRoleId, htmlAttributes: new { @class = "form-control", })) — toha
– toha, Commented Mar 17, 2016 at 10:24

krani · Accepted Answer · 2016-03-15 15:35:12Z

1

You could use Json.NET to encode the string:

@Html.Raw(JsonConvert.ToString(@Html.DropDownList("AttendeeRoleIds[*]", (SelectList)ViewBag.EventAttendeeRoleId, htmlAttributes: new { @class = "form-control", })))

Do not forget to add a using-directive in your view:

@using Newtonsoft.Json;

If you have not installed Json.NET yet in your project check this http://www.newtonsoft.com/json

answered Mar 15, 2016 at 15:35

krani

3371 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Dev · Accepted Answer · 2016-03-15 17:05:06Z

0

Try this:

$('#addInternalAttendee').on('click', function () {

var ddb = '<select class="form-control" id="AttendeeRoleIds___" name="AttendeeRoleIds[*]"><option value="1">Host/Organizer</option>
<option value="2">Note Taker</option>
<option value="3">Supervising Manager</option>
<option value="4">Attendee (Participating)</option>
<option value="5">Attendee (Non-Participating)</option>
</select>';

var d = document.createElement('div');
d.innerHTML = ddb;    

$('#internalAttendees').append(
    '<div class=\'attendee\'>' +
        '<input type=\'text\' name=\'Attendees[' + x + ']\' class=\'form-control\' />' +
        d.firstChild +
    '</div>'
);

++x;
});

edited Mar 15, 2016 at 17:05

answered Mar 15, 2016 at 15:23

James Dev

3,0191 gold badge13 silver badges17 bronze badges

2 Comments

Dan Champagne Over a year ago

So this ALMOST worked, problem is now that when I click the button, the input box gets rendered to the screen, but the HTML for the dropdown box, just displays on the screen. It doesn't actually render the box.

James Dev Over a year ago

Are there single quotes around the dropdown box code?

Collectives™ on Stack Overflow

Using Html.DropDownList in javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related