I have a modal popup with a form in it. When submitted via ajax (using jQuery) the form is validated and a javascript callback function checks to see if the model was valid. If so, the modal popup is reset and hidden, if not, the html response text is dumped into the modal popup div for the user to see the fault.
I'm doing this in ASP.NET MVC using a jQuery ajaxSubmit and an action that only accepts a POST verb and returns a PartialViewResult. I do this in several places on my site, but am having problems with 2 such workflows off of 1 page. One works, the other doesn't, using identical code.
Here is the problem:
<% using (Html.BeginForm("ApplyPayment", "SomeController", FormMethod.Post, new { @id = "frmApplyPayment" })) { %>
<%= Html.AntiForgeryToken(SomeSaltString) %>
<%= Html.Hidden("ModelValid", ViewData.ModelState.IsValid) %>
...
<% } %>
During debugging, even though ViewData.ModelState.IsValid is false when I have validation errors, "#ModelValid" gets set to "True"! I have tried many ways of explicitly setting it to false (like ViewData.ModelState.IsValid ? "True" : "False"). It just always comes out as true even though the variable is false and hides the popup. What is going on?
Here is more code for reference:
function SubmitPaymentForm(form) {
$(form).ajaxSubmit({ target: "#modalApplyPayment", success: CheckPaymentValidity });
}
function CheckPaymentValidity(responseText) {
if ($("#ModelValid").val() != "True") {
ShowModalPopup("#modalApplyPayment");
}
else {
HideModalPopup("#modalApplyPayment");
}
}
This all totally works for a very similar workflow off of the same base page for emailing functionality (popup that takes address, validates on ajax post, shows popup if validation error exists).