Javascript显示代码而不是执行

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

当我点击应该显示列表的链接时，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函数的代码。

Image of screen displaying code

任何帮助将非常感激。

来源

2017-06-19 crmauch

哪里是页面上的JavaScript函数？它看起来像一个标签可能会丢失的地方导致JavaScript呈现为文本 –

你应该努力使你的javascript尽可能不显眼。

类添加到您的链接：

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

绑定通过类的点击动作，并禁用默认A HREF行动DOC准备：

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

来源

2017-06-19 16:36:46

这工作！谢谢！我不知道为什么这是有效的，我没有，但它让我超越了我的坚持。非常感激。 – crmauch

Javascript显示代码而不是执行

回答

相关问题