rigamonk rigamonk - 3 months ago 15
ASP.NET (C#) Question

How do I refresh the page after a DropdownList changes so that JavaScript will be executed

I know the title is confusing, so I'll evplaiin what i'm trying to do.
I am using the CodeMirror plugin to create a syntax-highlighted text area in MVC 5. I have a dropdownlist with a range of available languages that can be highlighted. I want to be able to swith the textarea language when the DDL changes. Right now, it is always stuck at the first language. Heres What I have So Far:
Model--->

public class CodeSnip
{
public string Title { get; set; }
public string Description { get; set; }
public StringBuilder Code { get; set; }
public LangType Language { get; set; }
}

public enum LangType
{
CSharp,
css,
HTML,
JavaScript,
Perl,
PHP,
Python,
Ruby,
SQL,
VB,
XML,
Other
}


The controller simply calls the appropriate view, no logic in there yet.
HTML/RAZOR--->

@using AFGCodeBox.Models
@model AFGCodeBox.Models.CodeSnip

<script src="/Scripts/CodeMirror/codemirror.js"></script>
<script src="/Scripts/CodeMirror/clike.js" type="text/javascript"></script>
<script src="~/Scripts/CodeMirror/css.js"></script>
<script src="~/Scripts/CodeMirror/htmlmixed.js"></script>
<script src="~/Scripts/CodeMirror/javascript.js"></script>
<script src="~/Scripts/CodeMirror/perl.js"></script>
<script src="~/Scripts/CodeMirror/php.js"></script>
<script src="~/Scripts/CodeMirror/python.js"></script>
<script src="~/Scripts/CodeMirror/ruby.js"></script>
<script src="~/Scripts/CodeMirror/sql.js"></script>
<script src="~/Scripts/CodeMirror/vb.js"></script>
<script src="~/Scripts/CodeMirror/xml.js"></script>
<link href="/Content/codemirror.css" rel="stylesheet" type="text/css" />
<link href="/Content/eclipse.css" rel="stylesheet" type="text/css"/>

<div class="jumbotron">
<h1>AFG Codebox</h1>
<p class="lead">Create your style here</p>
</div>

@using (Html.BeginForm("Create", "Home", FormMethod.Post))
{
@Html.TextBoxFor(m => m.Title, new { type = "Search", autofocus = "true", id = "title", placeholder = "Codesnip Title", style = "width: 200px", @maxlength = "50" })
@Html.DropDownList("Language",
new SelectList(Enum.GetValues(typeof(LangType))),
"Select Language", new {id="codeDDl"})
<p></p>
@Html.TextAreaFor(m => m.Description, new { type = "Search", autofocus = "true", id = "description", placeholder = "Codesnip Description",style = "Width: 800px" })
<p></p>
<div id="CodeBlock">
@Html.TextAreaFor(m => m.Code, new { id = "code" })
</div>




}
<script>

switch(document.getElementById("codeDDl").selectedIndex) {

case 1:
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
matchBrackets: true,
mode: "text/x-csharp"
});
break;
case 2:
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
matchBrackets: true,
mode: "text/x-css"
});
break;
case 3:
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
matchBrackets: true,
mode: "text/x-html"
});
break;
case 4:
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
matchBrackets: true,
mode: "text/x-javascript"
});
break;
}

</script>


You can see the DDL, codeDDL, which I want to fire the javascript case statement; but like I said it only calls index 0.
Is there a way to change the code boxes syntax by changing the selected index of the DDL?

Answer

You can do this like this :

 @Html.DropDownList("Language",
    new SelectList(Enum.GetValues(typeof(LangType))),
    "Select Language", 
    new {id="codeDDl", @onchange="changeEditor()"})

function changeEditor(){
 switch(document.getElementById("codeDDl").selectedIndex) {

        case 1:
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true,
                matchBrackets: true,
                mode: "text/x-csharp"
            });
            break;
        case 2:
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true,
                matchBrackets: true,
                mode: "text/x-css"
            });
            break;
        case 3:
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true,
                matchBrackets: true,
                mode: "text/x-html"
            });
            break;
        case 4:
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true,
                matchBrackets: true,
                mode: "text/x-javascript"
            });
            break;
        }
}
Comments