I'm using the latest RC with asp.net mvc 3, and have turned on unobtrusive javascript validation and added the necessary scripts to the page. All of the validation works perfectly, but when I try to submit the page, it simply doesn't post. If I turn unobtrusive javascript off in the web.config without making any other changes, everything works perfectly fine.
Here's my scripts I'm using:
<script src="#Url.Content("~/Scripts/jquery-1.4.4.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
Inside the page it's just a standard form using Html.BeginForm().
Might help to put some more information so we can try to repro this.
The form won't post if something is invalid. So chances are a field is not valid, but you maybe you don't have the display set up properly. Did you make sure to add a call to Html.ValidationMessageFor(...) for each form field? That renders a span where the client validation message appears.
This also happens when hidden fields are required. Such a simple thing, but it has caused me quite a bit of stress.
Related
I'm having trouble getting JQuery validation to work with a set of checkboxes. I'm generating the checkboxes using an ASP.NET checkboxlist, and I've used JQuery to set the 'name' attribute to the same thing for each checkbox in the list. Here's the code that gets written to the browser. I'm setting the 'validate' attribute on the 1st checkbox to set the rule that at least one checkbox must be selected. The JQuery validation works for all other elements on the form, but not for the checkbox list. I'm also using a JQuery form wizard on the page which triggers validation for each 'page' of the form, so I don't have control over how the validation is called.
<input id="ContentPlaceHolder1_MainContent_AreaOfInterest_0" class="ui-wizard-content ui-helper-reset ui-state-default" type="checkbox" value="Famine" name="hello[]" validate="required:true, minlength:1">
<label for="ContentPlaceHolder1_MainContent_AreaOfInterest_0">Famine</label>
<br>
<input id="ContentPlaceHolder1_MainContent_AreaOfInterest_1" class="ui-wizard-content ui-helper-reset ui-state-default" type="checkbox" value="Events Volunteer" name="hello[]">
<label for="ContentPlaceHolder1_MainContent_AreaOfInterest_1">Events Volunteer</label>
Any ideas on what's going wrong? There are lots of examples of JQuery scripts that will do the validation, however I'm trying to avoid this as I'm generating the checkboxlist server side by a custom control so that it can be re-used across different pages that may or may not have JQuery enabled. I'm trying to enable the JQuery validation whilst being as unobtrusive as possible, so that pages will still work even if JQuery is disabled.
Here are the relevant JQuery inclusions and JQuery initialisation script for the form wizard. I'm not using any initialisation code for JQuery validation:
<script type="text/javascript" src="../js/formwizard/js/bbq.js"></script>
<script type="text/javascript" src="../js/formwizard/js/jquery.form.js"></script>
<script type="text/javascript" src="../js/formwizard/js/jquery.form.wizard.js"></script>
<script type="text/javascript" src="../js/formwizard/js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#form1").formwizard({
validationEnabled: true,
focusFirstInput: true
});
});
</script>
Using JQuery to set the 'name' of each checkbox to a consistent value 'breaks' the checkbox list in .NET (I thought this would happen). Basically it's too complex to use the JQuery forms wizard and JQuery validate with a customised .NET checkboxlist. They aren't really compatible. .NET needs to have different names for each of the checkboxlist inputs, which doesn't play well with JQuery validate (certainly not when also using the form wizard). I'm going to try switching off JQuery validation in the forms wizard (it has this option) to see if the form wizard will work OK with the validation (including client-side validation), of the .NET validators. I'll post back my results! Think I tried doing this originally and the form wizard wasn't working correctly, which is why I started using JQuery validation with the form wizard, so my current solution is just to just remove the multi-page form (the form's not too too long without this), to simplify things, and just rely on .NET validation (client and server side). Someone made the point that a multi-page form can leave the user wondering exactly how many field are left to fill, while at least a single page form allows them to see the fullness of what they need to complete!
This is the form wizard I am/was using:
http://thecodemine.org/
I'm attempting to speed up my website by combining and minifying my [web|script]resource.axd files.
Something based off of and similar to this.
http://www.koders.com/csharp/fid2061F9773188F0AB36F0DC42BC6073E3A935F71F.aspx?s=cdef%3Ajquery (modified to work with ie6)
The telerik controls in my pages render a lot of resouce.axd script tags. They also appear in update panel ajax postbacks in the pipes format.
Left by themselves the script files are run once. However after I combine the files in the regular page post and an update panel update fires. The code gets run a 2nd time due to the script reference in the update panel ajax response.
This results in a bunch of Telerik "Namespace is already registered." errors.
(I think this is because it is a seperate script file with a different name however I still get an error when I have the same file name, Telerik.Web.UI.Orientation is already registered)
I've been thinking that I can just remove the script references from the update panel postback altogether as the scripts are already on the page and there should never be any new controls added to the page requiring new scripts.
I've implemented this and I don't see any issues so far. Could there be something forboding that I am forgetting about?
Or is this a valid assumption?
Examples:
Normal Telerik Post
<html>
...
<script src="webresource.axd?d=asdfasdfasdfasdfasdfasdfasdf1" />
<script src="webresource.axd?d=asdfasdfasdfasdfasdfasdfasdf2" />
<script src="scriptresource.axd?d=asdfasdfasdfasdfasdfasdfasdf3" />
<script src="scriptresource.axd?d=asdfasdfasdfasdfasdfasdfasdf4" />
...
</html>
Normal Telerik UpdatePanel Response, no issues when requested from non combined page, throws <namespace> is already registered error when requested from page with combined scripts.
1|...|...|...|
123|scriptBlock|ScriptPath|/ScriptResource.axd?d=asdfasdfasdfasdfasdfasdfasdf3|
456|scriptBlock|ScriptPath|/WebResource.axd?d=asdfasdfasdfasdfasdfasdfasdf2|
Combined Scripts
<html>
...
<script src="js.axd?path=gdfg78sdfgsd70fghsrg89dg0sdfh0sfh9sfgh" />
</html>
What you said makes sense and as long as its working I don't foresee any issues. But I haven't run into this issue myself and I use a lot of telerik controls in update panels. It does have me a little curious. I assume you are, but wanted to double check, that you're using the RadScriptManager, which will automatically combine those script files for you. And since you mentioned you're aiming to improve performance as much as possible, I'd also suggest looking at their StyleSheetManager and Compression.
http://www.telerik.com/products/aspnet-ajax/stylesheetmanager.aspx
http://www.telerik.com/products/aspnet-ajax/compression.aspx
http://www.telerik.com/products/aspnet-ajax/scriptmanager.aspx
Also, have you considered using their RadAjaxManager instead of UpdatePanels? It should be more lightweight.
I'm an experience programmer who is writing his first asp.net application.
I needed a pop up calendar and didn't like the javascript based ones I found.
I wrote my own Web User Control thinking that would be best. (I still have some issues with it). I used a textbox, image button and the asp.net calendar control.
The control works reasonably well, but not being an HTML/ASP programmer when I placed it on my page, whenever I clicked the button to display the calendar, my page goes horribley misaligned. I placed it inside of a HTML table and that helps. But I was wanting to not worry about control alignment on the page.
Am I completely misunderstanding how a Web User Control would display for this time of calendar control?
Should I abandon my work and look for a Javascript solution? (But if it's a user control won't it do the same thing?
While this is a good item to learn with it certainly has been done, and done very well in many places.
Any server based calendar control is not your best option, it will lead to a postback anytime you are switching from month to month, which is less then ideal.
jQueryUI is a great/simple option to get a calendar control that will not mess up your other layout.
In the end if you still want to implement your control we will need to see some HTML/CSS as to why it is messing up your UI.
It's worth spending some time learning how jQuery UI and the datepicker() plugin work. I'm guessing by your original post that you are not too keen on a client side solution, but I rarely see a need for a server side calendar control.
Javascript/jQuery
<script type="text/javascript">
$(document).ready(function() {
$("#myTextBox").datepicker();
});
</script>
HTML
<script type="text/javascript" src="<jQuery URL GOES HERE>" />
<script type="text/javascript" src="<jQueryUI URL GOES HERE>" />
<input type="text" id="myTextBox />
Apologies if the syntax is a bit off... I dont have VS in front of me to test but hopefully it should give you an idea where to start :)
I can't seem to get client side validation working with the version of MVC released with Visual Studio 2010 RC.
I've tried it with two projects -- one upgrade from 1.0, and one using the template that came with VS.
I'd think the template version would work, but it doesn't. Added the following scripts:
<script type="text/javascript"
src="<%= Url.Content("~/Scripts/MicrosoftMvcValidation.js") %>">
</script>
<script type="text/javascript"
src="<%= Url.Content("~/Scripts/jquery.validate.js")%>">
</script>
which are downloaded to the client correctly. Added the following to my form page:
<% Html.EnableClientValidation(); %>
<%--yes, am aware of the EndForm() bug! --%>
<% using (Html.BeginForm()) { %>
<%--snip --%>
and I can see the client validation scripts have been added to the bottom of the form. But still client validation never happens.
What is worse is that in my upgraded project, the client validation scripts are never output in the page!
PLEASE NOTE: I am specifically asking about the version of MVC2 that came with VS2010 RC. Also, I do know how to google; please don't waste anybody's time searching and answering if you aren't familiar with this issue in the release candidate of Visual Studio. Thanks.
Error ID10T: User editing one page and testing another.
However, I can't get client-side validation working on the MVC2 template project. If anybody has an idea how to, say, get it working for the registration page, please answer.
I had the same problem also,
the examples by MS(scottGu and haacked) are a bit confusing since you don't really know on which version they are talking about, and haacked updates his post every time a new version is out so you it's not relevant to you :(.
To make jQuery validation work On VS 2010 do the following:
as you answered you need the MicrosoftMvcJQueryValidation.js file, several ways to get this file, i got it from the example project from haacked post: ASP.NET MVC 2 Custom Validation
remove all JS references and leave just this one and the jquery.validate.min.js
call <% Html.EnableClientValidation(); %> before the opening tag of the form
Dont forget to put some Html.ValidationMessageFor(.. on your fields since this is the trigger for adding the enteries to the client validation JSON object
i guess you did all the above, but left the references to MicrosoftMvcValidation.js on the page, notice at the end of this file there is the hook to the MS client side validation.
funny i just wanted to blog about this issue this morning and found your question,\hope this helps
I have had no luck getting this to work in MVC 2 RC. According to other questions here on SO, you have to get the MicrosoftMvcJQueryValidation.js file from the MVC Futures release, hold your left foot behind your head, and whistle Dixie for half an hour. I did this and more and have not been able to make it work.
I have, however, gotten it working by using the jQuery Validation plugin directly. More work, but it gets the job done.
Hopefully it will be fixed in RTM.
Is there a best practice when it comes to setting client side "onclick" events when using ASP.Net controls? Simply adding the onclick attribute results in a Visual Studio warning that onclick is not a valid attribute of that control. Adding it during the Page_Load event through codebehind works, but is less clear than I'd like.
Are these the only two choices? Is there a right way to do this that I'm missing?
Thanks!
Eric Sipple
**just a pre-note on the answer: HTML validation in VS is often BS. It complains about stuff that works IRL, even if that stuff is bad practice. But sometimes you gotta bend the rules to get stuff done.
Every ASP.NET page (2.0 and greater) comes with a ClientScriptManager. You use this to register javascript from server side code. You can pass in javascript that registers events on controls after the page has loaded, when the HTML controls on the page are all present in the DOM.
It presents a single, unified place on pages to dynamically add javascript, which isn't a bad thing. It is, however, awfully ugly.
In this time of the death of the ASP.NET server control model, you might want to set events the way they will be in the future of ASP.NET MVC. Grab a copy of jQuery and add it to your website. You can then easily register your events thusly:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("controlId").bind("click", function(e) { /* do your best here! */ });
});
</script>
</head>
<!-- etc -->
</html>
You can add the events through Javascript to the HTML elements that you want. This is the cleanest way, since it doesn't mix the server&client technologies. Furthermore, this way many handlers can be registered to the same event (in contrast to the onclick attribute).
Basically, the code would be
document.getElementById('myLovelyButtonId').attachEvent('onclick',doSomething)
for Internet Explorer and
document.getElementById('myLovelyButtonId').addEventListener('click',doSomething,false)
for other browsers. (doSomething is an event handler - JavaScript function). These calls should be made in the window load event handler
Consider reading the advanced event registration article on Quirksmode for further info.
Also, consider using a library like jQuery. This way, the statement will become
$('#myLovelyButtonId').click(
function doSomething () {
alert('my lovely code here');
});
Setting the value for WebControl.Attributes["onclick"] is okay. If ASP.NET needs a client-side click handler, it will concatenate the values, delimited by semi-colon.
Fix grammatical or spelling errors.
Clarify meaning without changing it.
Correct minor mistakes.
Add related resources or links.
Always respect the original author.