I have some dynamic content that is loaded by AJAX and added to the current page. This content is essentially a form that is rendered on the server-side which includes client-side validation attributes. The problem is, when the resulting form is validated using unobtrusive validation - the original plus the dynamic, AJAX-loaded -, the validation on the form part that came from AJAX does not fire.
Is it possible to include it in the client validation?
The solution was to do:
//add content to the form
$(form).removeData("validator").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(form);
There is documentation from Microsoft available at https://learn.microsoft.com/en-us/aspnet/core/mvc/models/validation#client-side-validation, but it has a small error, on which the removeData method is being called on the form element instead of the jQuery wrapping it.
Related
Is there a way to post between razor pages without disabling the Anti-forgery Token? I appreciate that sounds stupid, but what I'd like the user to be able to do is submit a mini version of the contact us form on one page and the submit action takes them to a different razor page where they can continue to fill in the rest of the form. It's essentially so we can include a mini contact us form in the footer of all pages as a view component. The view component can't handle the post because there is no endpoint for the view component. Whereas this could probably be achieved by carrying the form data on the query string, that then exposes their name/email data which is undesirable. Adding the [IgnoreAntiforgeryToken] attribute on the contact us page works, but is there a way to make it work without removing the validation/checks?
On a razor form submit page I would like to change a picture when a checkbox is set, before the form is posted though not trough JavaScript, but by pure razor code handled client side.
Not knowing the terms for it im unable to create sample code for this question, I believe though this should be possible with razor.
I got an ASP NET Core RazorPage having a button which asynchronously replaces a part of the given HTML using an AJAX request.
Besides some text content it renders another button which is intended to post back the side when clicked. It is surrounded by a form element.
However, clicking the button I receive an HTTP 400 with the information "This page isn't working" (Chrome). Other browsers like Firefox return an HTTP 400 as well.
The relevant HTML with the button which has been created by the AJAX call is the one below:
<form method="post">
<button class="btnIcon" title="Todos" id="btnTodos" formaction="PersonManagement/Parts/MyPageName?handler=PerformTodos">Execute action</button>
</form>
As the url exists (I doublechecked it using the browser with a simple GET) I wonder whether the issue could be due to some security settings along with the browser or is there anything I am perhaps missing out here?
Thank you for any hint
Two things here first add this attribute to your form asp-antiforgery="true", then send it's value to the server in your AJAX post request.
jQuery magic starts here :)
token: $('[name=__RequestVerificationToken]').val(),
Antiforgery is ON by default since .net core 2.0 (as far as I remember), so if you do AJAX post you need to send the antiforgery token with each request.
Let us know if it helps. Spread knowledge don't hide it just for yourself :P
Finally I came across a very interesting article from Matthew Jones at https://exceptionnotfound.net/using-anti-forgery-tokens-in-asp-net-core-razor-pages/ about Anti-Forgery Tokens in Razor pages. Worth reading, indeed.
However, independently from that article what solved my issue was simply not to add the <form .. element at the client-side, but already at the server-side. As there is no need for me to explicitly adding it at the client-side, but only the button itself, this is a solution for me which works properly.
A brief summary of my scenario now:
There is a Razor Page containing usual cshtml content along with a <form method="post"..
Some anchor elements also are included, one is triggering a JQuery AJAX call to the server
The JQuery call comes back from the server with some additional HTML including the post button which which I add to the existing HTML.
The button is being rendered inside the now already existing
Clicking the button causes the page to post back in the wanted manner and executes the handler as intended.
Thanks again Stoyan for your input and help with that.
I have tried asking this question in a number of ways, and I still can't get an answer. In Asp.net MVC4, is there a way I can just add jquery code to my views and not have to add any kind of annotation to a model to validate my form input? I just realized that I am using Ajax.BeginForm... I am betting that I cannot using regular Jquery Ajax calls with that on my form. I bet if I use HTML.beginForm, regular jquery will work. But now that will break my ajax calls... Which were failing for some reason. Well, I am about to find out why. Hopefully I can figure out how to just avoid using all Asp.net Ajax crap. It has given me nothing but a massive headache. Oh wait, you know what, I just looked at another view, and there I am using Html.BeginForm and I still can't use plain jquery code in my views to validate my form. Is this even possible in MVC4?
of course this is possible - ASP.NET MVC just emits HTML yes? so just add some jquery validate code to the document ready.
$(function(){
$('#myform').validate(/* options here */);
});
I'm using MonoRail and was wondering how it decides when to use client-side vs. server-side validation? In my model class I have [ValidateNonEmpty] on two properties, one is a textbox, the other is a dropdown. The textbox triggers client-side validation on form submission, if I leave the dropdown empty though it posts back to the server and returns back the validation error from server-side. Is there a way to get the dropdown to trigger client-side validation? Also it's odd because after the postback, it clears what I had entered in the dropdown but maintains the state of the textbox (viewstate anyone??)
Thanks,
Justin
It viewed source and I saw that it was using jQuery for the client-side validation. It had:
"business.businesstype.id":{ required: "This is a required field" },
for the dropdown, which wasn't working. I noticed that it was using 0 as the default dropdown value so I manually put in firstoptionvalue and that got it working:
$FormHelper.Select("business.businesstype.parent.id", $businessTypes, "%{value='id', text='name', firstoption='Select a Business Type', firstoptionvalue=''}")