Question

我知道标题令人困惑，所以我会告诉我正在尝试做什么。我正在使用CodeMirror插件在MVC 5中创建一个突出显示语法的文本区域。我有一个下拉列表，其中包含一系列可以突出显示的可用语言。我希望能够在DDL更改时切换textarea语言。现在，它总是停留在第一语言。继承人我到目前为止：模型---＆GT;

 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 /剃刀---＆GT;

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

你可以看到我想要触发javascript case语句的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'（当用户从下拉列表中选择一个值时触发），在回调函数中添加您的代码。

以下示例仅显示主体：

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>

如何在DropdownList更改后刷新页面以便执行JavaScript

2 个答案: