Available in the Full Version
Editors - Mask Editor MVC
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
Submitted Values
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This ASP.NET MVC sample demonstrates the basic use of the igMaskEditor.
Code View
Copy to Clipboard
@using Infragistics.Web.Mvc
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<style>
h3 {
font-size:20px;
margin-bottom:20px;
}
.group-fields {
margin-bottom: 10px;
}
.group-fields label {
display: block;
line-height:18px;
}
.group-fields .ui-igedit-container {
width: 300px;
}
form {
float: left;
width: 500px;
min-width: 500px;
}
.submit-container
{
top: 0px;
right: 0px;
min-width: 400px;
float: right;
font-size: 18px;
}
.submit-container h3 {
display: none;
}
.submit-container p
{
font-size: 16px;
}
.submit-container p.result {
margin-top: 10px;
margin-bottom: 45px;
}
.submit-container span.result-name {
font-weight: bold;
text-transform: capitalize;
}
.clear {
clear: both;
}
@@media screen and (max-width:360px) {
.group-fields .ui-igedit-container {
width: 250px;
}
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<form id="form1">
<h3>Register your Infragistics Ultimate bundle</h3>
<div class="group-fields">
<label for="serialNumber">Serial Number</label>
@(Html.Infragistics().MaskEditor()
.ID("serialNumber")
.InputName("serialNumber")
.InputMask("AAAA-AAAA-AAAA-AAAA")
.DataMode(MaskEditorDataMode.RawTextWithLiterals)
.Render()
)
</div>
<div class="group-fields">
<label for="zipCode">Zip Code</label>
@(Html.Infragistics().MaskEditor()
.ID("zipCode")
.InputName("zipCode")
.InputMask("00000")
.DataMode(MaskEditorDataMode.AllText)
.Render()
)
</div>
<div class="group-fields">
<label for="phone">Phone Number</label>
@(Html.Infragistics().MaskEditor()
.ID("phone")
.InputName("phone")
.InputMask("(999) 999-999")
.DataMode(MaskEditorDataMode.RawText)
.Render()
)
</div>
<input id="btn" type="button" value="Clear" />
<input type="submit" id="submitBtn" value="Submit" />
@(Html.Infragistics().Validator().ID("form1")
.Fields(x =>
{
x.Field().ID("serialNumber").Required(true);
x.Field().ID("zipCode").Required(true);
}).Render()
)
</form>
<div class="submit-container">
<h3>Submitted Values</h3>
<div class="submit-container">
<p id="results"></p>
</div>
</div>
<div class="clear"></div>
<script>
$(function () {
$("#form1").submit(function (event) {
var submittedValues = $("#form1").serializeArray(), submitHTML = "";
$("#results").empty();
if ($("#form1").igValidator("validate")) {
$(".submit-container h3").show();
for (var i = 0 ; i < submittedValues.length; i++) {
$("#results").append("<p class='result'><span class='result-name'>" + submittedValues[i].name.replace(/([A-Z])/g, ' $1') + ":</span> " + submittedValues[i].value + "</p>");
}
}
return false;
});
$("#btn").click(function () {
$("#serialNumber").igMaskEditor("value", "");
$("#zipCode").igMaskEditor("value", "");
$("#phone").igMaskEditor("value", "");
});
});
</script>
</body>
</html>
using IgniteUI.SamplesBrowser.Models.DataAnnotations;
using IgniteUI.SamplesBrowser.Models.Northwind;
using IgniteUI.SamplesBrowser.Models.Repositories;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace IgniteUI.SamplesBrowser.Controllers
{
public class EditorsController : Controller
{
//
// GET: /Editors/
[ActionName("data-annotation-validation")]
public ActionResult DataAnnotationValidation()
{
ValidatedOrder model = new ValidatedOrder();
ViewData["message"] = String.Empty;
model.ShipMethodList = this.GetShipMethods();
return View("data-annotation-validation", model);
}
[HttpPost]
[ActionName("data-annotation-validation")]
public ActionResult DataAnnotationValidation(ValidatedOrder model)
{
if (ModelState.IsValid)
{
ViewData["message"] = "Product saved successfully";
}
model.ShipMethodList = this.GetShipMethods();
return View("data-annotation-validation", model);
}
[ActionName("load-and-save-form-values")]
public ActionResult EditProduct()
{
Product product = RepositoryFactory.GetProductRepository().Get().First();
ViewData["message"] = String.Empty;
return View("load-and-save-form-values", product);
}
[ActionName("text-editor-mvc")]
public ActionResult TextEditor()
{
return View();
}
[ActionName("date-editor-mvc")]
public ActionResult DateEditor()
{
return View();
}
[ActionName("numeric-editor-mvc")]
public ActionResult NumericEditor()
{
return View();
}
[ActionName("mask-editor-mvc")]
public ActionResult MaskEditor()
{
return View();
}
public List<SelectListItem> GetShipMethods()
{
List<SelectListItem> selectList = new List<SelectListItem>()
{
new SelectListItem { Text = "Standard", Value = "Standard" },
new SelectListItem { Text = "One Day", Value = "OneDay" },
new SelectListItem { Text = "Two Day", Value = "TwoDay" },
new SelectListItem { Text = "International", Value = "International" }
};
return selectList;
}
}
}