Mr.Combet Webshell 🔥

View File Name : Create.cshtml

@model RER_Project.DataAccess.ViewModels.User.UserViewModel
@{
    ViewBag.Title = "User Create";
}



<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <label style="font-size: medium"><b>Create User</b></label>
                    <hr />
                    <form id="CreateUserForm" autocomplete="off">
                        <div id="eror_msg"></div>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label for="Email"><strong>Email/UserName</strong></label>
                                <input type="email" required class="required form-control" id="Email" name="Email" />
                            </div>
                            <div class="form-group col-md-6">
                                <label for="Password"><strong>Password</strong></label>
                                <input type="password" class="required form-control" id="Password" name="Password" />
                            </div>


                            <div class="form-group col-md-6">
                                <input type="hidden" name="UserId" />
                                <label for="UserName"><strong>Full Name</strong></label>
                                <input type="text" class="required form-control" id="UserName" name="UserName" />
                            </div>
                            <div class="form-group col-md-6">
                                <label for="RoleId"><strong>Role</strong></label>
                                <select class="required form-control" id="RoleId" onchange="getChangeRole(this)" name="RoleId" data-api="/roles/select"></select>
                            </div>



                            <div class="form-group col-md-6 levelInfo">
                                <label for="Level"><strong>Level</strong></label>
                                <select class=" form-control" id="Level" name="Level">
                                    <option value="">Select </option>
                                    <option value="Level1">Level 1 User</option>
                                    <option value="Level2">Level 2 User</option>
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="Level"><strong>WorkStation</strong></label>
                                <select class="required form-control" id="WorkStationId" name="WorkStationId" data-api="/work_station/select"></select>
                                @*<select class=" form-control required" id="WorkStation" name="WorkStation">
                                        <option value="">Select </option>
                                        <option value="1">PMO</option>
                                        <option value="2">Koshi Sagarmatha Corridor</option>
                                        <option value="3">Janakpur Corridor</option>
                                        <option value="4">Liaison Office</option>
                                    </select>*@
                            </div>

                            <div class="form-group col-md-6 provinceInfo">

                                <label><strong>Province</strong></label>
                                <select type="text" class="form-control required" data-placeholder="Select Province" name="ProvinceId" id="ProvinceId" data-api="/province/select/threeStates"></select>
                                @*<select  class="form-control required" data-placeholder="Select Province" name="ProvinceId" id="ProvinceId">

                                        <option value="1">Province 1</option>
                                        <option value="2">Province 2</option>
                                    </select>*@
                                <input type="hidden" id="SelectedProvinceIds" name="SelectedProvinceIds" />
                            </div>



                            <div class="form-group col-md-6 districtInfo">
                                <label><strong>District</strong></label>
                                <select type="text" class="form-control required" name="DistrictId" id="DistrictId" data-api="/districts/select" disabled=""></select>
                                <input type="hidden" id="SelectedDistrictIds" name="SelectedDistrictIds" />
                            </div>
                            @*<div class="form-group col-md-6">

                                    <label><strong>Ward No:</strong> </label>
                                    <input type="number" min="1" oninput="validity.valid||(value='');" class="required form-control" id="WardNo" name="WardNo" />
                                </div>*@


                            <div class="form-group col-md-6  commodityInfo">
                                <label><strong>Commodity </strong></label>
                                <select class="form-control" data-placeholder="Select Commodity" id="CommodityId" data-api="/commodity/select">
                                </select>
                                <input type="hidden" id="SelectedCommodityIds" name="SelectedCommodityIds" />
                                @*   <select type="text" class="form-control required" name="CommodityId" id="CommodityId" data-api="/commodity/select"></select>*@

                            </div>


                            <div class="form-group col-md-6">
                                <label for="MobileNo"><strong>Mobile No</strong></label>
                                <input class="required form-control digits" pattern="\d*" oninput="validity.valid||(value='');" step="1" type="text" maxlength="10" id="MobileNo" name="MobileNo" />
                            </div>



                            <div class="form-group col-md-2 pull-right">
                                <input type="button" value="Save" class="btn btn-primary" id="SubmitButton" /><span>&nbsp;&nbsp;</span>
                                <a href="/users" class="btn btn-default">Back</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@*<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>*@
