In ASP.NET MVC how do I pass in ASP.NET razor strings into a javascript onclick function?

Question

The problem that I am getting is that the value of ASP.NET Strings by default are passed into javaScript functions by value without their type. For example, "1" is passed in as 1. "a" is passed in as a, but then an error occurs because a has never been defined.

Here is the table that I am creating.

   <table border="1">
    <tr>
        <td>Search Result Number</td>
        <td>ID</td>
        <td>Topic</td>
        <td>Speaker</td>
        <td>Verse</td>
        <td>Duration</td>
        <td>Date</td>
        <td>Audience Type</td>
        <td>Type</td>
        </tr >
    @{
       int Search_Result_Number = 1;
    }
    @foreach (Audio audio in Model)
    {
        string Topic = audio.Topic;

        if (Topic.Equals(""))
        {
            Topic = "None_Given";
        }

        string Speaker = audio.Speaker;

        if (Speaker.Equals(""))
        {
            Speaker = "None_Given";
        }

        string Verse = audio.Verse;

        if (Verse.Equals(""))
        {
            Verse = "None_Given";
        }

        string Duration = audio.Duration;

        if (Duration.Equals(""))
        {
            Duration = "None_Given";
        }

        string Date = audio.Date;

        if (Date.Equals(""))
        {
            Date = "None_Given";
        }

        string Type = audio.Type;

        if (Type.Equals(""))
        {
            Type = "None_Given";
        }

        string Audience_Type = audio.Audience_Type;

        if (Audience_Type.Equals(""))
        {
            Audience_Type ="None_Given"; 
        }
        <tr onclick="Displays_Audio_Info(@audio.Date)">
            <td>@Search_Result_Number</td>
            <td>@audio.Id</td>
            <td>@Topic</td>
            <td>@Speaker</td>
            <td>@Verse</td>
            <td>@Duration</td>
            <td>@Date</td>
            <td>@Audience_Type</td>
            <td>@Type</td>
            </tr>
        Search_Result_Number++;
    }

</table> 

Here is my javascript function.

    function Displays_Audio_Info(date) {
   document.getElementById("Date").innerHTML = date;


}

The first value under my Date column is a.

This is the error I get because "a" is processed as variable name, not a string.

Unhandled exception at line 35, column 26 in http://localhost:18931/a

0x800a1391 - JavaScript runtime error: 'a' is undefined

Answer 1

From your edited code, it looks like you are trying to set your element with an id of "Date" to a DateTime (string)?

If so, why not pass <tr onclick="Displays_Audio_Info(@audio.Date.ToShortDateString())"> ? That will give your Displays_Audio_Info() a string parameter.

As a side note, you're doing a lot of processing in your view, I suggest you create a view model that has been populated with the correct values for each item in your collection instead of doing all that in your view.