dynamic saving form

  public async Task<IActionResult> Create()

        {

            init();

            ViewData["DefaultBranch"] = defaultBranch;

            return View();

        }


        [HttpPost]

        public async Task<IActionResult> Create(Memo memo, List<EmployeeDetail>  employeeDetails, List<KeyDetail>  keyDetail)

        {

            try

            {

                if (!OIverification())

                {

                    return RedirectToAction("Index");

                }

                else

                {


                    memo.CreatedDate = DateTime.Now;

                    memo.CreatedBy = _httpContextAccessor.HttpContext.Session.GetString("ActiveDirectoryUserID");

                    await _unitOfWork.MemoRepo.Insert(memo);

                    await _unitOfWork.SaveAsync();

                    var memoid = memo.ID;

                    foreach (var item in employeeDetails)

                    {

                        item.MemoID = memoid;

                        item.CreatedBy = _httpContextAccessor.HttpContext.Session.GetString("ActiveDirectoryUserID");

                        item.CreatedDate = DateTime.Now;

                        await _unitOfWork.EmployeeDetailRepo.Insert(item);

                    }

                    foreach (var key in keyDetail)

                    {

                        key.MemoID = memoid;

                        key.CreatedBy = _httpContextAccessor.HttpContext.Session.GetString("ActiveDirectoryUserID");

                        key.CreatedDate = DateTime.Now;

                        await _unitOfWork.KeyDetailsRepo.Insert(key);



                    }

                    await _unitOfWork.SaveAsync();

                    return Ok(new { result = "saved" });

                }

            }

            catch (Exception ex)

            {


                throw new Exception(ex.Message);

            }

        }


--------------------------------------------------------------------------------

view


@model Domain.Entities.Memo

@using Microsoft.AspNetCore.Http;

@inject IHttpContextAccessor httpContextAccessor;

@{


    var defaultBranch = ViewData["DefaultBranch"] as Branch;

}


<div class="row">

    <div class="box box-danger">

        <div class="box-header with-border">

            <span class="pull-left" style="font-size:20px">

                Memo For Vault - @defaultBranch.BranchCode @defaultBranch.BranchName

            </span>

            <span class="pull-right" style="font-size:20px">

                @System.DateTime.Now.ToString("dd MMM yyyy")

            </span>

        </div>


    <div class="box-body">

        <div class="col-sm-12">

            <form asp-action="Create" class="form-inline">

                <div asp-validation-summary="ModelOnly" class="text-danger"></div>

                <fieldset id="fieldset_EmpToPanel">

                    <legend>Employee to Panel</legend>

                    <div class="row">

                        <div class="col-sm-4">

                            <label for="ddl_Panels" class="col-sm-4 control-label">Panel Types</label>

                            <div class="col-sm-6">

                                <select id="ddl_Panels" class="form-control">

                                </select>

                            </div>

                        </div>

                        <div class="col-sm-4">

                            <label for="dll_Employees" class="col-sm-4 control-label">Employees List</label>

                            <div class="col-sm-6">

                                <select id="dll_Employees" class="form-control">

                                </select>

                            </div>

                        </div>

                        <div class="col-sm-2">

                            <label for="ddl_IsPrimary" class="col-sm-4 control-label">Is Primary</label>

                            <div class="col-sm-1">

                                <select id="ddl_IsPrimary" class="form-control">

                                    <option value="">-- SELECT --</option>

                                    <option value=true>Yes</option>

                                    <option value=false>No</option>

                                </select>

                            </div>

                        </div>

                        <div class="col-sm-2">

                            <a id="btn_EmpToPanel" href="javascript:void(0)" class="btn btn-warning">

                                Add <i class="fa fa-plus"></i>

                            </a>

                        </div>

                    </div>

                    <hr />

                    <div class="row">

                        <table id="tbl_EmpToPanel" class="table table-condensed table-striped table-bordered">

                            <caption>Assign Employee to Panel</caption>

                            <thead>

                                <tr>

                                    <th class="tbl_EmpToPanel_Index">Sn</th>

                                    <th>Panel</th>

                                    <th>Employee</th>

                                    <th>Is Primary Key Holder</th>

                                    <th>Action</th>

                                </tr>

                            </thead>

                            <tbody>

                            </tbody>

                        </table>

                    </div>

                </fieldset>

                <fieldset>

                    <legend>Panel to Keys</legend>

                    <div class="row">

                        <div class="col-sm-4">

                            <label for="ddl_KeyPanels" class="col-sm-4 control-label">Panel Types</label>

                            <div class="col-sm-6">

                                <select id="ddl_KeyPanels" class="form-control">

                                </select>

                            </div>

                        </div>

                        <div class="col-sm-4">

                            <label for="dll_Vault" class="col-sm-4 control-label">Vault</label>

                            <div class="col-sm-6">

                                <select id="dll_Vault" class="form-control">

                                </select>

                            </div>

                        </div>

                        <div class="col-md-4">

                            <label for="dll_HasSpareKey" class="col-sm-4 control-label">HasSpareKey</label>

                            <div class="col-sm-6">

                                <select id="dll_HasSpareKey" class="form-control">

                                    <option value="">-- SELECT --</option>

                                    <option value=true>Yes</option>

                                    <option value=false>No</option>

                                </select>

                            </div>

                        </div>

                    </div>

                    <p></p>

                    <div class="row">

                        <div class="col-md-4">

                            <label for="text_KeyDetails" class="col-sm-4 control-label">KeyDetails</label>

                            <div class="col-sm-6">

                                <input type=text id="text_KeyDetails" class="form-control" />

                            </div>

                        </div>

                        <div class="col-sm-2">

                            <a id="btn_KeyToPanel" href="javascript:void(0)" class="btn btn-warning">

                                Add <i class="fa fa-plus"></i>

                            </a>

                        </div>

                    </div>

                    <table id="tbl_KeyToPanel" class="table table-condensed table-striped table-bordered">

                        <caption>Assign Keys to Panel</caption>

                        <thead>

                            <tr>

                                <th>S.No</th>

                                <th>Vault</th>

                                <th>Panel</th>

                                <th>KeyDetail</th>

                                <th>HasSpareKey</th>

                                <th>Action</th>

                            </tr>

                        </thead>


                        <tbody>

                        </tbody>

                    </table>

                </fieldset>


                <div class="form-group">

                    <input id="btn_SendForApproval" value="Send for Approval" class="btn btn-primary pull-right" />

                </div>

            </form>

        </div>

            </div>

    </div>

</div>


<div>

    <a asp-action="Index">Back to List</a>

</div>


@section Scripts

{

<script src='@Url.Content("~/Scripts/Memo/MemoCreate-AjaxAndSave.js")'></script>

<script src='@Url.Content("~/Scripts/Memo/MemoCreate-Employee.js")'></script>

<script src='@Url.Content("~/Scripts/Memo/MemoCreate-KeyDetail.js")'></script>

<script type="text/javascript">

    const urlPanels = '@Url.Action("AjaxPanels","Memos")';

    const urlBranchUsers = '@Url.Action("AjaxGetBranchUsers","Memos")';

    const urlKeyDetails = '@Url.Action("AjaxKeyDetail","Memos")';

    const urlVault = '@Url.Action("AjaxVault","Memos")'

    const urlSave = '@Url.Action("Create","Memos")'

    const urlRedirect = '@Url.Action("Index","Memos")'


    const memoDate = '@System.DateTime.Now.ToString("dd MMM yyyy")';

    const defaultBranch = '@defaultBranch.BranchCode';

    const currentUser = '@httpContextAccessor.HttpContext.Session.GetString("ActiveDirectoryUserID")';


    let jsonMemo = {

        ID: null,

        MemoDate: memoDate,

        BranchCode: defaultBranch,

        IsActive: false,

        CreatedBy: "",

        CreatedDate: "",

        ReviewedBy: null,

        ReviewedDate: null,

        ApprovedBy: null,

        ApprovedDate: null

    };

        $(document).ready(function () {

            objLitSaveMemo.init();

            objLitEmployees.init();

            objLitKeyDetails.init();

        });

</script>

}


-------------------------------------------

----------------


let panelList;

let branchUserList;

let vaultTypes;


const objLitSaveMemo = {

    init: function () {

        this.bindEvents();

        this.ajaxBranchUsers();

        this.ajaxVaultList();

        this.ajaxPanels();

    },

    bindEvents: function () {

        $("#btn_SendForApproval").on("click", function () {

            if (jsonKeyDetails.length == 0 || jsonEmployees.length == 0) {

                ModalAlert(`Please fill the form completely!`, 1);

                setTimeout(function () {

                    ModalAlert("", 0);

                }, 1500);

            }

            else {

                if (confirm("Are you sure the information provided is correct? If yes please press 'OK' to continue else 'CANCEL'")) {

                    objLitSaveMemo.ajaxSaveMemo(jsonMemo, jsonEmployees, jsonKeyDetails);

                }

            }

        });

    },

    ajaxPanels: function () {

        ModalAlert("Loading...", 1);

        $.ajax({

            url: urlPanels,

            type: "GET",

            dataType: 'json',

            success: function (data, textStatus, xhr) {

                panelList = data

            },

            error: function (jqXhr, textStatus, errorThrown) {

                console.log(jqXhr.responseText);

                console.log(jqXhr.textStatus);

                console.log(jqXhr.errorThrown);

            },

            complete: function () {

                $(panelList).each(function (data, value) {

                    optionPanels += `<option value=${value.id}>${value.panelType}</option>`;

                });


                $("#ddl_Panels").append(optionPanels);

                $("#ddl_KeyPanels").append(optionPanels);

                ModalAlert("Loading...", 0);

            }

        })

    },

    ajaxBranchUsers: function () {

        ModalAlert("Loading...", 1);

        $.ajax({

            url: urlBranchUsers,

            type: "GET",

            dataType: 'json',

            success: function (data, textStatus, xhr) {

                branchUserList = data

            },

            error: function (jqXhr, textStatus, errorThrown) {

                console.log(jqXhr.responseText);

                console.log(jqXhr.textStatus);

                console.log(jqXhr.errorThrown);

            },

            complete: function () {

                $(branchUserList).each(function (index, value) {

                    optionBranchUsers += `<option value=${value.activeDirectoryUserID}>${value.activeDirectoryUserID.replace("CENTURYBANK\\", "")}</option>`;

                });

                $("#dll_Employees").append(optionBranchUsers);

                ModalAlert("Loading...", 0);

            }

        })

    },

    ajaxVaultList: function () {

        ModalAlert("Loading...", 1);

        $.ajax({

            url: urlVault,

            type: "GET",

            dataType: 'json',

            success: function (data, textStatus, xhr) {

                vaultTypes = data

            },

            error: function (jqXhr, textStatus, errorThrown) {

                console.log(jqXhr.responseText);

                console.log(jqXhr.textStatus);

                console.log(jqXhr.errorThrown);

            },

            complete: function () {

                $(vaultTypes).each(function (index, value) {

                    optionVaults += `<option value=${value.id}>${value.vaultTitle}</option>`;

                });


                $("#dll_Vault").append(optionVaults);

                ModalAlert("Loading...", 0);

            }

        })

    },

    ajaxSaveMemo: function (inp_Memo, inp_jsonEmployees, inp_jsonKeyDetails) {

        console.log(`${inp_Memo}`)

        console.log(`${inp_jsonEmployees}`)

        console.log(`${inp_jsonKeyDetails}`)

        ModalAlert("Saving please wait...", 1);

        $.ajax({

            url: urlSave,

            type: "POST",

            data: {

                "memo": jsonMemo, "employeeDetails": jsonEmployees, "keyDetail": jsonKeyDetails

            },

            dataType: "json",

            success: function (data, textStatus, xhr) {

                ModalAlert("Saving please wait...", 0);

                window.location.href = urlRedirect;

            },

            error: function (jqXhr, textStatus, errorThrown) {

                console.log(jqXhr.responseText);

                console.log(jqXhr.textStatus);

                console.log(jqXhr.errorThrown);

            },

            complete: function () {


            }

        })

    }

}


--------------------------------------------------------------------------------------------

-----------------------------


let panelList;

let branchUserList;

let vaultTypes;


