title: How do I refresh the page after a DropdownList changes so that JavaScript will be executed
body: <p>I know the title is confusing, so I'll evplaiin what i'm trying to do.
  I am using the <a href="https://codemirror.net/" rel="nofollow">CodeMirror</a> 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---></p>
  
  <pre><code> 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
      }
  </code></pre>
  
  <p>The controller simply calls the appropriate view, no logic in there yet.
  HTML/RAZOR---></p>
  
  <pre><code>@using AFGCodeBox.Models
  @model AFGCodeBox.Models.CodeSnip
  
  &lt;script src="/Scripts/CodeMirror/codemirror.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/CodeMirror/clike.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/CodeMirror/css.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/CodeMirror/htmlmixed.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/CodeMirror/javascript.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/CodeMirror/perl.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/CodeMirror/php.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/CodeMirror/python.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/CodeMirror/ruby.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/CodeMirror/sql.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/CodeMirror/vb.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/CodeMirror/xml.js"&gt;&lt;/script&gt;
  &lt;link href="/Content/codemirror.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/Content/eclipse.css" rel="stylesheet" type="text/css"/&gt;
  
  &lt;div class="jumbotron"&gt;
      &lt;h1&gt;AFG Codebox&lt;/h1&gt;
      &lt;p class="lead"&gt;Create your style here&lt;/p&gt;
  &lt;/div&gt;
  
  @using (Html.BeginForm("Create", "Home", FormMethod.Post))
  {
      @Html.TextBoxFor(m =&gt; 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"})
      &lt;p&gt;&lt;/p&gt;
      @Html.TextAreaFor(m =&gt; m.Description, new { type = "Search", autofocus = "true", id = "description", placeholder = "Codesnip Description",style = "Width: 800px" })
      &lt;p&gt;&lt;/p&gt;
      &lt;div id="CodeBlock"&gt;
          @Html.TextAreaFor(m =&gt; m.Code, new { id = "code" })
      &lt;/div&gt;
  
  
  
  
  }
      &lt;script&gt;
  
          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;
          }
  
      &lt;/script&gt;
  </code></pre>
  
  <p>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?</p>