Javascript显示代码而不是执行

Question

我有一个现有的MVC-C＃应用程序，它创建了几个显示或输入所需信息的“弹出”屏幕。 我想重用应用程序中的方法，以弹出版本历史记录显示（列出对版本进行了更改的版本。

每当我单击应该显示该列表的链接时，被调用的javascript函数就会显示该函数的代码，而不是执行该代码。

我在我的.css文件中定义了这个。 （此样式使用不同的名称在整个应用程序中使用）

#VersionHistoryList
{
    position: fixed;
    width: 50%;
    height: 70%;
    top: 15%;
    left: 25%;
    padding: 1%;
    background-color: white;
    border: 1px solid #444;
    border-radius: 5px;
    z-index: 100;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
    color: #f5f1ef;
    background-image: url('../images/bg.jpg');
}

在我的视图中，我添加了以下代码（最初，该视图仅静态显示当前版本号）

<div style="float: left; width: auto;">
    <span ><a style="color:White" href="javascript:toggleHistory">JPortal, version @ViewContext.Controller.GetType().Assembly.GetName().Version</a></span>
        <div id="VersionHistoryList" style="display: none;">
            <span style="font-size: larger;">Version History</span>
            <div style="height: calc(100% - 100px); overflow: auto;">
                <div class="SearchResults">
                    @foreach (JudicialPortal.Models.VersionHistory.V sr in @JudicialPortal.Models.VersionHistory.HistoryList)
                    {
                        <span style="display: block; font-weight: bold;">
                            Version @sr.Number
                        </span>
                        <span style="float: left; width: 10%;"> @sr.Date </span>
                        <span style="float: right; text-align: left; width: 90%;">@sr.Description</span>
                    }
                </div>
            </div>
            <button type="button" class="m-btn red-stripe" onclick="$('#VersionHistoryList').hide(0);" style="float: left;">
                Cancel<i class="icon-remove"></i></button>
        </div>

</div>

我将此.cs文件添加到了模型文件中（此处部分显示）

namespace <applicationname..Models
{
    public class VersionHistory
    {

        public class V
        {
            public string Title { get; set; }
            public string Number { get; set; }
            public string Description { get; set; }
            public DateTime Date { get; set; }
        }

        public static List<V> HistoryList
        {
            get
            {
                var data = new List<V>();
                data.Add(new V() { Number = "1.0.1", Title = "Registration Setup", Date = new DateTime(2014, 7, 11), Description = "Setup For Registration." });
                data.Add(new V() { Number = "1.0.2", Title = ...

我应该注意，我从显示其应用程序历史的ASPX应用程序中获取了代码的上述概念。

标记中的链接所调用的javascript函数为：

    toggleHistory = function () {
        $('#VersionHistoryList').toggle();
        $('#VersionHistoryList').focus();
    }

当调用JavaScript而不是显示“弹出窗口”时，它将显示javacript函数的代码。

屏幕显示代码的图像

非常感激任何的帮助。

Answer 1

您应该努力使您的JavaScript尽可能不引人注目。

将类添加到您的链接中：

<span ><a style="color:White" class="toggleMe" href="#">JPortal, version @ViewContext.Controller.GetType().Assembly.GetName().Version</a></span>

通过class绑定click操作，并在doc ready上禁用默认的href操作：

$(document).ready(function(){
 $('.toggleMe').click(function(){
     $('#VersionHistoryList').toggle();
     $('#VersionHistoryList').focus();
     return false;
 });
});