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

Question

我想使用 kendo ui 来管理 asp.net mvc 中的用户，我需要 kendo ui 不要创建重复的用户名并显示 "the user name is duplicate"

的错误消息

这是我创建的动作

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddNewCountry([DataSourceRequest]DataSourceRequest request, CountryViewModel c,int countryId)
{
    if (c != null && ModelState.IsValid)
    {
        countryService.Create(c);
    }
    return Json(new[] { c }.ToDataSourceResult(request, ModelState));
}

在此先感谢您的帮助

Answer 1

我在您的另一个 post 中向您发送了一个解决方案（参见 here）。但这是使用 kendo 客户端网格处理服务器端错误的方法。其中一些步骤可以更改。例如，您可以弹出警报而不是在编辑器模板上显示错误。

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));
}

处理数据源上的错误事件：

@(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) 设置一个 kendo 模板来处理错误：

<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>

编写 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);
            });
        });
    }
};

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

how to add unique username in kendo ui and show alert or message after this insert duplicate username

model-view-controller

kendo-grid

kendo-asp.net-mvc