Link to home
Create AccountLog in
Avatar of maqskywalker
maqskywalker

asked on

apppling validation to autocomplete

Hi experts,

I have a asp.net mvc5 application. Using C#, Razor, Entity Framework 6 Database model.

I have a form page called Create.cshtml:

My code looks like this:


@model MVCDemo.Models.User

@{
    ViewBag.Title = "Create";
}

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Create</title>
</head>
<body>
    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()
        
        <div class="form-horizontal">
            <h4>User</h4>
            <hr />
            @Html.ValidationSummary(true)
            <div class="form-group">
                @Html.LabelFor(model => model.FullName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.FullName)
                    @Html.ValidationMessageFor(model => model.FullName)
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.UserName)
                    @Html.ValidationMessageFor(model => model.UserName)
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Password)
                    @Html.ValidationMessageFor(model => model.Password)
                </div>
            </div>
    
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    }
    
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>
</body>
</html>

Open in new window



So in my form I have a textbox where I type in username.
The snippet from my page above that i'm talking about is this snippet:


            <div class="form-group">
                @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.UserName)
                    @Html.ValidationMessageFor(model => model.UserName)
                </div>
            </div>

So right now on my form when I type a username in this text box. I have set up remote validation on this textbox.
So when this @Html.ValidationMessageFor(model => model.UserName)    validation runs after I type in a user name, the validation checks my sql server table for that column.  If the same username already exists in my table then the a message that says "user already exists" appears on my page in red font , right next to this textbox.

So my validation on this textbox works just fine.

So here is my question.

I want to replace this username textbox with a Telerik UI for ASP.NET MVC AutoComplete control.
This is the autocomplete I'm talking about:  http://demos.telerik.com/aspnet-mvc/autocomplete/virtualization

So on my page I'm going to replace this:

@Html.EditorFor(model => model.UserName)


with something like this:

    @(Html.Kendo().AutoComplete()
          .Name("UsersAC")
          .DataTextField("UserName")
          .MinLength(3)
          .HtmlAttributes(new { style = "width:450px" })
          .Placeholder("Type a ship name")
          .Template("#= OrderID # | For: #= ShipName #, #= ShipCountry #")
          .DataSource(source => {
              source.Custom()
                  .ServerFiltering(true)
                  .ServerPaging(true)
                  .Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
                  .Transport(transport =>
                  {
                      transport.Read("Virtualization_Read", "AutoComplete");
                  })
                  .Schema(schema =>
                  {
                      schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                            .Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
                  });
          })
          .Virtual(true)
    )


So if I replace my textbox with this autocomplete does anyone know how I apply this validation @Html.ValidationMessageFor(model => model.UserName)   to my autocomplete?
ASKER CERTIFIED SOLUTION
Avatar of David Johnson, CD
David Johnson, CD
Flag of Canada image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account