Untitled

@model MVCProject.Models.User

@{
    ViewBag.Title = "AddManager";
}
<!DOCTYPE html>

<html>
<head>
    <meta name="AddManager" content="width=device-width" />
    <title>AddManager</title>

    <script src="~/Scripts/jquery-3.1.1.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
</head>

<body>
    <div class="jumbotron">
        <div class="row">
            <h2>Add Manager:</h2>
            <div class="col-md-4">
                <form id="frmSearchUser">
                    <div class="form-group">
                        <label>Customer's Username:</label>
                        @Html.TextBoxFor(x => x.Username, new { type = "text",name= "Username", @class = "form-control", id = "Username", placeholder = "Customer's Username", required = "required", maxlength = "50" })
                        <div> @Html.ValidationMessageFor(x => x.Username, null, new { @class = "text-danger" })</div>
                    </div>
                    <input type="button" class="btn btn-success" onclick="search()" value="Search" id="SearchButton">
                </form>
            </div>
        </div>
        <h3>Customers Found:</h3>
        <div id="status"></div>
        <style type="text/css">
            strong {
                font-weight: bold;
            }

            em {
                font-style: italic;
            }

            table {
                background: #f5f5f5;
                border-collapse: separate;
                box-shadow: inset 0 1px 0 #fff;
                font-size: 12px;
                line-height: 24px;
                margin: 30px auto;
                text-align: left;
                width: 800px;
            }

            th {
                background: linear-gradient(#777, #444);
                border-left: 1px solid #555;
                border-right: 1px solid #777;
                border-top: 1px solid #555;
                border-bottom: 1px solid #333;
                box-shadow: inset 0 1px 0 #999;
                color: #fff;
                font-weight: bold;
                padding: 10px 15px;
                position: relative;
                text-shadow: 0 1px 0 #000;
            }

                th:after {
                    background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
                    content: '';
                    display: block;
                    height: 25%;
                    left: 0;
                    margin: 1px 0 0 0;
                    position: absolute;
                    top: 25%;
                    width: 100%;
                }

                th:first-child {
                    border-left: 1px solid #777;
                    box-shadow: inset 1px 1px 0 #999;
                }

                th:last-child {
                    box-shadow: inset -1px 1px 0 #999;
                }

            td {
                border-right: 1px solid #fff;
                border-left: 1px solid #e8e8e8;
                border-top: 1px solid #fff;
                border-bottom: 1px solid #e8e8e8;
                padding: 10px 15px;
                position: relative;
                transition: all 300ms;
            }

                td:first-child {
                    box-shadow: inset 1px 0 0 #fff;
                }

                td:last-child {
                    border-right: 1px solid #e8e8e8;
                    box-shadow: inset -1px 0 0 #fff;
                }

            tr:last-of-type td {
                box-shadow: inset 0 -1px 0 #fff;
            }

                tr:last-of-type td:first-child {
                    box-shadow: inset 1px -1px 0 #fff;
                }

                tr:last-of-type td:last-child {
                    box-shadow: inset -1px -1px 0 #fff;
                }

            tbody:hover td {
                color: transparent;
                text-shadow: 0 0 3px #aaa;
            }

            tbody:hover tr:hover td {
                color: #444;
                text-shadow: 0 1px 0 #fff;
            }
        </style>
        <table id="UsersTable" class="tg">
            <tr>
                <th class="tg-sl89">Customer ID</th>
                <th class="tg-sl89">Username</th>
                <th class="tg-sl89"></th>
            </tr>
        </table>

        <script language="javascript">

            function search()
            {
                $("#status").text("Loading...");
                var un = $("#Username").val();
                $.get("GetUsersByJSON", { un }, FillTable);
            }

            function FillTable(Users)
            {
                $("#UsersTable").find("tr:gt(0)").remove();
                var table = $("#UsersTable");
                for(i=0;i<Users.length;i++)
                {
                    var row =
                        "<tr><td>" + Users[i].CID + "</td>" +
                        "<td>" + Users[i].Username + "</td>" +
                        "<td><input type='button' class='btn btn-success' onclick='SendData(" + Users[i].CID + ")' value='Make Manager'>"
                +"</td></tr>";

                table.append(row);
                }
                $("#status").text("");
                $('#SearchButton').attr("disabled", false);
            }

            function SendData(frm)
            {
                $('#SearchButton').attr("disabled", true);
                $("#status").text("Adding...");
                $.post("SubmitUser", { id: frm }, success);
            }

            function success()
            {
                $("#status").text("User is now admin");
                $("#Username").val("");
                $('#SearchButton').attr("disabled", false);
            }
        </script>
    </div>
</body>
</html>