CODEWITHSUNDEEP
c#asp.net-mvc
Shawn M Holman
Shawn M Holman

Reputation: 9

MVC Form values not reset

I have an issue where the hidden values in a form are not updating when the new ActionResult is returned.

For example, a user will check several records and click the Update Completion button. This makes an Ajax called to the UpdateCompleted action that sets a date for the checked records and once the Ajax call returns the form is submitted. After performing some logic in the form submit Action method, an updated model is returned with the IsChecked value set to false for all records in the model, but the form is retaining the previous checked value due to the generated id below having the same value.

Code

    <td>
        @Html.CheckBoxFor(model => Model.WorkOrderDetails[x].IsChecked)
        @Html.HiddenFor(modelItem => Model.WorkOrderDetails[x].IsChecked)
        @Html.HiddenFor(modelItem => Model.WorkOrderDetails[x].WorkOrderEntityId)
        @Html.HiddenFor(model => model.WorkOrderDetails[x].WorkOrderId)
    </td>

Rendered HTML

    <td>
        <input data-val="true" data-val-required="The IsChecked field is required." id="WorkOrderDetails_0__IsChecked" name="WorkOrderDetails[0].IsChecked" type="checkbox" value="true"><input name="WorkOrderDetails[0].IsChecked" type="hidden" value="false">
        <input id="WorkOrderDetails_0__IsChecked" name="WorkOrderDetails[0].IsChecked" type="hidden" value="False">
        <input id="WorkOrderDetails_0__WorkOrderEntityId" name="WorkOrderDetails[0].WorkOrderEntityId" type="hidden" value="ODU=">
        <input id="WorkOrderDetails_0__WorkOrderId" name="WorkOrderDetails[0].WorkOrderId" type="hidden" value="NjQ4OTU3">
    </td>

Submit Code

@using(@Html.BeginForm("Index", "WorkOrderMaster", FormMethod.Post, new { id = "workOrderMasterForm" }))
{
<div>
<div class="project-buttons">
    <div class="btn-group">
        <input id="submitCompletion" class="btn btn-success" value="Update Completion" data-submit-url='@Url.Action("UpdateCompleted", "WorkOrderMaster")' />
    </div>
</div>

$(function () {
    $('#submitCompletion').click(function () {
        $.ajax({
            type: 'POST',
            url: $(this).data('submit-url'),
            data: $('#workOrderMasterForm').serialize(),
            success: function (data) {
                $('#workOrderMasterForm').submit();
            }
        });
    });
});

I would expect the new values from the model to be used but this is not occurring.

Is it recommended to code the input values manually in this situation in order to avoid the following format?

ClassName_Index_PropertyName

Thanks in advance for the time you took to look at this question.

Upvotes: 0

Views: 1230

Answers (2)

Shawn M Holman
Shawn M Holman

Reputation: 9

In an effort to keep moving on this. I moved the form to a partial view, and added a div to load the partial view into. Anytime an event fires on the page thru many filters or the users submitting checked records the div is cleared and reloaded. This solved my issue.

Upvotes: 0

Luis
Luis

Reputation: 874

Based on the provided code, you are performing an AJAX call to the server but expects the values to be cleaned up after the operation is finished.

It will not work since you are not refreshing the page. To clean up the form values without refreshing the page you need to do a small change in your code:

$(function () {
    $('#submitCompletion').click(function () {
        $.ajax({
            type: 'POST',
            url: $(this).data('submit-url'),
            data: $('#workOrderMasterForm').serialize(),
            success: function (data) {
                $('#workOrderMasterForm').reset();
            }
        });
    });
});

The change is in the success promise where "$('#workOrderMasterForm').sugmit();" changed to "$('#workOrderMasterForm').reset();".

Upvotes: 1

Related Questions