Search results

AutoCompleteFor

The AutoCompleteFor control can be rendered by passing values and data from the model. The selected values can be retrieved during form submit using the post method.

In the following sample, AutoCompleteFor control is rendered.

tagHelper
Countries.cs
For.cs
<form method="post">
    <div class="control-wrapper">
        <div id="default" style='padding-top:75px;margin:0 auto;width:250px;'>
            <ejs-autocomplete  id="autocomplete" name="Value" ejs-for="Value" dataSource="ViewBag.data" placeholder="Select a country">
                <e-autocomplete-fields value="Name" ></e-autocomplete-fields>
            </ejs-autocomplete>
            <div id="submitbutton">
                <ejs-button id="submitButton" content="Submit"></ejs-button>
            </div>
        </div>
    </div>
</form>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class Countries
    {
        public string Name { get; set; }
        public string Code { get; set; }
        public string Value { get; set; }
        public List<Countries> CountriesList()
        {
            List<Countries> country = new List<Countries>();
            country.Add(new Countries { Name = "Australia", Code = "AU" });
            country.Add(new Countries { Name = "Bermuda", Code = "BM" });
            country.Add(new Countries { Name = "Canada", Code = "CA" });
            country.Add(new Countries { Name = "Cameroon", Code = "CM" });
            country.Add(new Countries { Name = "Denmark", Code = "DK" });
            country.Add(new Countries { Name = "France", Code = "FR" });
            country.Add(new Countries { Name = "Finland", Code = "FI" });
            country.Add(new Countries { Name = "Germany", Code = "DE" });
            country.Add(new Countries { Name = "Greenland", Code = "GL" });
            country.Add(new Countries { Name = "Hong Kong", Code = "HK" });
            country.Add(new Countries { Name = "India", Code = "IN" });
            country.Add(new Countries { Name = "Italy", Code = "IT" });
            country.Add(new Countries { Name = "Japan", Code = "JP" });
            country.Add(new Countries { Name = "Mexico", Code = "MX" });
            country.Add(new Countries { Name = "Norway", Code = "NO" });
            country.Add(new Countries { Name = "Poland", Code = "PL" });
            country.Add(new Countries { Name = "Switzerland", Code = "CH" });
            country.Add(new Countries { Name = "United Kingdom", Code = "GB" });
            country.Add(new Countries { Name = "United States", Code = "US" });
            return country;
        }
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class AutoCompleteController : Controller
    {
        Countries model = new Countries();
        public ActionResult Index()
        {
            ViewBag.data = new Countries().CountriesList();
            model.Value = "Cameroon";
            return View(model);
        }

        [HttpPost]
        public ActionResult Index(Countries model)
        {
            ViewBag.data = new Countries().CountriesList();
            model.Value = model.Value;
            return View(model);
        }
    }
}

Data Annotation

Data Annotations help us to define the rules to the model classes or properties for data validation and displaying suitable messages to end users.

Data Annotations includes built-in validation attributes for different validation rules, which can be applied to the properties of model class. ASP.NET Framework will automatically enforce these validation rules and display validation messages in the view.

Using value property gets or sets the value of the selected item in the control.

tagHelper
For.cs
<form method="post">
    <div class="control-wrapper">
        <div id="default" style='padding-top:75px;margin:0 auto;width:250px;'>
            <ejs-autocomplete id="EnquiringAboutSelect" ejs-for="EnquiringAboutSelect" name="EnquiringAboutSelect" dataSource="@Model?.EnquiringAboutSelectListItems" floatLabelType="Auto" placeholder="Please Select Enquiring About" popupHeight="230px">
                <e-autocomplete-fields value="Text" ></e-autocomplete-fields>
            </ejs-autocomplete>
            <span asp-validation-for="EnquiringAboutSelect" class="text-danger"></span>
            <div id="submitbutton">
                <ejs-button id="submitButton" content="Submit"></ejs-button>
            </div>
        </div>
    </div>
</form>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class AutoCompleteController : Controller
    {
        public ActionResult Index()
        {
            DataModel model = new DataModel();
            model.EnquiringAboutSelectListItems = new ListItems().getListItems();
            model.EnquiringAboutSelect = "Beacon";
            return View(model);
        }

        [HttpPost]
        public ActionResult Index(DataModel model)
        {
            model.EnquiringAboutSelectListItems = new ListItems().getListItems();
            model.EnquiringAboutSelect = model.EnquiringAboutSelect;
            return View(model);
        }
    }
    public class DataModel
    {
        [Required(ErrorMessage = "The value is Required")]
        public string EnquiringAboutSelect { get; set; }
        public List<ListItems> EnquiringAboutSelectListItems { get; set; }

    }

    public class ListItems
    {
        public string Text { get; set; }
        public string Value { get; set; }
        public List<ListItems> getListItems()
        {
            List<ListItems> items = new List<ListItems>();
            items.Add(new ListItems() { Text = "Aberdeen", Value = "103" });
            items.Add(new ListItems() { Text = "Alexandria", Value = "102" });
            items.Add(new ListItems() { Text = "Albany", Value = "101" });
            items.Add(new ListItems() { Text = "Beacon ", Value = "104" });
            items.Add(new ListItems() { Text = "Brisbane ", Value = "105" });
            return items;
        }
    }
}