How do I Pass the CheckBox Input From Razor View to the Controller

abiodunajai 371 Reputation points
2022-11-17T21:41:14.413+00:00

Please I have a concern/challenge with passing the Checkbox input from Razor View to Controller. The Form was created and everything works well with the checkbox parameter passed to the Controller.

The challenge occurs when the form data was to be Edited, the "EDIT" button is clicked and the system loads the data from the Database Table [HPTTGET] into the Model. However, Returning the Data to the Database Table [HTTPOST] to UPDATE the changes, the user clicks the "Save Changes: button then it was discovered that the Checkbox input was returning NULL to the Controller from the Razor View. Please check the code for me. What am I doing wrongly?

Model

     public class Underwriting_PolicyFile  
            {  
                public decimal? NAICOMLevyPercentage { get; set; }  
                public decimal? OverridenCommissionPercentage { get; set; }  
                public bool HasOverridenCommission { get; set; }  
                public bool HasNaicomIssLevy { get; set; }  
        }  

Controller

     [HttpGet]  
            public ActionResult EditClientPolicySchedule(string id, string actionType, string transCode)  
            {  

                //Get the Created policy Schedule details for display   
                var entityToEdit = _underwritingService.GetClientPolicySchedule(id, transCode);  

         if (actionType == "Done")  
                {  
                    ViewBag.ActionType = actionType;  
                    ViewBag.OperationName = "Done";  
                    ViewBag.TransCode =transCode;  
                }  

                else if (actionType == "Save Changes")  
                {  
                    ViewBag.ScheduleDetailState = "N";  
                    ViewBag.ActionType = actionType;  
                    ViewBag.TransCode = transCode;  
                    ViewBag.HasNaicomIssLevy = entityToEdit.Underwriting_PolicyFile.HasNaicomIssLevy;  
                    ViewBag.HasOverridenCommission = entityToEdit.Underwriting_PolicyFile.HasOverridenCommission;  

                }  

         }  

        [HttpPost]  
            public ActionResult EditClientPolicySchedule(ClientPolicyViewModel model,  bool? hasIssLevy, bool? hasORC, bool? hasNaicomIssLevy, bool? hasOverridenCommission)  
            {  
                ViewBag.OperationName = operationName;  
                ViewBag.ActionType = actionType;  
                ViewBag.LastScheduleID = model.Underwriting_PolicyFile.PolicyCode;  
                ViewBag.PostTo = "EditClientPolicySchedule";  
                ViewBag.TransCode = transCode;  
                ViewBag.HasNaicomIssLevy = hasNaicomIssLevy;  
                ViewBag.HasOverridenCommission = hasOverridenCommission;  

                return RedirectToAction("EditClientPolicySchedule", new { id = model.Underwriting_PolicyFile.PolicyRefCode});  
              }  

Razor View

