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

  • 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?

    Thursday, July 18, 2019 9:45 AM

All replies

  • 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?

    Thursday, July 18, 2019 3:15 PM
  • User-1548796982 posted

    Why have to selected this approach?

    What is your suggestion?
    I do not know another way

    Thursday, July 18, 2019 5:12 PM
  • 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?

    Thursday, July 18, 2019 6:05 PM
  • 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.

    Thursday, July 18, 2019 9:12 PM
  • User-1548796982 posted

    The problem was resolved by reinitialize chosen drop down

    thanks to everyone

    Friday, July 19, 2019 7:18 AM