error “string literal contains an unescaped line break” on append DropDownList

Question

User-1548796982 posted

I wrote this code to append @Html.DropDownList to div.

var markup = '<div class="col-md-2">@Html.DropDownList("Contact[" + i.ToString() + "].Contact_ContactTypeID", (SelectList)(ViewData["TelContactTypelist"]),  new { @class = "form-control chosen-select" })</div>';
$(".box").append(markup);

But in "Inspect Element" gives the following error: SyntaxError: '' string literal contains an unescaped line break

My dropdown in the Inspector :

<select id="Contact_0__Contact_ContactTypeID" name="Contact[0].Contact_ContactTypeID">
<option value="">select....</option>
<option value="38">10101010</option>
<option value="30">11111111</option>
<option value="31">2222222</option>
<option value="32">3333333</option>
</select>

where is the problem from?

Answer 1

User475983607 posted

tadbirgaran

I wrote this code to append @Html.DropDownList to div.

var markup = '<div class="col-md-2">@Html.DropDownList("Contact[" + i.ToString() + "].Contact_ContactTypeID", (SelectList)(ViewData["TelContactTypelist"]),  new { @class = "form-control chosen-select" })</div>';
$(".box").append(markup);

But in "Inspect Element" gives the following error: SyntaxError: '' string literal contains an unescaped line break

My dropdown in the Inspector :

<select id="Contact_0__Contact_ContactTypeID" name="Contact[0].Contact_ContactTypeID">
<option value="">select....</option>
<option value="38">10101010</option>
<option value="30">11111111</option>
<option value="31">2222222</option>
<option value="32">3333333</option>
</select>

where is the problem from?

The little bit of code shown is using razor to render JavaScript.  Then the JavaScript renders HTML. 

The only way I could reproduce the results is...

@section scripts {
    <script>
            @{var i = 0; }
            var markup = '<div class="col-md-2">@Html.DropDownList("Contact[" + i.ToString() + "].Contact_ContactTypeID", (SelectList)(ViewData["TelContactTypelist"]),  new { @class = "form-control chosen-select" })</div>';
            $(".box").append(markup);
    </script>
}

It is easier to render the HTML using Razor as normal.  Why have to selected this approach?

Answer 2

User-1548796982 posted

Why have to selected this approach?

What is your suggestion?
I do not know another way

Answer 3

User475983607 posted

What is your suggestion?

You did not post enough code nor have you explained the design. 

As far as I can tell form the two lines of code shared above, there is no reason to build dynamic JavaScript that renders HTML.  You get the same result using and less code using standard Razor.

I do not know another way

IMHO, the markup should look similar to the following and covered here; https://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/

<div>
    @for (int i = 0; i < Model.Count(); i++)
    {
    <div class="col-md-2">
        @Html.DropDownListFor(m => m[0].ItemId, (SelectList)(ViewData["TelContactTypelist"]), new { @class = "form-control chosen-select" })
    </div>
    }
</div>

Again, can you explain the design and provide all the relevant code?

Answer 4

User-821857111 posted

mgebhard

Why have to selected this approach?



What is your suggestion?

I do not know another way

You could use a partial to generate the HTML and then load the result into the box element via AJAX.

Answer 5

User-1548796982 posted

The problem was resolved by reinitialize chosen drop down

thanks to everyone