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

    <meta name="viewport" content="width=device-width" />
    @using (Html.BeginForm()) 
        <div class="form-horizontal">
            <hr />
            <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 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 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 class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
        @Html.ActionLink("Back to List", "Index")

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)

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:

          .HtmlAttributes(new { style = "width:450px" })
          .Placeholder("Type a ship name")
          .Template("#= OrderID # | For: #= ShipName #, #= ShipCountry #")
          .DataSource(source => {
                  .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

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?

Avatar of undefined
Last Comment
David Johnson, CD

8/22/2022 - Mon
David Johnson, CD

View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy