Backend-Api/ServiceHost/Areas/Client/Pages/Company/Checkouts/CustomSet.cshtml

@model CompanyManagment.App.Contracts.Checkout.CheckoutViewModel
@{
    <style>

        .modal-dialog {
            width: 40%;
            margin: 100px auto;
        }
        .st .select2-container {
            width: 100% !important;
            display: inline-block !important;
        }

        .modal .modal-dialog .modal-content{
            min-height: auto !important;
            height: auto !important;
        }

        .select2-container {
            width: 100% !important;
        }

        .modal-footer {
            border-top: unset !important;
        }

        .modal-header {
            border-bottom: unset;
        }

        .modal-body {
            padding-top: 0px !important;
        }

        .close {
            float: right !important;
            margin-right: -20px;
        }

        .modal .modal-dialog .modal-content .modal-footer {
            padding-top: unset !important;
        }

        p {
            direction: ltr !important;
            text-align: right !important;
        }

        input[type=radio]:hover {
            cursor: pointer;
        }

        .error {
            font-size: 14px !important;
        }
        .topTable {
            border-bottom: 1px solid;
            height: 28px;
            width: 100%;
            border-radius: 7px 7px 0px 0px;
            background-color: #000000;
            color: #fff;
            z-index: 2;
            position: relative;
            border-bottom: 1px solid #000;
            padding-top: 3px;
            display: flex;
        }
        .topRightTable {
            text-align: center;
            font-size: 13px;
            display: inline-block;
            width: 50%;
            border-left: 2px solid #aba9a9;    
        }
        .topLeftTable {
            text-align: center;
            font-size: 13px;
            display: inline-block;
            width: 50%;        
        }

        @@media (max-width: 1000px) {
            .modal-dialog {
                width: 60%;
            }
        }

        @@media (max-width: 768px) {
            .modal-dialog {
                width: 80%;
            }
        }

        @@media (max-width: 400px) {
            .modal-dialog {
                width: 95%;
            }
        }
    </style>
}
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span style="font-size: 24px">×</span></button>
</div>
    <form asp-page="./Index" asp-page-handler="CustomSet" autocomplete="off"
          method="post"
          data-ajax="true"
          data-callback=""
          data-action="CustomSet">
        <div class="modal-body">
            <div class="row">
                <fieldset style="border: 1px solid black !important;-webkit-print-color-adjust: exact; border-radius: 10px 10px 10px 10px;  margin: 20px 10px;">
                    <table style="table-layout: fixed; width: 100%">
                        <div class="topTable">                          
                            <span class="topRightTable"> @Model.EmployeeFullName </span>
                            <span class="topLeftTable">  <span>@Model.Month </span>&nbsp;<span>@Model.Year</span> </span>
                        </div>
                        <tr style="border-bottom: 1px solid; background-color: #e1e1e1 !important; height: 18px;-webkit-print-color-adjust: exact; ">                      
                            <th style="color: black;padding: 5px;width: 25%; text-align: center; border-left: 1px solid #000; font-size: 12px; background-color: #b0ffa2"> مطالبات </th>
                            <th style="color: black;padding: 5px;width: 25%; text-align: center; border-left: 2px solid #000; font-size: 12px; background-color: #b0ffa2"> مبلغ(ریال) </th>
                            <th style="color: black;padding: 5px;width: 25%; text-align: center; border-left: 1px solid #000; font-size: 12px; background-color: #ff9a9a"> کسورات </th>
                            <th style="color: black;padding: 5px;width: 25%; text-align: center; font-size: 12px; background-color: #ff9a9a"> مبلغ(ریال) </th>
                        </tr>
                        <tr style="font-size: 12px; ">                       
                            <td style="padding-right: 8px; border-left: 1px solid #000;"> پاداش </td>
                            <td style="text-align: center; border-left: 2px solid #000;">
                                <input dir="ltr" type="text" id="amount"  asp-for="RewardPay" style="text-align: center; width: 100%;" placeholder="مبلغ قرارداد" class="form-control" />  
                            </td>
                            <td style="padding-right: 8px; border-left: 1px solid #000;"> مساعده</td>
                            <td style="text-align: center;">
                                    <input dir="ltr" type="text" id="obligation" asp-for="SalaryAidDeduction" style="text-align: center; width: 100%;" placeholder="وجه التزام" class="form-control" />                            
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </div>
        </div>
        <input type="hidden" asp-for="Id" value="@Model.Id" />
        <div class="modal-footer m-b-10">
            <button type="button" class="btn btn-default btn-rounded waves-effect waves-light pull-left m-b-5" id="closing" data-dismiss="modal">بستن</button>
            <button id="sendData" type="submit" class="btn btn-success btn-rounded waves-effect waves-light pull-left">ذخیره</button>
        </div>
    </form>
    <script src="~/AdminTheme/js/numeral.min.js"></script>
<script>
    $(document).ready(function() {
        $('#amount').on('input', function () {
            this.value = this.value.replace(/[^\d]/, '');
            var contractAmount = $("#amount");
            //setting format
            numeral.defaultFormat("0,0 تومان");
            contractAmount.on("keyup", function(e) {
                contractAmount.val(numeral(contractAmount.val()).format());
            });
        });
        $('#obligation').on('input', function () {
            this.value = this.value.replace(/[^\d]/, '');
            var obligation = $("#obligation");
            //setting format
            numeral.defaultFormat("0,0 تومان");
            obligation.on("keyup", function(e) {
                obligation.val(numeral(obligation.val()).format());
            });
        });
    });
</script>