Bug Bash:Button.CausesValidation, ModalPopups and Validation Controls

The second entry in my BugBash series ...

The Bug

I recently wrote a post discussing how to implement a master-detail editing scenario using ASP.NET's GridView and DetailsView along with the AjaxControlToolkit's ModalPopup control.  My example was pretty standard - each data row in the GridView has an Edit button that when clicked displays the selected row within a DetailsView.  My DetailsView uses RequiredFieldValidators for each of the input fields to make sure the user has provided the required information. 

My sample seemed to work great - I certainly had no issues.  But, as Konstantin G posted in a comment - there is a bug hiding out in my example.  Here was what Konstantin G had to say: 

Hi Matt,

Great example! Everything works fine, but when you leave blank required field, and hit Cancel button, you can't display modal popup again. Any ideas how to solve this problem?

Thanks.

You can reproduce the problem Konstantin is describing using the following steps.

  1. Navigate to http://mattberseth2.com/master_details_II/
  2. Click the Edit hyperlink for row with ID = 'GREAL'
  3. When the edit dialog is displayed, clear out the value of the Name textbox
  4. Click the Close hyperlink at the bottom right corner of the dialog
  5. Back on the main grid, try to click the edit hyperlink for any of the other rows -> BUG!  The dialog is not shown

And here is the markup for my GridView's row select command ...

   1:  <asp:TemplateField>
   2:      <ItemTemplate>
   3:          <asp:LinkButton 
   4:              ID="btnViewDetails" runat="server" 
   5:              Text="Edit" CommandName="Select" 
   6:          />
   7:      </ItemTemplate>
   8:  </asp:TemplateField>

Did you spot the bug?  If not don't feel bad, clearly I missed it too ;) 

The problem is that because my LinkButton doesn't explicitly set the CausesValidation attribute to false, each time one of the grid's Edit buttons are clicked, validation is performed.  That is usually not going to hurt anything - except in the scenario Konstantin ran into.  In this case, the second time the Edit button is clicked validation fails because the Name textbox is empty from the first time the dialog was displayed.

You need to keep in mind that even though the modal popup panel is not visible, it controls (including the validators) are still part of the page.  That's what fooled me. 

 

The Fix

Set the CausesValidation property on the GridView's edit buttons to false.

   1:  <asp:TemplateField>
   2:      <ItemTemplate>
   3:          <asp:LinkButton 
   4:              ID="btnViewDetails" runat="server" 
   5:              Text="Edit" CommandName="Select" CausesValidation="false"
   6:          />
   7:      </ItemTemplate>
   8:  </asp:TemplateField>    

 

That's it.  Enjoy!


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/122

Comments


Posted by: Jason on May 18, 2008 12:00 AM

We tend to use a different ValidationGroup for the validators in the modalpopup so that they are kept separate from any other validation controls that may be on the main page.

Although your link should of course have CausesValidation="false", using a different ValidationGroup would have also elminated this problem.

Posted by: Jared Roberts on May 18, 2008 12:00 AM

That has caught me me more then once. Thats why I always try and use Validation Groups, and always set the causesvalidation even if it is true.

Posted by: Ira on May 19, 2008 12:00 AM

Great post Matt,

You can also use template fields in the DetailsView of the modal popup and set the ValidationGroup of all the validators and put the same ValidationGroup on the save button of the modal dialog.

This way the edit button already knows it is not a part of that ValidationGroup.

Ahh - set the ValidationGroup ... I like that even better.

Thanks everyone!

Matt.

Posted by: Konstantin G on June 2, 2008 12:00 AM

ValidationGroup - yes, but CausesValidation="false"
Very helpful comments and elegant solution, cause my quick fix was a disabling validators using JavaScript (e.g. ValidatorEnable(validator, false)), attached to "Close" link button.

Thanks a lot.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • Konstantin G wrote: ValidationGroup - yes, but CausesValidation="false" Very helpful comments and elegant solution, cau...
  • Ira wrote: Great post Matt, You can also use template fields in the DetailsView of the modal popup and set the...
  • Matt Berseth wrote: Ahh - set the ValidationGroup ... I like that even better. Thanks everyone! Matt. ...
  • Jason wrote: We tend to use a different ValidationGroup for the validators in the modalpopup so that they are kep...
  • Jared Roberts wrote: That has caught me me more then once. Thats why I always try and use Validation Groups, and always ...