2017-06-19 157 views
0

我有一個現有的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

任何幫助將非常感激。

+0

哪裏是頁面上的JavaScript函數?它看起來像一個標籤可能會丟失的地方導致JavaScript呈現爲文本 –

回答

1

你應該努力使你的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; 
}); 
}); 
+0

這工作!謝謝!我不知道爲什麼這是有效的,我沒有,但它讓我超越了我的堅持。非常感激。 – crmauch

相關問題