I've been attempting to send POST data to my controller from a Kendo dialog event, but I keep encountering the issue of the model being null. Despite trying multiple solutions mentioned on StackOverflow, none have proven effective.
Here is my Ajax call:
function onSubmit(e) {
var myModel={
Id:0,
RoleNameEn:$('#UserRolePopup').find('#RoleNameEn')[0].value,
RoleNameAr:$('#UserRolePopup').find('#RoleNameAr')[0].value,
IsActive:$('#UserRolePopup').find('#IsActive')[0].value,
CreatedBy:0,
CreatedDate:"",
ModifiedBy:0,
ModifiedDate:""
};
$.ajax({
type: "POST",
url: "@Url.Action("Delete", "UserRole")",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(myModel),
success: function (result) {
console.log(result);
},
error: function (result, status) {
console.log(result);
}
});
}
Below is my HTML markup:
<div id="example">
@(Html.Kendo().Dialog()
.Name("dialog")
.Title("Add/Edit User Role")
.Content("<div id='UserRolePopup'> <div class='form-group; k-content'> <label for='RoleNameEn'>User role English</label> <input type='text' class='form-control' id='RoleNameEn' placeholder='Role name in english'/> </div> <div class='form-group'> <label for='RoleNameAr'>User role Arabic</label> <input type='text' class='form-control' id='RoleNameAr' placeholder='Role name in Arabic'> </div> <div class='form-check'> <input class='form-check-input' type='checkbox' value='' id='IsActive'> <label class='form-check-label' for='IsActive'>Is Active</label> </div> </div>")
.Width(400)
.Modal(true)
.Actions(actions =>
{
actions.Add().Text("Cancel");
actions.Add().Text("Submit").Primary(true).Action("onSubmit");
})
.Events(ev => ev.Close("onClose").Open("onOpen"))
)
</div>
The captured data is now sent to the controller. https://i.sstatic.net/DnDLr.png
An inspection reveals that the value has been successfully transferred to the controller.
My Controller method:
[HttpPost]
public JsonResult Delete([FromBody] UserRoleDTO userRoleDTO)
{
return new JsonResult(userRoleDTO);
}
Snippet from my Program.cs file:
builder.Services.AddMvc()
.AddNewtonsoftJson(options =>
options.SerializerSettings.ContractResolver =
new DefaultContractResolver());
builder.Services.AddControllers().AddNewtonsoftJson();
Attempts made so far:
- Usage of
[FromBody],[FromForm]- Unsuccessful - Changing datatype in ajax to
textand passing as a string parameter - No luck - Trying various techniques of passing the
JSON- Ineffective - Switching to
NewtonSoft.Json- Also did not work
If anyone can pinpoint what configuration might be missing or why this setup is failing, please advise.