issue when check Resignation requester model properties values it display as null

Question

I work on asp.net MVC application . I face issue I can't pass model ResignationRequester properties values to Approve Index action when click approve button .

all properties as Request no and employee no load when details page load then I write

comment SpeakStuffComment then click approve button to save SpeakStuffComment based on request no .

approve button exist on details page so before click approve button submit

I write comments that I need to save it based on request no then click approve button

so How to pass model ResignationRequester to Approve Index action when click approve button

@model HR.WorkforceRequisition.Models.ResignationRequester

@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_LayoutResignation.cshtml";
}

<div style="padding-top:10px;">

    @if (!string.IsNullOrEmpty(ViewBag.msg))
    {
        <div class="alert alert-success">
            @ViewBag.msg
        </div>
    }
   
    @if (ViewBag.AllowApprove == true)
    {
        
        using (Html.BeginForm("ApprovalIndex", "Resignation", new { id = Model.RequestNo }, FormMethod.Post, htmlAttributes: new { @style = "display:inline;" }))
        {
            @Html.AntiForgeryToken()

            <a onclick = "$(this).parents('form:first').submit();" class="btn btn-primary" style="min-width: 100px; 
margin-left: 5px;"><i class="glyphicon glyphicon-ok"></i> Approve </a>
        }
       


    }
    <table style="border: 1px solid black;width:100%;">   
        <tr>
            
            <td class="hover" style="font-weight: bold; padding-top: 10px;">
                <div class="form-group hover">
                    @Html.LabelFor(model => model.RequestNo, htmlAttributes: new { @class = "control-label col-md-5" })
                    <div class="col-md-7">
                        @Model.RequestNo
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="hover" style="width: 50%; font-weight: bold; padding-top: 10px;">
                @Html.LabelFor(model => model.EmpName, htmlAttributes: new { @class = "control-label col-md-5" })
                <div class="col-md-7">
                    @Model.EmpName
                </div>
            </td>
            <td class="hover" style="font-weight: bold; padding-top: 10px;">
                @Html.LabelFor(model => model.EmpID, htmlAttributes: new { @class = "control-label col-md-5" })
                <div class="col-md-7">
                    @Model.EmpID
                </div>
               
            </td>
        </tr>

    </table>
    <table style="border: 1px solid black;width:100%;">

        <tr>   
            <td class="hover" style="font-weight: bold; padding-top: 10px;">
                <div class="form-group hover">
                    @Html.Label("If yes, why did the staff resign? If No, Why? ", htmlAttributes: new { @class = "control-label col-md-5" })
                    <div class="col-md-7">
                        @Html.EditorFor(model => model.SpeakStuffComment, new
                        {
                            htmlAttributes = new
               { @class = "form-control" }
                        })
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>


    public class ResignationRequester
    {
        [Display(Name = "Employee No : ")]
        [Required,]
        public int EmpID { get; set; }

        [Display(Name = "Request No")]
        public int RequestNo { get; set; }

        [Required]
        [Display(Name = "Emp. Name: ")]
        public string EmpName { get; set; }


        [DataType(DataType.MultilineText)]
        public string SpeakStuffComment { get; set; }

       


    }

}
public class ResignationController : Controller
    {
[HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<ActionResult> ApprovalIndex(int id)
        {
             return new EmptyResult();
       }
}

I try make some changes to code above as below but issue all properties values as SpeakStuffComment and Request no show null so

How to solve issue please ?

[HttpPost]
            [ValidateAntiForgeryToken]
            public async Task<ActionResult> ApprovalIndex(ResignationRequester REQ)
            {
                 return new EmptyResult();
           }
  using (Html.BeginForm("ApprovalIndex", "Resignation", FormMethod.Post, htmlAttributes: new { @style = "display:inline;" }))
            {
                @Html.AntiForgeryToken()
    
                <a onclick = "$(this).parents('form:first').submit();" class="btn btn-primary" style="min-width: 100px; 
    margin-left: 5px;"><i class="glyphicon glyphicon-ok"></i> Approve </a>
            }

from debug break point cached I check properties value of model Resignation Requester it show it null to all properties values.

so what is issue and How to solve it .

Answer 1

There is a curse on ,my workbooks called a policy first the devices then the browser now my Excel work books I am my organization have the gall to claim these are my policy's not warned no input on this so called policy this cost me

Answer 2

Hi @Ahmed Abd El Aziz,

Only the input from the form will be sent to the server, and your table is not placed in the form you are submitting, so your data is empty.

If you don't want to use an input field, I think you could get the <div> containing the field id in JS and then submit the form using AJAX. example:

<div style="padding-top:10px;">

    @if (!string.IsNullOrEmpty(ViewBag.msg))
    {
        <div class="alert alert-success">
            @ViewBag.msg
        </div>
    }

    @if (ViewBag.AllowApprove == true)
    {

        using (Html.BeginForm("ApprovalIndex", "Resignation", new { id = Model.RequestNo }, FormMethod.Post, htmlAttributes: new { @style = "display:inline;" }))
        {
            <a onclick="submit();" class="btn btn-primary" style="min-width: 100px;
margin-left: 5px;"><i class="glyphicon glyphicon-ok"></i> Approve </a>

        }

    }
    <table style="border: 1px solid black;width:100%;">
        <tr>

            <td class="hover" style="font-weight: bold; padding-top: 10px;">
                <div class="form-group hover">
                    @Html.LabelFor(model => model.RequestNo, htmlAttributes: new { @class = "control-label col-md-5" })
                    <div class="col-md-7" id="RequestNo">
                        @Model.RequestNo
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="hover" style="width: 50%; font-weight: bold; padding-top: 10px;">
                @Html.LabelFor(model => model.EmpName, htmlAttributes: new { @class = "control-label col-md-5" })
                <div class="col-md-7" id="EmpName">
                    @Model.EmpName
                </div>
            </td>
            <td class="hover" style="font-weight: bold; padding-top: 10px;">
                @Html.LabelFor(model => model.EmpID, htmlAttributes: new { @class = "control-label col-md-5" })
                <div class="col-md-7" id="EmpID">
                    @Model.EmpID
                </div>

            </td>
        </tr>

    </table>
    <table style="border: 1px solid black;width:100%;">

        <tr>
            <td class="hover" style="font-weight: bold; padding-top: 10px;">
                <div class="form-group hover">
                    @Html.Label("If yes, why did the staff resign? If No, Why? ", htmlAttributes: new { @class = "control-label col-md-5" })
                    <div class="col-md-7">
                        @Html.EditorFor(model => model.SpeakStuffComment, new
                   {
                       htmlAttributes = new
                       { @class = "form-control" },
                            id = "SpeakStuffComment"

                   })
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        function submit() {         
            var ResignationRequester = new Object();
            ResignationRequester.RequestNo = document.getElementById("RequestNo").innerHTML.trim();
            ResignationRequester.EmpName = document.getElementById("EmpName").innerHTML.trim();
            ResignationRequester.EmpID = document.getElementById("EmpID").innerHTML.trim();
            ResignationRequester.SpeakStuffComment = document.getElementById("SpeakStuffComment").textContent;

            if (ResignationRequester != null) {
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("ApprovalIndex", "Resignation")',
                    data: JSON.stringify(ResignationRequester),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        console.log(response);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            }
        }
    </script>
</div>

 [HttpPost]      
 public async Task<ActionResult> ApprovalIndex(ResignationRequester REQ)
 {
     return new EmptyResult();
 }

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.