Alternatively - you could write an extension to pass an additional parameter to your Inputs (or Form) to set them as disabled or readonly based on your Model's value. (Edit: Much like the previous suggestion from DarrellNorton)
They are: Html.CheckBoxfor, Html.Telerik().IntegerTextBoxFor, Html.Telerik().DatePickerFor, Html.DropDownListFor, etc.
The only <input> is the submit button. I not only want to disable the submit button, I want the user to not be able to select a new date, input data into a textbox, and dropdown and see any selections in a dropdown listbox. This is the very definition of
ReadOnly.
Any, again, I have 40 controls and want to do this with as little changes as possible.
I'm trying to get your idea to work. First, I could not use the * wildcard or the CSS styles would not display properly. Now I am attempting to just disable those controls of type input using:
The controls appear to be disabled but when I click on one of the Telerik controls, I get a javascript error from telerik.textbox.min.js: htmlfile: Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept focus.
Is there another attribute that I could set that would prevent his exception?
NickKA
Member
115 Points
243 Posts
ReadOnly for MVC Razor Form
May 02, 2012 04:32 PM|LINK
I have a MVC Razor form with 40 controls (textbox, drop-down listbox, multi-select listbox, and checkbox).
In my ViewModel, using business logic, I set a boolean ReadOnly property to either true or false.
I need a way to set all those 40 controls to read only with as little changes as possible.
I have all my controls wrapped in a HTML.BeginForm.
What is the best way to do this?
BrockAllen
All-Star
27534 Points
4907 Posts
MVP
Re: ReadOnly for MVC Razor Form
May 02, 2012 04:44 PM|LINK
If they're <input> elements, then you need to set disabled="disabled" as an attribute.
If you're using EditorFor then you could render DisplayFor instead (which is safer than a disabled input element).
DevelopMentor | http://www.develop.com
thinktecture | http://www.thinktecture.com/
RichardY
Star
8376 Points
1573 Posts
Re: ReadOnly for MVC Razor Form
May 02, 2012 04:46 PM|LINK
Pass your boolean to a hidden field in the view via the ViewBag. Then check the value of this field, if readonly then something like this:
$('input, select').attr('disabled', true);
Or you could add a class to every control that you want to disable and use that in the jquery selector.
DarrellNorto...
All-Star
86773 Points
9643 Posts
Moderator
MVP
Re: ReadOnly for MVC Razor Form
May 02, 2012 04:48 PM|LINK
Create an extension to Html.TextBoxFor that takes a bool for editable or not.
Follow the code here: http://www.aspnetwiki.com/page:creating-custom-html-helpers
You could write similar extensions for other input types.
Darrell Norton's Blog
Please click "Mark as Answer" if this helped you.
Rion William...
All-Star
27580 Points
4561 Posts
Re: ReadOnly for MVC Razor Form
May 02, 2012 04:48 PM|LINK
You should be able to use a jQuery solution to set all of the elements within your form to readonly or disabled.
@Html.Hidden("DisableYourControls",Model.ShouldFormsBeDisabled); <script type='text/javascript'> $(document).ready(function() { if($("#DisableYourControls").val() == true) { $('*','form').attr('disabled','disabled').attr('readonly','readonly'); } }); </script>Alternatively - you could write an extension to pass an additional parameter to your Inputs (or Form) to set them as disabled or readonly based on your Model's value. (Edit: Much like the previous suggestion from DarrellNorton)
NickKA
Member
115 Points
243 Posts
Re: ReadOnly for MVC Razor Form
May 02, 2012 04:53 PM|LINK
They are: Html.CheckBoxfor, Html.Telerik().IntegerTextBoxFor, Html.Telerik().DatePickerFor, Html.DropDownListFor, etc.
The only <input> is the submit button. I not only want to disable the submit button, I want the user to not be able to select a new date, input data into a textbox, and dropdown and see any selections in a dropdown listbox. This is the very definition of ReadOnly.
Any, again, I have 40 controls and want to do this with as little changes as possible.
NickKA
Member
115 Points
243 Posts
Re: ReadOnly for MVC Razor Form
May 02, 2012 06:17 PM|LINK
Rion,
I'm trying to get your idea to work. First, I could not use the * wildcard or the CSS styles would not display properly. Now I am attempting to just disable those controls of type input using:
$(document).ready(function () { if ($("#ReadOnly").val() == "True") { $('input', 'form').attr('disabled','disabled').attr('readonly', 'readonly'); } });The controls appear to be disabled but when I click on one of the Telerik controls, I get a javascript error from telerik.textbox.min.js: htmlfile: Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept focus.
Is there another attribute that I could set that would prevent his exception?
NickKA
Member
115 Points
243 Posts
Re: ReadOnly for MVC Razor Form
May 02, 2012 06:34 PM|LINK
I got everything to work as expected except the checkbox. Here is what I have used so far:
$(document).ready(function () { if ($("#ReadOnly").val() == "True") { $('input', 'form').attr('readonly', true); $('select', 'form').attr('disabled', true).attr('readonly', true); } });Now, how do I handle the checkbox, which is also an input?
NickKA
Member
115 Points
243 Posts
Re: ReadOnly for MVC Razor Form
May 02, 2012 10:00 PM|LINK
I finally got everthing working the way it should.
The Telerik controls did not like both disabled and readonly, they only wanted readonly.
The regular HTML select controls wanted both disabled and readonly.
The Telerik DatePicker control required an entirely different approach.
Here is the final:
$(document).ready(function () { if ($("#ReadOnly").val() == "True") { $('input', 'form').attr('readonly', true); $('select', 'form').attr('disabled', true).attr('readonly', true); } });if ($("#ReadOnly").val() == "True") { $('#chkAllowAllocation').attr('disabled', true).attr('readonly', true); $('#chkPropertyType').attr('disabled', true).attr('readonly', true); $('#chkLien').attr('disabled', true).attr('readonly', true); $('#chkState').attr('disabled', true).attr('readonly', true); $('#chkOccupancy').attr('disabled', true).attr('readonly', true); $('#chkLoanType').attr('disabled', true).attr('readonly', true); $('#chkPurpose').attr('disabled', true).attr('readonly', true); $('#chkRefi').attr('disabled', true).attr('readonly', true); $('#chkServicing').attr('disabled', true).attr('readonly', true); $('#dpStartDate').find('.t-icon').hide(); $('#dpExpireDate').find('.t-icon').hide(); }