C#.net

Search functionality in ASP.NET MVC with Ajax

In this tutorial will teach the Search Functionality In ASP.NET MVC with Ajax step by step.How to search the records in asp.net mvc with ajax this tutorial help you to learn.

Database First Approach

First Step create the database on Microsoft sqlserver database.

In this example we have created the database which name is bank inside the database create the table name is account

Account table consist of the following columns accno,accname,balance

After done the stuff.open up the .net  application and create the new mvc project.

First step generated the Models.how to generated  the models i attached the video tutorial below.Model which is interact with database.

After that inside the controllers folder there will be the controller which name is HomeController.

Paste the Following Code

using AccountBalance.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AccountBalance.Controllers
{
    public class HomeController : Controller
    {

        bankEntities dc = new bankEntities();
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public JsonResult Getid(String Id)
        {
            var std = dc.accounts.Where(a => a.accno == Id).FirstOrDefault();
            return Json(std, JsonRequestBehavior.AllowGet);
        }

    }
}

After that Create the Layouts. Layout is inside the shared folder

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @RenderSection("styles", false)
</head>
<body>

    <div class="container-fluid bg-2 text-center">
        @RenderBody()
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Index.cshtml

@{
    ViewBag.Title = "Index";
}

<div class="row">
    <div class="col-sm-8">
        @using (Html.BeginForm("Index", "home", FormMethod.Post, new { id = "popupForm" }))
        {

            <table class="table table-bordered">
                <h2> Bank Balance Checking  </h2>
                <tr>
                    <th>Account No</th>
                    <th>Account Holder Name</th>
                    <th>Balance</th>
                </tr>
                <tr align="center">
                    <td>
                        <input type="text" class="form-control" placeholder="Account No" id="accno" name="accno" size="50px">

                    </td>

                    <td>
                        <input type="text" class="form-control" id="accname" size="25px" name="accname"
                               placeholder="price" disabled>
                    </td>
                    <td>
                        <input type="text" class="form-control" id="balance" name="balance"
                               placeholder="qty" size="25px" required>
                    </td>


                </tr>
            </table>
        }

    </div>

</div>
<hr />


@Scripts.Render("~/bundles/jquery")

@section scripts{

    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>


    <script>
        getAccountcode();



        function getAccountcode() {
            $("#accno").empty();
            $("#accno").keyup(function (e) {
                var q = $("#accno").val();
                if ($('#accno').val().length === 0) {
                    $.alert({
                        title: 'Error!',
                        content: "Please Enter the Account",
                        type: 'red',
                        autoClose: 'ok|2000'
                    });
                    return false;
                }
                $.ajax({
                    type: "POST",
                    url: '/home/Getid?id=' + $("#accno").val(),
                    dataType: "JSON",
                    success: function (data) {
                        console.log(data);
                        $('#accname').val(data.accname);
                        $('#balance').val(data.balance);
                    },
                    error: function (xhr, status, error) {
                        //  alert(xhr,status);
                    }
                });
                return true;
            });
        }
    </script>
}

@section styles{
    <link href="~/Content/bootstrap.css" rel="stylesheet" />

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
}

i have attached the video link below. which will do this tutorials step by step

 

 

 

admin

Recent Posts

Build Crud API with Laravel 12

In this tutorial will teach  Laravel 12 CRUD API  by step. Laravel  10 CRUD Application …

6 hours ago

laravel 12 image upload tutorial

In this lesson we talk about laravel 12 image uploading and display the image step…

4 days ago

Laravel 12 CRUD Application

In this tutorial will teach Laravel 12 CRUD Application step by step. Laravel  12 CRUD…

1 week ago

Conditional Statements in Python

Conditional statements in Python allow us to control the flow of execution based on conditions.…

1 month ago

Java Beans

A Java Bean is a reusable software component that follows a specific set of conventions.…

1 month ago

Java String Methods

Java provides a rich set of built-in methods for handling String operations efficiently. Since strings…

1 month ago