Question

我有一个现有的MVC - C＃应用程序，可以创建几个＆＃34; popup＆＃34;显示或输入所需信息的屏幕。我想重用应用程序中的方法来弹出版本历史记录显示（列出版本以及对它们所做的更改。

当我点击应该显示列表的链接时，调用的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而不是显示＆＃39; popup＆＃39;时，它会显示javacript函数的代码。

Image of screen displaying code

非常感谢任何帮助。

Answer 1

你应该努力使你的javascript尽可能不引人注目。

在链接中添加一个类：

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

通过类绑定点击操作并禁用doc ready上的默认a href操作：

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

Javascript显示代码而不是执行

1 个答案: