Question

In my application I have an edit profile page which you can see below;

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.master" 
Inherits="System.Web.Mvc.ViewPage<SHP.WebUI.Models.EmployeeViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Edit
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <% using (Html.BeginForm("Edit", "Employee"))
    {%>
        <%: Html.AntiForgeryToken()%>
        <%: Html.ValidationSummary(true)%>
        <fieldset>
            <legend>Edit Employee</legend>
             <% if (TempData["Message"] != null && TempData["Message"].ToString().Length > 0)
             { %>
                <p class="success">
                   At <% Response.Write(DateTime.Now.ToString("T")); %> 
                   you entered <%: TempData["Message"]%>.
                </p>
             <%} %>
            <table class="groupBorder" id="editTable">
                <tr>
                    <td style="text-align: right;"><%: Html.LabelFor(model => model.Employee.CompanyId)%></td>
                    <td>
                        <%: Html.DropDownListFor(model => model.Employee.CompanyId, Model.CompaniesSelectList)%>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right;">
                <%: Html.LabelFor(model => model.Employee.EmployeeNumber)%>
                   </td>                    
                    <td>
                <%: Html.TextBoxFor(model => model.Employee.EmployeeNumber,
                    new { maxlength = "4", style = "width:35px;text-transform: uppercase;" })%>
                <%: Html.ValidationMessageFor(model => model.Employee.EmployeeNumber)%>
                    <span class="error" id="errorMessage">
                        <% if (TempData["ErrorMessage"] != null)
                        { %>
                            <%: TempData["ErrorMessage"].ToString()%>
                        <% } %>
                    </span>
                    </td>
                </tr>

                <tr>
                    <td style="text-align: center;padding-top:20px;" colspan="2">
                    <input type="submit" value="Save"  id="btnSubmit"/></td>
                </tr>
            </table>
        </fieldset>

    <% } %>

    <div>
        <%: Html.ActionLink("Back to List", "List")%>
    </div>

    <script language="javascript" type="text/javascript">


        $(document).ready(function() {


            $("#Employee_CompanyId").change(function () {
                validateEmployeeNumber();
            });

            $("#Employee_EmployeeNumber").change(function () {
                validateEmployeeNumber();
            });
        });

        function validateEmployeeNumber() {
            var employeeNumber = $("#Employee_EmployeeNumber").val().toUpperCase();
            $("#Employee_EmployeeNumber").val(employeeNumber);
            if (employeeNumber.length == 0) {
                $('#errorMessage').text("Employee Number Required");
            }
            if (employeeNumber.length > 0) {
                $('#errorMessage').text('');
                $('#btnSubmit').attr("disabled", false);
                var companyId = $("#Employee_CompanyId").val();
                var employeeId = $("#Employee_EmployeeId").val();
                $.ajax({
                    data: { companyId: companyId, employeeNumber: employeeNumber, employeeId: employeeId },
                    dataType: "text",
                    success: function (data) {
                        if (data.length > 0) {
                            $('#errorMessage').text(data);
                            $('#btnSubmit').attr("disabled", true);
                        }
                    },
                    type: "POST",
                    url: '<%= Url.Action("ValidateEmployeeNumber", "Employee")%>'
                });
            }
        }
        </script>


</asp:Content>

The controller used here is as follows;

   [HttpPost]
    [Authorize(Roles = "Administrator, ManagerAccounts, ManagerIT")]
    public string ValidateEmployeeNumber(string companyId, string employeeNumber, string employeeId = null)
    {
        var cid = 0;
        var flag = int.TryParse(companyId, out cid);
        if (!flag)
        {
            return string.Empty;
        }

        var eid = 0;
        if (employeeId != null)
        {
            flag = int.TryParse(employeeId, out eid);
            if (!flag)
            {
                return string.Empty;
            }
        }

        if (Employee.ValidateEmployeeNumberFormat(employeeNumber) == false)
        {
            return "Invalid format";
        }

        var employeeNumberExists = Employee.GetEmployeeByEmployeeNumber(cid, employeeNumber, eid);
        return employeeNumberExists ? "Invalid Employee Number already in use." : string.Empty;
    }

This page itself has been edited to show the bits I am interested in.
The page is to enable the administrator to edit the profile of the employee, including the employee number.
The Ajax call to the server is to check whether the employee number is unique.
Now on my developer machine this works on all servers; development, test and production. But for some people working on other machines it does not work. When they try to edit the employee number on the production server, they suddenly get lots of red text of javascript appear immediately after the AJAX call.
Why does this happen and how can this fixed?

Answer 1

I found the answer.
The problem was caused by the authorise attribute on the controller method. This attribute excluded some users and when they used the Ajax service, they got this error. I have to say that the sympton of the problem, lots of javascript text in red displayed on the screen, did not give anything away as to what the problem couls have been.