Pass html code as a string in javaScript in c# mvc

Question

In HTML page, I want to add a dynamic dropdown list after a button click. So on onClick I am trying to add a dropdown list to the HTML block, but to convert the dropdown list as a string I am facing a problem, so can anyone help on this. Below I have provided the code for dropdown but I am facing a problem, to make that as a string before passing it to HTML.

 var dropDownTime='<div class="input-group">'+'@Html.DropDownList("Data", new List<SelectListItem>{
                                                                                new SelectListItem{ Text="Custom Range", Value ="Custom Range" },
                                                                                new SelectListItem{ Text="Last 30 minutes", Value ="Last 30 minutes" },
                                                                                new SelectListItem{ Text="Last 1 hour", Value ="Last 1 hour" }                                                                                    
            }, "Select Data", new { @ng_model = "fileterparameter", @id = "Data", @class = "form-control" })'+
            '<span class="input-group-btn">'+
                '<button class="btn btn-primary" type="button" id="filterlink"><i class="glyphicon glyphicon-filter"></i></button>'+
            '</span>'+
        '</div>';

why don't you return the Html from Partial View and append the HTML to required element? — user1672994
– user1672994, Commented May 16, 2018 at 6:20
The better way to do this is generate the html you want in a hidden container, and then .clone() it and add the copy to the DOM — user3559349
– user3559349, Commented May 16, 2018 at 6:20

Codex · Accepted Answer · 2018-05-16 06:52:32Z

1

I think its not working because you have used the HTML.Dropdownlist inside quotes. Its an object we need to build to get the values in the dropdown. Please try the following code.

var dropDownTime='<div class="input-group">'[email protected]("Data", new List<SelectListItem>{
                                                                            new SelectListItem{ Text="Custom Range", Value ="Custom Range" },
                                                                            new SelectListItem{ Text="Last 30 minutes", Value ="Last 30 minutes" },
                                                                            new SelectListItem{ Text="Last 1 hour", Value ="Last 1 hour" }                                                                                    
        }, "Select Data", new { @ng_model = "fileterparameter", @id = "Data", @class = "form-control" })+
        '<span class="input-group-btn">'+
            '<button class="btn btn-primary" type="button" id="filterlink"><i class="glyphicon glyphicon-filter"></i></button>'+
        '</span>'+
    '</div>';

answered May 16, 2018 at 6:52

Codex

1756 bronze badges

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

1 Comment

sang Over a year ago

getting error "Uncaught SyntaxError: Unexpected token <"

Collectives™ on Stack Overflow

Pass html code as a string in javaScript in c# mvc

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related