DropdownList가 변경되어 JavaScript가 실행되도록 페이지를 새로 고치려면 어떻게해야합니까?

Question

제목이 혼란 스럽다는 것을 알고 있습니다. 그래서 내가하려고하는 것을 evplaiin 할 것입니다. CodeMirror 플러그인을 사용하여 MVC 5에서 구문 강조 텍스트 영역을 만듭니다. 강조 표시 할 수있는 사용 가능한 언어의 드롭 다운 목록이 있습니다. DDL이 변경되면 textarea 언어를 사용할 수 있기를 원합니다. 지금은 항상 첫 번째 언어에 머물러 있습니다. Heres는 내가 지금까지 무엇을 가지고 : 모델 --->

는

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 
    } 

컨트롤러는 단순히 해당보기가 아직 없음 논리를 호출합니다. 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> 

당신은 내가 자바 스크립트의 경우 문을 발사 할 DDL, codeDDL를 볼 수 있습니다; 하지만 내가 말했듯이 인덱스 0 만 호출합니다. DDL의 선택된 인덱스를 변경하여 코드 상자 구문을 변경하는 방법이 있습니까?

Answer 1

당신은 다음과 같이이 작업을 수행 할 수 있습니다 : 예를 들어 아래

은 교장을 보여

@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; 
     } 
} 

Answer 2

페이지를 새로 고칠 필요가 없습니다. 이벤트 핸들러를 드롭 다운 요소에 바인딩하고 'change'이벤트 (사용자가 드롭 다운 목록에서 값을 선택하면 시작됨)를 수신합니다. 콜백 함수에서 add 당신의 코드.

document.getElementById("codeDDl").addEventListener('change',function(e){ 
 
console.log('your code execute here!'); 
 

 
});

<select id="codeDDl"> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select>