I have a current MVC - C# application that generates various "popup" screens containing necessary information. I wanted to apply the same method to create a popup displaying a version history (listing the Versions with their corresponding changes).
However, every time I click on the link to view the list, the JavaScript function that is called simply displays the code of the function instead of executing it.
In my .css file, I have defined the following style (this style is used throughout the application under different names):
#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');
}
In my view, I have included the following code (initially, this view only showed the current version number statically):
<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>
I have also added the following .cs files to my model files (partial code shown here):
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 = ...
I must mention that I took inspiration for the code from an ASPX application that shows its application history.
The JavaScript function triggered by the link in the tag is:
toggleHistory = function () {
$('#VersionHistoryList').toggle();
$('#VersionHistoryList').focus();
}
However, when this JavaScript function is called, instead of displaying the popup, it displays the function's code itself.
Screenshot displaying the code
Any assistance on this matter would be greatly appreciated.