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
- 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