How to load a partialview and store it in a variable to be used in javascript?

Question

I have a prtialview using a model to create a dropdown list. In my main view I create the partialview html string to use it in javascript functions later.

View:

@model SomeViewModel
@{ 
var devicesDropDown = @Html.Partial("_DropDown", (SelectList)(Model.DeviceTypes));
var devicesHtmlDropDown = MvcHtmlString.Create(devicesDropDown.ToString());
}

But when I want to use it in javascript this way , it is like a unconnected string that causes javascript function an error.

Js function at the buttom of page:

<script type="text/javascript">
   function format(d) {
       var ddl = '@( devicesHtmlDropDown)';
       return ddl;
   }
</script>

This is how string is look like in runtime:

 var ddl = '<select class="form-control input" id="SelectedValue"  name="SelectedValue" style="width: 100%">
<option selected="selected" value="456413">1</option>
<option value="564655465">2</option>
</select>
';

How should I format this string to can render like a static html object. And how can I retrive selected value of this dropdown to post to an action? Should I use TagBuilder?

Answer 1

My suggestion would be to use a script block to hold your template. You can easily retrieve the HTML from there by ID. The script block will never be directly rendered, so it is safely hidden until you extract and apply the HTML.

<script id="ddlTemplate" type="text/html">
    @Html.Partial("_DropDown", (SelectList)(Model.DeviceTypes))
</script>

Then later, you can access this HTML like so (using jQuery)

var template = $('#ddlTemplate').html();