How to mix C# with javascript for changing html?

Question

I'm trying to change a html DOM element. With data from asp.net. All the data from CSharp is in the ViewBags. ViewBag.Kenmerken is a list of Strings and ViewBag.Definities is a list a definition object with a variable 'variabel' and the variable 'kenmerk'. I have the following code:

@{
    ViewBag.Title = "KenmerkSelectie";
}


<script type="text/javascript">
    function Kenmerk1() {
        var myselect = document.getElementById("kenmerk1");
        var selectValue = myselect.options[myselect.selectedIndex].value;
        var newOptions= "";

        @foreach (var def in ViewBag.Definities) {

            //@def.kenmerk is C# && selectValue is JS;
            if(@def.Kenmerk == selectValue){
                newOpstions= newOptions+ "<option value=\"@def.Variabel\"> @def.Variabel </option>";
            }
        }

        document.getElementById("var1").innerHTML = newOptions;
    }

    <div class="kenmerk">
        <h3>Kenmerk 1</h3>
                <select id="kenmerk1" onchange="Kenmerk1()">

                    @foreach (var item in ViewBag.Kenmerken)
                {
                    <option value="@item">
                            @item
                        </option>
                }


                </select>


                <select id="var1" multiple="multiple">
                    <!-- add option from js function -->
                </select>
            </div>

EDIT:

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS0103: The name 'selectValue' does not exist in the current context

Source Error: if(@def.Kenmerk == selectValue){

Answer 1

You aren't properly escaping your " (quotations). This line:

newOptions = newOptions + "<option value="@def.Variabel"> @def.Variabel </option>";

Should be something like:

newOptions = newOptions + @"<option value=""@def.Variabel""> @def.Variabel</option>";

Though, for ASP.NET MVC design principles, I'd recommend not using the ViewBag. Use a model for passing in your data instead. http://tech.trailmax.info/2013/12/asp-net-mvc-viewbag-is-bad/

EDIT: Also, it looks like you should convert your data to JSON so that you can compare your values on the JavaScript side. Since def.Kenmerk lives in C#, it won't be able to evaluate the JavaScript variable, selectValue on an == comparison.

Answer 2

Try using razors <text> Pseudo-element see also here

function Kenmerk1() {
    var myselect = document.getElementById("kenmerk1");
    var selectValue = myselect.options[myselect.selectedIndex].value;
    var newOptionsInHtmlStyle = "";

    @foreach (var def in ViewBag.Definities) {
        <text>
        //@def.kenmerk is C# && selectValue is JS;
        if(@(def.Kenmerk) == selectValue){
            newOptions = newOptions + '<option value="@(def.Variabel)"> @(def.Variabel) </option>';
        }
        </text>
    }

    document.getElementById("var1").innerHTML = newOptions;

}