IntroductionSo I've been having a bit of a look at ASP.NET MVC as part of the public facing section of the Silverlight project I am working on. I've been able to get running the main part but wanted to neaten up the validation. I wanted to be able to add a TextBox on my form that would only accept a number. From what I could see jquery was the way to go. (If you have a look
here you can see an example of how the numeric entry works.) But that raised a number of questions:
- How to use jQuery?
- How to add scripts?
- How to add the TextBox?
- How to specify the class of a TextBox?
Using Google it took quite a bit of time to track down all the pieces to make this work. As a result, I've written this one post that hopefully brings it together.
Making A Head Content Available In order to use jQuery, you need to be able to add some scripts to the page generated by the view. This really needs to be in the head section, but on my view pages, there was no where to add it. I had an asp:content tag for TitleContent and one for MainContent but nothing where I could put the script.
In the Site.Master page I modified the head section from this:
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
To this:
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server" />
</head>
See the ContentPlaceHolder? That will allow me to define a head section in my view pages.
Adding The ScriptsNow that I have a ContentPlaceHolder, I can edit my view pages to add scripts. Just below the Page command I can add the code that will appear in the head section of the page.
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Construction.Service.Claim>" %>
<asp:Content ID="Scripts" ContentPlaceHolderID="head" runat="server" >
<script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/Scripts/jquery.numeric.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() { $("input.numeric").numeric(); });
</script>
</asp:Content>
Few things to note here:
- Everything in the asp:Content ID="Scripts" section will appear in the head section on the generated page. Just what I wanted.
- In the scripts I've added reference to "/Scripts/jquery-1.3.2.min.js". This is the jQuery library that ships with ASP.NET MVC V1.0.
- The next line is for "/Scripts/jquery.numeric.pack.js". This tells the page that we want to use the jquery numeric library which can be found here. I downloaded this file and then added it to the scripts section of my project. This line in my head section references that file. That link shows the jQuery numeric usage. So once you have this basic one going, you can refer back to that link to see how you might extend your options.
- The next part is the 'ready' function for jQuery. I'm new to jQuery but from what I can work out, this is the function where you put all your stuff to prepare things for later use. In this case we are telling the system that things identified as 'input.numeric' will be numeric. The 'input' simply refers to the fact this will be associated to an input textbox. The '.numeric' indicates that this will be used by any input control that is of *class* 'numeric'. We'll see how this works next.
Making A TextBox NumericThe last part is to create a TextBox in the view that needs to be numeric entry only. In my case I used code like this:
<%= Html.TextBox("ApprovedPercentage, ViewData.Model.ApprovedPercentage,new { size = "5" ,@class="numeric" })%>This is basically just creating a textbox on the form. The magic that pulls all this together is the clause:
This links it back to the input.numeric reference in the script and the textbox will be limited to a numeric. You can have as many textboxes on the form as you require and provided you include the '@class="numeric" ' part, they will all be numeric entry only.
You can set the textboxes up by id if you want. So in the ready function you would have this:
$(document).ready(function() { $("input#approvedpercentage").numeric(); $("input#approvedamount").numeric(); });
In this case, the # means treat the following word as the id of the textbox, not the class. You have to specify each one.
Then on the textbox you would have:
<%= Html.TextBox("ApprovedPercentage, ViewData.Model.ApprovedPercentage,new { size = "5" ,id="approvedpercentage" })%> Note, I didn't set the @class this time, I set the id.
ConclusionIts actually pretty easy to get the numeric textbox working once you know all the pieces. Hopefully, someone finds this useful!