const objLitSaveMemo = {

    init: function () {

        this.bindEvents();

        this.ajaxBranchUsers();

        this.ajaxVaultList();

        this.ajaxPanels();

    },

    bindEvents: function () {

        $("#btn_SendForApproval").on("click", function () {

            if (jsonKeyDetails.length == 0 || jsonEmployees.length == 0) {

                ModalAlert(`Please fill the form completely!`, 1);

                setTimeout(function () {

                    ModalAlert("", 0);

                }, 1500);

            }

            else {

                if (confirm("Are you sure the information provided is correct? If yes please press 'OK' to continue else 'CANCEL'")) {

                    objLitSaveMemo.ajaxSaveMemo(jsonMemo, jsonEmployees, jsonKeyDetails);

                }

            }

        });

    },

    ajaxPanels: function () {

        ModalAlert("Loading...", 1);

        $.ajax({

            url: urlPanels,

            type: "GET",

            dataType: 'json',

            success: function (data, textStatus, xhr) {

                panelList = data

            },

            error: function (jqXhr, textStatus, errorThrown) {

                console.log(jqXhr.responseText);

                console.log(jqXhr.textStatus);

                console.log(jqXhr.errorThrown);

            },

            complete: function () {

                $(panelList).each(function (data, value) {

                    optionPanels += `<option value=${value.id}>${value.panelType}</option>`;

                });


                $("#ddl_Panels").append(optionPanels);

                $("#ddl_KeyPanels").append(optionPanels);

                ModalAlert("Loading...", 0);

            }

        })

    },

    ajaxBranchUsers: function () {

        ModalAlert("Loading...", 1);

        $.ajax({

            url: urlBranchUsers,

            type: "GET",

            dataType: 'json',

            success: function (data, textStatus, xhr) {

                branchUserList = data

            },

            error: function (jqXhr, textStatus, errorThrown) {

                console.log(jqXhr.responseText);

                console.log(jqXhr.textStatus);

                console.log(jqXhr.errorThrown);

            },

            complete: function () {

                $(branchUserList).each(function (index, value) {

                    optionBranchUsers += `<option value=${value.activeDirectoryUserID}>${value.activeDirectoryUserID.replace("CENTURYBANK\\", "")}</option>`;

                });

                $("#dll_Employees").append(optionBranchUsers);

                ModalAlert("Loading...", 0);

            }

        })

    },

    ajaxVaultList: function () {

        ModalAlert("Loading...", 1);

        $.ajax({

            url: urlVault,

            type: "GET",

            dataType: 'json',

            success: function (data, textStatus, xhr) {

                vaultTypes = data

            },

            error: function (jqXhr, textStatus, errorThrown) {

                console.log(jqXhr.responseText);

                console.log(jqXhr.textStatus);

                console.log(jqXhr.errorThrown);

            },

            complete: function () {

                $(vaultTypes).each(function (index, value) {

                    optionVaults += `<option value=${value.id}>${value.vaultTitle}</option>`;

                });


                $("#dll_Vault").append(optionVaults);

                ModalAlert("Loading...", 0);

            }

        })

    },

    ajaxSaveMemo: function (inp_Memo, inp_jsonEmployees, inp_jsonKeyDetails) {

        console.log(`${inp_Memo}`)

        console.log(`${inp_jsonEmployees}`)

        console.log(`${inp_jsonKeyDetails}`)

        ModalAlert("Saving please wait...", 1);

        $.ajax({

            url: urlSave,

            type: "POST",

            data: {

                "memo": jsonMemo, "employeeDetails": jsonEmployees, "keyDetail": jsonKeyDetails

            },

            dataType: "json",

            success: function (data, textStatus, xhr) {

                ModalAlert("Saving please wait...", 0);

                window.location.href = urlRedirect;

            },

            error: function (jqXhr, textStatus, errorThrown) {

                console.log(jqXhr.responseText);

                console.log(jqXhr.textStatus);

                console.log(jqXhr.errorThrown);

            },

            complete: function () {


            }

        })

    }

}


----------------------------------------------

-----------------------------------------------------------

//  employeetopanel

let jsonEmployees = [];


let optionPanels = '<option value="">-- SELECT --</option>';

let optionBranchUsers = '<option value="">-- SELECT --</option>';

let optionKeyDetails = '<option value="">-- SELECT --</option>';


const objLitEmployees = {


    init: function () {

        this.bindEvents();

    },

    bindEvents: function () {

        $("#btn_EmpToPanel").click(function () {

            if ($("#ddl_Panels option:selected").val() != "" && $("#dll_Employees option:selected").val() != "" && $("#ddl_IsPrimary option:selected").val()) {

                let check = jsonEmployees.find(u => { return u.UserID == $("#dll_Employees option:selected").val() })

                if (!check) {

                    jsonEmployees.push({

                        ID: null,

                        MemoID: null,

                        BranchCode: defaultBranch,

                        UserID: $("#dll_Employees option:selected").val(),

                        PanelID: $("#ddl_Panels option:selected").val(),

                        IsPrimaryCustodian: $("#ddl_IsPrimary option:selected").val(),

                        CreatedBy: currentUser,

                        CreatedDate: memoDate,

                        UpdatedBy: null,

                        UpdatedDate: null,

                        ApproveBy: null,

                        ApprovedDate: null,

                        ApprovedGroup: null,

                        IsReviewed: false,

                        ReviewedBy: null,

                        ReviewdDate: null,

                        IsApproved: false

                    });

                    let html = `

                    <tr>

                    <td style=''>`+ jsonEmployees.length + `</td>

                    <td>` + $("#ddl_Panels option:selected").text() + `</td>

                    <td class="td_EmpToPanel">` + $("#dll_Employees option:selected").text() + `</td>

                    <td>` + $("#ddl_IsPrimary option:selected").text() + `</td>

                    <td><a href='javascript:void(0)' class='btn_EmpToPanelRemove btn btn-danger'>Remove</a></td>

                    </tr>

                `

                    $("#tbl_EmpToPanel tbody").append(html)


                    objLitEmployees.resetDropdowns();

                }

                else {

                    ModalAlert("Already added in list!", 1);

                    setTimeout(function () {

                        ModalAlert("", 0);

                    }, 1500);

                }

            }

        });

        $("#tbl_EmpToPanel tbody").delegate(".btn_EmpToPanelRemove", "click", function () {

            let getUserID = $(this).closest("tr").find(".td_EmpToPanel").html();

            $(this).closest("tr").remove();

            jsonEmployees = jsonEmployees.filter(x => { return x.UserID != "CENTURYBANK\\" + getUserID });

        });

    },

    resetDropdowns: function () {

        //$("#ddl_Panels").val("");

        $("#dll_Employees").val("");

        $("#ddl_IsPrimary").val("");

        $("#dll_KeyEmployees").val("");

    }

}

