What's this?

You are currently reading Custom MVC Numeric EditorTemplate at thirstycrow.

meta

Custom MVC Numeric EditorTemplate

June 15th, 2011 Comments Off

For a project I’m working on now I wanted a numeric editor, something that would only allow input of digits. I found a jQuery numeric plugin that does the job. I also created a custom EditorTemplate for both decimal and int data types. For the int EditorTemplateyou have to name the file ‘Int32.cshtml’.

@model System.Int32?
@Html.TextBox("",
    (Model.HasValue) ? ViewData.TemplateInfo.FormattedModelValue : "",
    new { data_integer = true, @style = "width:90px;" })

The decimal template has the same code except the ‘data-’ attribute is data_decimal. Then in $(document).ready(function () {} I included the following code taken from the plugin template example, modified to utilize the ‘data-’ attribs that I generated in the templates.

    $(":input[data-decimal]").numeric();
    $(":input[data-integer]").numeric(false, function () { alert("Integers only"); this.value = ""; this.focus(); });
    $(":input[data-positivedecimal]").numeric({ negative: false }, function () { alert("No negative values"); this.value = ""; this.focus(); });
    $(":input[data-positiveinteger]").numeric({ decimal: false, negative: false }, function () { alert("Positive integers only"); this.value = ""; this.focus(); });
    $("#remove").click(
		function (e) {
		    e.preventDefault();
		    $(".numeric,.integer,.positive").removeNumeric();
		}
	);

Comments are closed.