<link href="~/Content/select2.min.css" rel="stylesheet" />
<script src="~/Content/select2.min.js"></script>
<script>




    $(document).ready(function () {


        var commodityId = $('#CommodityId');

        var provinceId = $('#ProvinceId');

        $(commodityId).select2({
            multiple: true,
            allowClear: true,
        }).change(function () {
            var selectedIDs = $.map($(commodityId).select2('data'), function (val, i) {
                return val.id;
            }).join(",");
            console.log(selectedIDs);
            $('#SelectedCommodityIds').val(selectedIDs);
        });



        window.initializeSelectApis();
        window.initializeCascadeLocation();


        $('.provinceInfo').hide();
        $("#ProvinceId").removeClass("required");

        $('.districtInfo').hide();
        $("#DistrictId").removeClass("required");


        $('.commodityInfo').hide();
        $("#CommodityId").removeClass("required");

        //$('.levelInfo').hide();
        //$("#Level").removeClass("required");
    })



    $("#SubmitButton").off("click").on("click", function () {

        function request(model) {
            const url = "/users/create";
            const data = JSON.stringify(model);
            return window.getAjaxRequest(url, "POST", data);
        }

        const form = $("#CreateUserForm");

        var datas = window.serializeForm(form);

        $.validator.unobtrusive.parse(form);

        if (!form.valid()) {
            return false;
        };

        if (!window.confirmAction()) {
            return;
        };

        WorkForce.loader.show();

        function getModel() {
            return ({
                User: window.serializeForm(form)
            });
        }
        //const model = window.serializeForm(form);
        const model = getModel();
        const ajax = request(model);

        ajax.done(function (response) {
            WorkForce.loader.hide();
            showNotification("success");
            window.location = "/users";
        });

        ajax.fail(function (xhr) {
            WorkForce.loader.hide();
            ShowMessage("error", xhr.responseText);
        });
    })


    function getChangeRole(data) {



       var provinceId = $('#ProvinceId')

        $('#ProvinceId').val([]);

        $('#SelectedProvinceIds').val("");

        $('#ProvinceId').trigger("change");

        if (['1', '15', '16', '17'].includes(data.value)) {
         //  if (data.value === '1' || data.value === '4' || data.value === '15' || data.value === '16' || data.value === '19' || data.value === '18' ) {
            $("#Level").removeClass("required");
            $('.levelInfo').show();


            $("#ProvinceId").removeClass("required");
            $('.provinceInfo').hide();

            $("#DistrictId").removeClass("required");
            $('.districtInfo').hide();

            $(provinceId).select2({
                multiple: false,
                allowClear: true,
            }).change(function () {
                var selectedIDs = $.map($(provinceId).select2('data'), function (val, i) {
                    return val.id;
                }).join(",");
                $('#SelectedProvinceIds').val(selectedIDs);
            })
        }
        else if (['13', '14'].includes(data.value)) {
       //      if (data.value === '3' || data.value == '9' || data.value == '20') {  //If role is EDF , Mrc , and Mne Officer

            $("#ProvinceId").addClass("required");
            $('.provinceInfo').show();

            $("#DistrictId").addClass("required");
            $('.districtInfo').show();

            $("#Level").removeClass("required");
            $('.levelInfo').show();

            $(provinceId).select2({
                multiple: false,
                allowClear: true,
            }).change(function () {
                var selectedIDs = $.map($(provinceId).select2('data'), function (val, i) {
                    return val.id;
                }).join(",");
                $('#SelectedProvinceIds').val(selectedIDs);
            })
        }
       @* else if (['5', '6', '7', '10', '11', '20'].includes(data.value)) {
       // else if (data.value === '5' || data.value === '6' || data.value === '7'  || data.value === '10' || data.value === '11') {
            //If Role is HCC, PICC, CICC , MRC, MRC MIDS, Financial Inclusion Officer
            $("#ProvinceId").addClass("required");
            $('.provinceInfo').show();

            $("#DistrictId").removeClass("required");
            $('.districtInfo').hide();

            $("#Level").removeClass("required");
            $('.levelInfo').show();

            $(provinceId).select2({
                multiple: false,
                allowClear: true,
            }).change(function () {
                var selectedIDs = $.map($(provinceId).select2('data'), function (val, i) {
                    return val.id;
                }).join(",");
                $('#SelectedProvinceIds').val(selectedIDs);
            })

        }
        else if (data.value === '8') {
            $("#ProvinceId").removeClass("required");
            $('.provinceInfo').hide();

            $("#DistrictId").removeClass("required");
            $('.districtInfo').hide();

           $("#Level").removeClass("required");
            $('.levelInfo').show();
        }*@

        @*if (data.value === '12' || data.value === '14') {


            $("#Level").removeClass("required");
            $('.levelInfo').show();


            $("#ProvinceId").addClass("required");
            $('.provinceInfo').show();

            $("#DistrictId").addClass("required");
            $('.districtInfo').show();


            $('.commodityInfo').show();
            $("#CommodityId").addClass("required");


            $(provinceId).select2({
                multiple: true,
                allowClear: true,
            }).change(function () {
                var selectedIDs = $.map($(provinceId).select2('data'), function (val, i) {
                    return val.id;
                }).join(",");
                $('#SelectedProvinceIds').val(selectedIDs);
            });

            var districtId = $('#DistrictId');

             $(districtId).select2({
                multiple: true,
                allowClear: true,
            }).change(function () {
                var selectedIDs = $.map($(districtId).select2('data'), function (val, i) {
                    return val.id;
                }).join(",");
                $('#SelectedDistrictIds').val(selectedIDs);
            });

        }
        else {
            $('.commodityInfo').hide();
            $("#CommodityId").removeClass("required");
        }*@

    }

    function clearData() {
        document.getElementById('DistrictId').value = 0;
        document.getElementById('CommodityId').value = 0;
    }
</script>


<style>
    .select2-search__field {
        width: 115px !important;
    }
</style>