Infragistics的jQuery包中提供了一系列的编辑器部件，一般用来收集用户输入的信息，并验证过滤用户输入，它作为基础功能在各种应用程序中经常被使用。

慧都这次为您带来关于他们的详细使用教程和一些使用技巧，尽可能的帮助你们快速上手Infragistics的两大 jQuery编辑器产品：ASP.NET Editors 和 XAML Inputs，他们都在NetAdvantage Ultimate中。

下图是在开始之前您需要了解的，一些关于编辑器的基础介绍，在这里不多说了。

入门

---

资源

最基本的要添加的资源是编辑器和验证器：

$.ig.loader({     scriptPath: "http://cdn-na.infragistics.com/jquery/20121/2049/js",     cssPath: "http://cdn-na.infragistics.com/jquery/20121/2049/css",     resources: "igEditors,igValidator" });

或使用MVC

@using Infragistics.Web.Mvc; @(Html.Infragistics().Loader()     .CssPath( "http://cdn-na.infragistics.com/jquery/20121/2049/css")     .ScriptPath( "http://cdn-na.infragistics.com/jquery/20121/2049/js")     .Resources("igEditors,igValidator").Render())

编辑器

在执行脚本编辑器时，你必须提供的实际标记（可以是一个容器元素或转换后的实际输入（S）），例如：

<input id="date"/>

然后你就可以初始化，如：

$("#date2").igDatePicker({     inputName: 'date',     required: true,     validatorOptions: { onsubmit: true } });

或使用MVC，自动创建的所有标记

@(Html.Infragistics().DateTimeEditor().InputName("date") .ValidatorOptions(validate => validate.OnSubmit(true)) .Required(true).Render())

获取值

获取值时一般建议采用创建新值，以区分开实际值，例如：

[HttpPost] public ActionResult Update(DateTime? date, DateTime? date2) {     /* use date and date2 here - e.g. perform additional checks        and save the input to database, etc. */     ViewBag.Message = "Entered date: " + date.ToString() +         ", and date2: "  + date2.ToString();       //return to the same view with the new message     var path = Request.UrlReferrer.AbsolutePath;     return View(path != "/" ? path.Split('/').Last() : "Index"); }

提高页面的输入体验

---

通常情况下，输入验证的代码为：

form action="@Url.Action("Index")" method="post">     <fieldset>         <legend>Editorslegend>             <label>First  name:label>             <input name="name"/>             <br/>             <label>Phone: label>             <input name="phone"/>             <br/>             <label>Email: label>             <input name="email"/>             <br/>             <label>Description: label>             <br/>             <div id="descr">div>     fieldset>     <input type="submit" value="Send"> <input type="reset"> form>

最后的效果是这样：

但是为了更好地利用HTML5，实现更好地页面体验，可以这样：

$.ig.loader(function () {     $("input[name='name']").igMaskEditor({         inputMask: ">L>LL????????????????",         validatorOptions: {}     });       $("input[name='phone']").igMaskEditor({         inputMask: "(000)0000 999",         validatorOptions: {}     });       $("input[name='email']").igTextEditor();       $("#descr").igTextEditor({         textMode: "multiline",         nullText: "Leave a note."     }); });

不需要改变太多，但是页面体验将会大幅度提高，效果如下：

通过增加一个校验器选项“validatorOptions：{}”，便可以完成对输入信息的验证了：

---