------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------


//  keydetails

let jsonKeyDetails = [];

let optionVaults = '<option value="">-- SELECT --</option>';


/*forkeydetails*/


const objLitKeyDetails = {

    init: function () {

        this.bindEvents();

    },

    bindEvents: function () {

        $("#btn_KeyToPanel").click(function () {

            let panel = $("#ddl_KeyPanels option:selected").val();

            let vault = $("#dll_Vault option:selected").val();

            let spareKey = $("#dll_HasSpareKey option:selected").val();

            let keyName = $("#text_KeyDetails").val();

            if (panel != "" && vault != "" && spareKey != "" && keyName != "") {

                let check = jsonKeyDetails.find(x => { return x.PanelID == panel.toString() && x.VaultID == vault.toString() && x.IsSpareKey == spareKey.toString() && x.KeyDetail == keyName.toString() })

                if (!check) {

                    jsonKeyDetails.push({

                        ID: null,

                        MemoID: null,

                        BranchCode: defaultBranch,

                        VaultID: vault,

                        PanelID: panel,

                        KeyDetail1: keyName,

                        IsSpareKey: spareKey,

                        CreatedDate: memoDate,

                        CreatedBy: currentUser,

                        UpdatedBy: null,

                        UpdatedDate: null,

                        ApproveBy: null,

                        ApprovedDate: null,

                        ApprovedGroup: null,

                        IsReviewed: false,

                        ReviewedBy: null,

                        ReviewdDate: null,

                        IsApproved: false

                    });

                    let html = `

                    <tr>

                    <td style=''>`+ jsonKeyDetails.length + `</td>

                    <td class='td_key_panel'>` + $("#ddl_KeyPanels option:selected").text() + `</td>

                    <td class='td_key_vaut'>` + $("#dll_Vault option:selected").text() + `</td>

                    <td class='td_key_detail'>` + $("#text_KeyDetails").val() + `</td>

                    <td class='td_key_sparekey'>` + $("#dll_HasSpareKey option:selected").text() + `</td>

                    <td><a href='javascript:void(0)' class='btn_KeyToPanelRemove btn btn-danger'>Remove</a></td>

                    </tr>`

                    $("#tbl_KeyToPanel tbody").append(html);

                    objLitKeyDetails.resetForm();

                }

                else {

                    ModalAlert("Already added in list!", 1);

                    setTimeout(function () {

                        ModalAlert("", 0);

                    }, 1500);

                }

            }

        });

        $("#tbl_KeyToPanel tbody").delegate(".btn_KeyToPanelRemove ", "click", function () {

            let td_key_panel = $(this).closest("tr").find(".td_key_panel").html();

            let td_key_vaut = $(this).closest("tr").find(".td_key_vaut").html();

            let td_key_detail = $(this).closest("tr").find(".td_key_detail").html();

            let td_key_sparekey = $(this).closest("tr").find(".td_key_sparekey").html();

            $(this).closest("tr").remove();

            jsonKeyDetails = jsonKeyDetails.filter(x => { return x.PanelID != td_key_panel && x.VaultID != td_key_vaut && x.IsSpareKey != td_key_sparekey && x.KeyDetail != td_key_detail });

        });

    },

    resetForm: function () {

        $("#ddl_KeyPanels").val("");

        $("#dll_Vault").val("");

        $("#dll_HasSpareKey").val("");

        $("#text_KeyDetails").val("");

    }

}

---


Comments