Infragistics的jQuery包中提供了一系列的編輯器部件,一般用來收集用戶輸入的信息,并驗證過濾用戶輸入,它作為基礎功能在各種應用程序中經常被使用。
慧都這次為您帶來關于他們的詳細使用教程和一些使用技巧,盡可能的幫助你們快速上手Infragistics的兩大 jQuery編輯器產品:ASP.NET Editors 和 XAML Inputs,他們都在NetAdvantage Ultimate中。
下圖是在開始之前您需要了解的,一些關于編輯器的基礎介紹,在這里不多說了。

入門
資源
最基本的要添加的資源是編輯器和驗證器:
- $.ig.loader({
- scriptPath:
"//cdn-na.infragistics.com/jquery/20121/2049/js",
- cssPath:
"//cdn-na.infragistics.com/jquery/20121/2049/css",
- resources: "igEditors,igValidator"
- });
|
或使用MVC
- @using Infragistics.Web.Mvc;
- @(Html.Infragistics().Loader()
- .CssPath(
"//cdn-na.infragistics.com/jquery/20121/2049/css")
- .ScriptPath(
"//cdn-na.infragistics.com/jquery/20121/2049/js")
- .Resources("igEditors,igValidator").Render())
|
編輯器
在執行腳本編輯器時,你必須提供的實際標記(可以是一個容器元素或轉換后的實際輸入(S)),例如:
然后你就可以初始化,如:
- $("#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:{}”,便可以完成對輸入信息的驗證了:

標簽:
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:本站原創