我知道標題是混亂之後,所以我會evplaiin我想要做的事。 我正在使用CodeMirror插件在MVC 5中創建一個語法高亮的文本區域。我有一個可用突出顯示的可用語言範圍的下拉列表。我希望能夠在DDL更改時交換textarea語言。現在,它始終堅持第一語言。繼承人我有什麼到目前爲止: 型號--->如何刷新頁面下拉列表的變化,使JavaScript的執行
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,我想火的JavaScript case語句;但正如我所說,它只調用索引0. 有沒有辦法通過更改DDL的選定索引來更改代碼框的語法?
綁定一個Javascript onchange事件的下拉列表。 – Jecoms