MVC - JSON - Fix issue where function in Controller is not called

Watch This example on YouTube


to fix it replace

function LoadUsers() {
            var users = {};
            users.url = '@Url.Action("GetUserList", "Home")';
            users.type = 'POST';
            users.dataType = 'json';
            users.contentType = 'application/json';
            users.success = function (Users) {
                if (Users.length > 0) {
                    $('#UserList').append('<table>');
                    $('#UserList').append('<tr><th>First Name</th><th>Last Name</th><th></th><th></th></tr>');
                    $.each(Users, function (i, User) {
                        $('#UserList').append('<tr><td class="FirstName">'
                            + User.UserFirstName + '</td><td class="LastName">'
                            + User.UserLastName + '</td><td><input type="hidden" id="hid" value="'
                            + User.UserID + '" /> <input type="submit" value="EDIT" name="btn" id="btnEdit" onclick="EditUser(this);"</td><td><a href="#" id="btnDelete" onclick="DeleteUser(this);">DELETE</a></td></tr>');

                    });

                    $('#UserList').append('</table>');
                }
            };
         
        }

with

function LoadUsers() {
            var users = {};
            users.url = '@Url.Action("GetUserList", "Home")';
            users.type = 'POST';
            users.dataType = 'json';
            users.contentType = 'application/json';
            users.success = function (Users) {
                if (Users.length > 0) {
                    $('#UserList').append('<table>');
                    $('#UserList').append('<tr><th>First Name</th><th>Last Name</th><th></th><th></th></tr>');
                    $.each(Users, function (i, User) {
                        $('#UserList').append('<tr><td class="FirstName">'
                            + User.UserFirstName + '</td><td class="LastName">'
                            + User.UserLastName + '</td><td><input type="hidden" id="hid" value="'
                            + User.UserID + '" /> <input type="submit" value="EDIT" name="btn" id="btnEdit" onclick="EditUser(this);"</td><td><a href="#" id="btnDelete" onclick="DeleteUser(this);">DELETE</a></td></tr>');

                    });

                    $('#UserList').append('</table>');
                }
            };
            $.ajax(users);
        }