AutoComplete Textbox in MVC using jQuery

As previous we have seen autocomplete in asp.net using jquery now we will learn that how to implement autocomplete functionality in mvc using jquery. For more understated we need to learn Entity Framework.
Database:-

  

Creating an Entity Data Model:-

Step1:- After creating an application we click on the right click on model and chose ADO.NET Entity Data Model





Step2: -Then the Entity Data Model Wizard will open up where we select EF Designer database option.


Step4-We make a database connection (connection string) and then click Test Connection to make sure all settings are correct.



Step5: - The Connection String is generated



Step6: We get all tables from database and we select our table


Step7: -Now we have the Entity Data Model ready with the record Table 




Controller:-

using MVCCODESOLUTIONS.Models;
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Mail;
using System.Web;
using System.Web.Mvc;



namespace MVCCODESOLUTIONS.Controllers
{
    public class HomeController : Controller
    {
        CodeSolutionEntities entities = new CodeSolutionEntities();

        public ActionResult Index()
        {
            return View();
        }


        [HttpPost]
        public JsonResult AutoComplete(string prefix)

        {

            CodeSolutionEntities entities = new CodeSolutionEntities();
            var fetchname = (from record in entities.records
                             where record.Name.StartsWith(prefix)
                             select new
                             {
                                 label = record.Name,
                               
                             }).ToList();

            return Json(fetchname);
        }


    }
}



    View:-
@{
    Layout = null;
}



<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"
          rel="Stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("#txtname").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/Home/AutoComplete/',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data, function (item) {
                                return item;
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
            
                minLength: 1
            });
        });
    </script>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <input type="text" id="txtname" name="name" />

    }
</body>
</html>

Out-Put:-



AutoComplete Textbox in MVC using jQuery AutoComplete Textbox in MVC using jQuery Reviewed by NEERAJ SRIVASTAVA on 5:22:00 PM Rating: 5

No comments:

Powered by Blogger.