title: Passing a parameter to a Javascript function using data attributes in an <a> tag in MVC 5
body: <p>I am building an MVC 5 web app using Visual Studio 2013.</p>
  
  <p>I am trying to create a list of Courses using anchor tags which when clicked will pass as a parameter the selected Course to a Javascript function. The Javascript function will in turn use Ajax to call a second function to retrieve a list of Students enrolled on the selected Course.</p>
  
  <p>In the View I have:</p>
  
  <pre><code>@model  IEnumerable&lt;School.Models.Course&gt;
  
  ...
  
  @foreach (var item in Model)
  {
      &lt;a class='selectedCourse' onclick='JavaScript:selectedCourse()' data-cname="@item.CourseName"&gt;@item.CourseName&lt;/a&gt;
  }
  </code></pre>
  
  <p>The Course list gets created as expected:</p>
  
  <pre><code>&lt;a class='selectedCourse' onclick='JavaScript:selectedCourse()' data-cname="Chemistry"&gt;Chemistry&lt;/a&gt;
  &lt;a class='selectedCourse' onclick='JavaScript:selectedCourse()' data-cname="Physics"&gt;Physics&lt;/a&gt;
  </code></pre>
  
  <p>My Javascript function is defined as follows:</p>
  
  <pre><code>function selectedCourse() {
  var selectedCourseName = $(this).data('cname');
  }
  </code></pre>
  
  <p>The code reaches the Javascript function but the value of selectedCourseName is always 'undefined'.</p>
  
  <p>Am I missing something really basic for this to work?</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Walter</p>