Infragistics的jQuery编辑器上手教程-控件新闻-慧都网

Infragistics的jQuery编辑器上手教程

原创|其它|编辑：郝浩|2012-09-03 16:19:54.000|阅读 337 次

概述：Infragistics的jQuery包中提供了一系列的编辑器部件，一般用来收集用户输入的信息，并验证过滤用户输入，它作为基础功能在各种应用程序中经常被使用。慧都这次为您带来关于他们的详细使用教程和一些使用技巧，尽可能的帮助你们快速上手Infragistics的两大 jQuery编辑器产品：ASP.NET Editors 和 XAML Inputs，他们都在NetAdvantage Ultimate中.

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

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

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

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

入门

资源

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

            $.ig.loader({
    scriptPath: 

                "//cdn-na.infragistics.com/jquery/20121/2049/js",
    cssPath: 

                &quot;//cdn-na.infragistics.com/jquery/20121/2049/css",
    resources: "igEditors,igValidator"
});

            

或使用MVC

            @using Infragistics.Web.Mvc;
@(Html.Infragistics().Loader()
    .CssPath(

                "//cdn-na.infragistics.com/jquery/20121/2049/css")
    .ScriptPath(

                "//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 date2 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."
    });
});

            