<div style="display:inline-block; font-style: italic; padding-left:175px ">  
                            <span class="label label-danger ">*For Special Risk Only**</span>  
                        </div>  
                        <br/>  
                        <div style="display:inline-block;padding-left:78px;">   
                            @Html.LabelFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, "ORC ?", htmlAttributes: new { @style = "width:70px" })  

                            @if (Model.Underwriting_PolicyFile.HasOverridenCommission)  
                            {  
                                <div class="form-check" name="hasOverridenCommission" type="checkbox" style="display:inline-block;width:40px;padding-left:24px; border-radius:10px">  
                                    @Html.Hidden("Underwriting_PolicyFile.HasOverridenCommission", Model.Underwriting_PolicyFile.HasOverridenCommission)  
                                    @Html.EditorFor(model => model.Underwriting_PolicyFile.HasOverridenCommission, new { id = "HasOverridenCommission", htmlAttributes = new { @class = "form-check-input" } })  
                                </div>  
                                <div style="display:inline-block">  
                                    @Html.EditorFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, new { id = "OverridenCommissionPercentage", htmlAttributes = new { @style = "width:315px", @class = "form-control input-sm", @placeholder = "Enter Overriding Commission Percentage", @type = "number" } })  
                                    @Html.ValidationMessageFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, "", new { @class = "text-danger" })  
                                </div>  
                            }  
                            else  
                            {  
                                <div style="display:inline-block;width:40px;padding-left:24px; border-radius:10px">  
                                    <input type="checkbox" id="trigger" name="hasORC" value="true">  
                                    <input type="hidden" value="false" name="hasORC">  
                               </div>  
                                <div style="display:inline-block; " id="hidden_fields" name="hidden">  
                                    @Html.EditorFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, new { id = "OverridenCommissionPercentage", htmlAttributes = new { @style = "width:315px", @class = "form-control input-sm", @placeholder = "Enter Overriding Commission Percentage", @type = "number" } })  
                                    @Html.ValidationMessageFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, "", new { @class = "text-danger" })  
                                </div>  
                            }  
                        </div>  
                        <div style="display:inline-block; padding-left:15px;">  
                            @Html.LabelFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, "ISS Levy?", htmlAttributes: new { @style = "width:70px" })  

                            @if (Model.Underwriting_PolicyFile.HasNaicomIssLevy)  
                            {  
                                <div class="form-check" name="hasNaicomIssLevy" type="checkbox" style="display:inline-block;width:30px; padding-left:12px;">  
                                    @Html.Hidden("Underwriting_PolicyFile.HasNaicomIssLevy", Model.Underwriting_PolicyFile.HasNaicomIssLevy)  
                                    @Html.EditorFor(model => model.Underwriting_PolicyFile.HasNaicomIssLevy, new { id = "HasNaicomIssLevy", htmlAttributes = new { @class = "form-check-input" } })  
                                </div>  
                            <div style="display:inline-block">  
                                @Html.EditorFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, new { id = "NAICOMLevyPercentage", htmlAttributes = new { @style = "width:315px", @class = "form-control input-sm", @placeholder = "Enter ISS Levy Percentage", @type = "number" } })  
                                @Html.ValidationMessageFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, "", new { @class = "text-danger" })  
                            </div>  
                            }  
                            else  
                            {  
                            <div style="display:inline-block;width:30px; padding-left:12px;">  
                                <input type="checkbox" id="issLevytrigger" name="hasIssLevy" value="true">  
                                <input type="hidden" value="false" name="hasIssLevy">  
                            </div>  
                            <div style="display:inline-block" id="issLevyHidden_fields" name="hidden">  
                                @Html.EditorFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, new { id = "NAICOMLevyPercentage", htmlAttributes = new { @style = "width:315px", @class = "form-control input-sm", @placeholder = "Enter ISS Levy Percentage", @type = "number" } })  
                                @Html.ValidationMessageFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, "", new { @class = "text-danger" })  
                            </div>  
                            }  
                        </div>  

                <input type="hidden" name="hasNaicomIssLevy" id="hasNaicomIssLevy" value="@ViewBag.HasNaicomIssLevy" />  
                        <input type="hidden" name="hasOverridenCommission" id="hasOverridenCommission" value="@ViewBag.HasOverridenCommission" <div/>  

JS Script

 // Get the form fields and hidden div  
            checkbox.change(function () {  
                if (checkbox.is(':checked')) {  
                    hidden.fadeIn();  
                } else {  
                    hidden.fadeOut();  
                    $("#OverridenCommissionPercentage").val("");  
                }  
            });  

            // Setup an event listener for when the state of the   
            // checkbox changes.  
            checkTrigger.change(function () {  
                if (checkTrigger.is(':checked')) {  
                    isshiddenField.fadeIn();  
                } else {  
                    isshiddenField.fadeOut();  
                    $("#NAICOMLevyPercentage").val("");  
                }  
            });  

Please note that the content of the Underwriting_PolicyFile Model will constantly change depending on whatever the user checks or unchecks and the "Save" changes" button will update the database Table as shown in the attachment.

How Do I

  1. Pass whatever checkbox input changes to the followings parameters to the Controller
    a) hasNaicomIssLevy // checked during the HPPGET as shown in the attachment
    b) hasOverridenCommission // Checked during the HPPGET as shown in the attachment
    c) hasIssLevy // the system directs the user to the section of the razor if the HTTP GET does not contain the already checked box
    d) hasORC // the system directs the user to the section of the razor if the HTTP GET does not contain the already checked box
    as contained in the Razor views with the same parameters passed to the Controller but returns NULL when the "Save Changes" button is clicked.

2) Is it possible to reduce the parameters to 2 instead of 4 checkboxes input and still achieve the same result?

Looking forward to your anticipated assistance.

Best regards.
Abiodunajai

@Yihui Sun-MSFT
@Lan Huang-MSFT
261519-special-risk-page.png

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,573 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,494 questions
ASP.NET API
ASP.NET API
ASP.NET: A set of technologies in the .NET Framework for building web applications and XML web services.API: A software intermediary that allows two applications to interact with each other.
338 questions
{count} votes

2 answers

