TextBox masking in asp.net mvc?

I need to input a date in a form in my mvc app. What’s the best way to do this?

A) Just use a text box and let the service layer validate it?

B) Use a masking script? If so, what’s the best?

C) Use the provided datepicker? Not sure how here…

D) A and B or
E) A and C

You can either mask it or use a datepicker tool, but it is always a good idea to validate anything server side b4 inserting it into your database.

and IMHO i would use jQuery if I where you and these plugins:

Masked Edit
DatePicker

I would go for the date picker as it will make sure the user enters a correct date and not something like: 99/99/9999.

I hope this helps

Yeah, I"ve spent the last couple of hours reading on these. I am lost however. As a minimalist, I’ve never user javascript or jquery. I even delete the scripts folder in a new mvc app project.

SOOO!

Would you mind stepping me through setting something like this up? I can start a new project and grab the Scripts folder from that. Assume something like the following exists on the View:


<tr>
<td class=“alt2”> Last Post </td>
<td class=“alt1”> <%=Html.TextBox(“LastPost”, Model.LastPost, New With {.size = “20”})%><%=Html.ValidationMessage(“LastPost”, “*”)%> </td>
</tr>

also…in the related binder, I have the following…


submission.LastPost =
CType(.Form(“LastPost”), Nullable(Of Date))

It works if the date is valid, but if cannot be converted, it balks. (There’s also a null and IsDate check in the service layer’s Validate function).

What jquery file do I <link> in?
What code do I need to add in a <script> block to hook a mask up and make it work?

Sorry for this, but I have a lot of things in this app that depend on dates. I really need this working.

I have just recently started using MVC, so im not that clued up on the way it works.

Ok, for the Masked edit script, ull need to add 2 scripts to your <head>:


<script src="/content/js/jquery.js" type="text/javascript"></script>
<script src="/content/js/jquery.maskedinput.js" type="text/javascript"></script>

Your html should render as a textbox with id=“LastPost”

Then use the following code b4 the </body> tag to implement it:


<script type="text/javascript">
jQuery(function($){
   $("#LastPost").mask("99/99/9999");
});
</script>

the # in the code above looks for ID=“LastPost”, if it was $(“.LastPost”) it will find elements with the class LastPost.

I hope this helps

Ok, so far so good. I got that part working. Now I need some info on this in general. The datetime in the db has entries like this (7/5/2009 2:55:22 AM). While I can make a mask for this, it doesn’t take into account two-digit vs one-digit values (07 vs 7 for month). Now, I read the page on this and saw in the sample phone mask they used a ? at one point. Is this a conditional? How can I allow both single and two-digit values?

standard format is 07/05/2009. If you insert that into the db it will still be 7/5/2009. That is the format in which your database saves it. To display it u can use dateFromDb.ToString(“MM/dd/yyyy”);

Ah well…I need the user to be able to input any valid date AND time. It has to be specific to the second. For example, they should be able to type in “1:23 July 4, 2009” and have it work as well.

So here’s what I decided to do…

My models have the property set to Nullable(Of Date).
My binders now surround the assignment with a try-catch:

Try
submission.LastPost = CType(.Form(“LastPost”), Nullable(Of Date))
Catch
submission.LastPost = Nothing
End Try

And my validators test IsDate and Nothing anyway. So basically, there’s no way an invalid date will get in. If they type in something that doesn’t convert, it’s set to nothing and ignored.

Funny, as a minimalist I use the everloving daylights out of jquery.

+1

Heh. Seeing as this issue is moot I’ll continue with a little chat.

Regarding the minimalist thing…if it were a server side thing, I probably wouldn’t have a problem with it. One of the reasons I moved to .net over php is that everything get’s compiled, making it smaller and faster. I also like the type safety.

However, my design strategies sometimes do not comply with typical IT philosophies. For example, the jquery thing. I severely dislike using anything at all that might even remotely pose a problem on client systems that might have some feature disbled. Fancy wysiwyg editors? Not me. Just give me a textarea. At least have buttons to enter bbcodes? Nope. In addition. I try to keep my layouts and per-page html as slim as possible, with as little dependancy on css as possible. If the resulting stylesheet is small enough (20 small classes or less), I put it in the head instead of link tag. The reason is because I’ve had people ask about odd displays before, only to remind them to clear their cache, and you know what? There’s more idiots out there than smart people, and most of the time, they don’t know what the word ‘cache’ even means. Oh…and images…I try to keep them under 10k and as few as possible to boost load times.

Technology is moving 4ward and you will have to start worrying less and less about users not having JS enabled. People are starting to move away from OS and onto the web, so it should be as interactive as possible. We are in the Web 2.0 revolution. jQuery is also being shipped with VS 2010.

Im not saying 4get about the users without js enabled, make your site work with no JS, then add JS on top of that which will increase the user experience on your site if they have JS enabled, which 99% of ppl will.

You would not want to be left behind with a “static” website while others or ajax/js based which makes them more interactive per say.

Try disabling JS, you will not even be able to login into facebook. So I say, dnt be worryied about using JS, it is becoming a very important part of the web for 2day and the future.

Just my 2c. Laters

What nightstalker said.

I would also argue that using something like jquery actually strips down and simplifies your javascript. Let’s take a scenario like this:

The requirement is to attach a google analyitics click tracking call to each offsite hyperlink.

Solutions:

a) Raw JS: you will need to cover different browser DOM models, especially with regards to events. You don’t want to overwrite other onclick handlers, do you? Probaby a few dozen lines of code just to handle event attachment without even getting into writing actual logic.

b) jQuery: you can do this in a single line of code. Period. And it will work in any modern browser.

I think the two major factors for me is that:

  1. At this point in life (age 41, retired) I do it as a hobby for me and my immediate friends. As long as things meet our needs, then it’s all good. I don’t create websites and then advertise them on the web.

  2. Currently, we’re running a feww zetaboard for our little group. There’s four of us. It’s horribly slow and buggy though. We tried using vbulletin on my own server, but it’s huge in terms of css, js, and image use. My little 368 upstream couldn’t handle it.

You guys both have excellent points, but for me, they kind of don’t apply. I have no need for link tracking, ads, rotating banners, wysiwyg things, or even the usual visual fluff that goes into a site. To tell you the truth, I even considered writing a desktop app for it instead, and enabling the TCP protocals on my sql server, and I may still do that as an alternative.

I like the web. But like most things, it a mixed bag for me.

Just look up unobtrusive javascript. A textarea can be a textarea with javascript off and a fancy editor with it on. There no need to let javascript lock up your pages. jQuery brings with it a certain confidence in that it will work in most browsers and as has been said it’s simple to use.

As with anything it can be mis-used. I hate pages with google analytics. A necessary evil perhaps but a major slow down on a page loading. Sometimes turning off javascript on a site can be a breath of fresh air. The more bad script writers out their perhaps the more people will turn it off.

I can understand you not wanting to make use of jquery but I recommend you look at it in tandem with unobtrusive scripting methods. You might like it a lot mroe than you think.

Exactly. Moreover, you can use the google API loader to offload the bandwidth from your server.