Topic: Hidden field not updating in partial view on main view rendered as ajax
I have a simple view with a partial view in it and have simple model with 2 properties. Based on boolean property I am controlling action that needs to be taken.
My main View looks like
@model UserData
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@Model.Name
Partial view is like
@model UserData
@if (Model.Action)
{
@Html.Raw("Activate")
}
else
{
@Html.Raw("Deactivate")
}
After button is clicked it activates/deactivates record based on current Action (boolean) property, from within same action method, after user status is changed I am fetching same partial view with toggled Action property and converting into string (using Partial view to string) and returning this as json result and displays updated partial view without page refresh.
I have inspected returned string at it has proper form data (with updated Action value within hidden field) but when it is rendered in the view I just see updated text (Activate converted to Deactivate and vice versa) but hidden field value remains same which was at time of loading the main view.
My controller action method looks like
[HttpPost]
[Route("[action]")]
public async Task ChangeStatus(UserData model)
{
var result = // call API to change user status
if (result.Succeeded)
model.Action = !model.Action;
JsonResponse response = new JsonResponse
{
Succeeded = result.Succeeded,
Title = result.Succeeded ? "" : "Record not updated",
AdditionalData = (await this.RenderViewToStringAsync("_UserAction", model))
};
return Json(response);
}
And replacing current content with new partial view string like below
@section Scripts
{
}
I want to know why this is happening as partial view to string returned is correct, also activate text is updated correctly it is just hidden field which does not get updated.
Note: if I use value property on hidden field and set that with Model.Action then it works fine but I wanna know reason behind this behaviour that why partial view hidden filed does not update at time of rendering while we have correct model.
Author: FRAUSKY
Not sure what course is right for you?
Choose the right course for you.Get the help of our experts and find a course that best suits your needs.
Let`s Connect
TEJA
• The tag helpers read the model state. This is so model validation errors can be passed back to view and rendered.
You can clear the model state which is more of a hack because it breaks the model validation feature in MVC.
if (result.Succeeded)
{
ModelState.Clear();
model.Action = !model.Action;
}
Also, it is a bit confusing that a successful response toggles the action. Feels like the code should be refactored.
PARTH
Where did you check the value of AdditionalData?
return Json(response);
Or
function UpdateAction(data, element) {
if (data.succeeded) {
$(element).closest('div').html(data.additionalData);
}
}
If you just check the value of response.AdditionalData in the first place, I suggest you use console.log(data.additionalData) to check the value in the second place.
In addition, you need to note that the camel case JSON propertry is used by default in Core.
If you have set "PropertyNamingPolicy = null" in Starp:
services.AddControllers().AddJsonOptions(opts => opts.JsonSerializerOptions.PropertyNamingPolicy = null);
Then you should read the data as follows:
if (data.Succeeded) {
$(element).closest('div').html(
data.AdditionalData);
}
}