Question

In my MVC project I have this Editor Template.
I cannot debug it in the IE Developer Tools as it is in a popup window. I do not have access to the other browsers.
So my jquery is not picking up the values for the url, employeeId and the businessUnitId.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SHP.Models.BusinessUnitSelected>" %>

<tr>
    <td><%: Model.BusinessUnit.BusinessUnitName %></td>
    <td>

    <%: Html.CheckBoxFor( 
            x => x.Selected,
            new RouteValueDictionary 
            { 
                { "data-url", Url.Action("AddBusinessUnitForEmployee", "DataService") }, 
                { "data-employeeId", Model.EmployeeId }, 
                { "data-businessUnitId", Model.BusinessUnit.BusinessUnitId } 
            } 

       ) %> 

    </td>
</tr>
<script type="text/javascript">
    $(document).ready(function () {
        $('tr input[type="checkbox"]').click(function () {
            var elementId = $(this).attr('id');
            alert("elementId = " + elementId);
            var url = $(this).val('data-url');
            alert("url = " + url);
            var employeeId = $(this).val('data-employeeId');
            alert("employeeId = " + employeeId);
            var businessUnitId = $(this).val('data-businessUnitId');
            alert("businessunitId = " + businessUnitId);
            var selectedFlag = $(this).is(':checked');
            alert("selectedFlag = " + selectedFlag);

            dataService.saveSelection(
            employeeId,
            businessUnitId,
            selectedFlag,
            elementId,
            SavedSetting,
            url
        );
        });
    }); 
</script>

Answer 1

.val() is used to get/set the value attribute, you should use .attr() instead:

eg. $(this).attr('data-url');

edit

@Dima Suggests the correct way to access HTML5 data-* attributes – by using .data(), eg. $(this).data('url');

note: You should hyphenate words in your data- attributes otherwise you’ll have trouble reading their values when using .data(). See below:-

<input type="text" data-employeeId="1" />

console.log($('input[type="text"]').data('employeeId')); // (undefined!)

This is because $('input[type="text"]').data('employeeId') is trying to read data-employee-id, using the latter you can then access the data using .data('employeeId') or .data('employee-id').

All data-* names are stored in camelCase in the jQuery data object,
using W3C rules.

So, data-caMEL-case becomes the camelCase property in the data object
and should be accessed using .data("camelCase"). Because many people
will use .data("camel-case") instead, we convert that to camelCase as
well, but only if no data item named camel-case is found so it’s
faster to use the first form. If you get the entire data object using
code like data = jQuery.data(elem), you must use data.camelCase to
access the data item.