如何在kendo ui中添加唯一的用户名并在此插入重复的用户名后显示警报或消息

时间:2018-12-20 18:28:56

标签: model-view-controller kendo-grid kendo-asp.net-mvc

我想使用kendo ui在asp.net mvc中管理用户,我需要kendo ui不要创建重复的用户名,并显示错误消息“用户名重复”

这是我要创建的动作

function RefreshIndividual(z,x, y) {
            var index= z+'-'+x+'-'+y;
            var index2= z+'/'+x+'/'+(-y-1);
            updateTimes[index] = new Date().getTime();
            console.log(index,'t'+updateTimes[index]);
            Source.tileCache.remove(index2);
            Source.changed();

        }

预先感谢您的帮助

1 个答案:

答案 0 :(得分:0)

我在您的其他帖子中给您发送了解决方案(请参阅here)。但是,这是使用kendo CLIENT网格处理服务器端错误的方法。其中一些步骤可以更改。例如,您可以弹出警报,而不是在编辑器模板上显示错误。

1)在操作中添加模型状态错误:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddNewCountry([DataSourceRequest]DataSourceRequest request, CountryViewModel c,int countryId)
{
    if (countryService.UserExists(c.UserName) // You need to code this
    {
        ModelState.AddModelError("UserName", "User name already exists.");
    }

    if (c != null && ModelState.IsValid)
    {
        countryService.Create(c);
    }
    return Json(new[] { c }.ToDataSourceResult(request, ModelState));
}
  1. 处理数据源上的错误事件:

@(Html.Kendo().Grid<OrderDetailViewModel>()
    .Name("orderDetailsGrid")

    /* Not relevant grid setup code... */

    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(builder => builder.Url("/api/CustomerOrderDetails/GetOrderDetails/" + Model.OrderId).Type(HttpVerbs.Get))
        .Create(builder => builder.Url("/api/CustomerOrderDetails/CreateOrderDetail/" + Model.OrderId).Type(HttpVerbs.Put))
        .Update(builder => builder.Url("/api/CustomerOrderDetails/UpdateOrderDetail").Type(HttpVerbs.Post))
        .Destroy(builder => builder.Url("/api/CustomerOrderDetails/DeleteOrderDetail").Type(HttpVerbs.Delete))
        .Model(model => {
            model.Id(x => x.OrderDetailId);
            model.Field(m => m.OrderDetailId).DefaultValue(0);
        })
        .Events(events =>  events.Error("OrderDetails_Error"))
    ))

3)将错误的占位符添加到编辑器模板中:

<ul class="errors"></ul>

4)设置一个剑道模板来处理错误:

<script type="text/x-kendo-template" id="orderDetailsValidationMessageTemplate">
    # if (messages.length) { #
        <li>#=field#
            <ul>
                # for (var i = 0; i < messages.length; ++i) { #
                    <li>#= messages[i] #</li>
                # } #
            </ul>
        </li>
    # } #
</script>

  1. 编写js错误处理程序,它将查看返回的服务器错误并将其格式化为可在编辑器页面上显示的模板:

OrderDetails_Error = function(args) {
    if (args.errors) {
        var grid = $("#orderDetailsGrid").data("kendoGrid");
        var validationTemplate = kendo.template($("#orderDetailsValidationMessageTemplate").html());
        grid.one("dataBinding", function(e) {
            e.preventDefault();

            $.each(args.errors, function(propertyName) {
                // take the template and insert it into the placeholder
                var renderedTemplate = validationTemplate({ field: propertyName, messages: this.errors });
                grid.editable.element.find(".errors").append(renderedTemplate);
            });
        });
    }
};