Sort by: Most helpful
  1. Bruce (SqlWork.com) 65,576 Reputation points
    2022-11-18T23:22:13.36+00:00

    lots of coding errors. in the sample code:

        [HttpPost]  
             public ActionResult EditClientPolicySchedule(ClientPolicyViewModel model,  bool? hasIssLevy, bool? hasORC, bool? hasNaicomIssLevy, bool? hasOverridenCommission)  
             {  
                 ViewBag.OperationName = operationName;  
                 ViewBag.ActionType = actionType;  
                 ViewBag.LastScheduleID = model.Underwriting_PolicyFile.PolicyCode;  
                 ViewBag.PostTo = "EditClientPolicySchedule";  
                 ViewBag.TransCode = transCode;  
                 ViewBag.HasNaicomIssLevy = hasNaicomIssLevy;  
                 ViewBag.HasOverridenCommission = hasOverridenCommission;  
          
                  return RedirectToAction("EditClientPolicySchedule", new { id = model.Underwriting_PolicyFile.PolicyRefCode});  
               }  
    

    the post data is in the model, but all the bool's are expected to be query string values. you probably meant to have them as part of the model. also all the ViewBag assignments are useless because you follow them with a redirect. ViewBag data is only passed from the controller to the view it registers.

    0 comments No comments

  2. abiodunajai 371 Reputation points
    2022-11-21T09:11:07.933+00:00

    I have resolved the issues.
    The working code is pasted below.

                        <div style="display:inline-block; font-style: italic; padding-left:175px ">  
                            <span class="label label-danger ">*For Special Risk Only**</span>  
                        </div>  
                        <br/>  
                        <div style="display:inline-block;padding-left:60px;">   
                            @Html.LabelFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, "Current_ORC", htmlAttributes: new { @style = "width:70px" })  
                            <div class="form-check" name="hasOverridenCommission" type="checkbox" style="display:inline-block;width:58px;padding-left:40px; border-radius:10px">  
                                @Html.Hidden("Underwriting_PolicyFile.HasOverridenCommission", Model.Underwriting_PolicyFile.HasOverridenCommission)  
                                @Html.EditorFor(model => model.Underwriting_PolicyFile.HasOverridenCommission, new { id = "HasOverridenCommission", htmlAttributes = new { @class = "form-check-input", @disabled = "disabled"} })  
                            </div>  
                            <div style="display:inline-block">  
                                @Html.EditorFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, new { id = "OverridenCommissionPercentage", htmlAttributes = new { @style = "width:315px", @class = "form-control input-sm", @placeholder = "Enter Overriding Commission Percentage", @type = "number", @readonly=true } })  
                                @Html.ValidationMessageFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, "", new { @class = "text-danger" })  
                            </div>  
                        </div>  
                        <div style="display:inline-block; padding-left:15px;">  
                            @Html.LabelFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, "Current_ISS_Levy?", htmlAttributes: new { @style = "width:70px" })  
                            <div class="form-check" name="hasNaicomIssLevy" type="checkbox" style="display:inline-block;width:88px; padding-left:70px;">  
                                @Html.Hidden("Underwriting_PolicyFile.HasNaicomIssLevy", Model.Underwriting_PolicyFile.HasNaicomIssLevy)  
                                @Html.EditorFor(model => model.Underwriting_PolicyFile.HasNaicomIssLevy, new { id = "HasNaicomIssLevy", htmlAttributes = new { @class = "form-check-input", @disabled = "disabled"} })  
                            </div>  
                            <div style="display:inline-block">  
                                @Html.EditorFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, new { id = "NAICOMLevyPercentage", htmlAttributes = new { @style = "width:260px", @class = "form-control input-sm", @placeholder = "Enter ISS Levy Percentage", @type = "number", @readonly=true } })  
                                @Html.ValidationMessageFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, "", new { @class = "text-danger" })  
                            </div>  
                        </div>  
                        <br />  
                       <div style="display:inline-block;padding-left:55px;">  
                           @Html.LabelFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, "Change_ORC?", htmlAttributes: new { @style = "width:70px" })  
                            <div style="display:inline-block;width:62px;padding-left:45px; border-radius:10px">  
                                <input type="checkbox" id="trigger" name="hasORC" value="true">  
                                <input type="hidden" value="false" name="hasORC">  
                            </div>  
                            <div style="display:inline-block; " id="hidden_fields" name="hidden">  
                                @Html.EditorFor(model => model.OverridenCommissionPercentage, new { id = "OverridenCommissionPercentage", htmlAttributes = new { @style = "width:315px", @class = "form-control input-sm", @type = "number" } })  
                                @Html.ValidationMessageFor(model => model.OverridenCommissionPercentage, "", new { @class = "text-danger" })  
                            </div>  
                        </div>  
                        <div style="display:inline-block; padding-left:15px;">  
                            @Html.LabelFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, "Change_ISS_Levy?", htmlAttributes: new { @style = "width:70px" })  
                            <div style="display:inline-block;width:88px; padding-left:70px;">  
                                <input type="checkbox" id="issLevytrigger" name="hasIssLevy" value="true">  
                                <input type="hidden" value="false" name="hasIssLevy">  
                            </div>  
                            <div style="display:inline-block" id="issLevyHidden_fields" name="hidden">  
                                @Html.EditorFor(model => model.NAICOMLevyPercentage, new { id = "NAICOMLevyPercentage", htmlAttributes = new { @style = "width:260px", @class = "form-control input-sm", @type = "number" } })  
                                @Html.ValidationMessageFor(model => model.NAICOMLevyPercentage, "", new { @class = "text-danger" })  
                            </div>  
                        </div>   
    

    262506-workingspecialrisk.png

    @Yihui Sun-MSFT
    @Lan Huang-MSFT
    @Bruce (SqlWork.com)

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.