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.
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.
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
<!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>
@{
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">
}
Have you ever wanted to talk to a friendly, smart robot that helps you with…
DeepSeek AI is becoming a friendly and powerful new tool in the world of artificial…
Do you want to become an expert in Spring Boot CRUD operations? This comprehensive tutorial…
Modern websites must have a navigation bar that is clear and responsive. FlexBox CSS is…
Introduction In this section, we will guide you step by step in the development of an image upload registration system in Java using MySQL and JDBC. In the application, users register…
The Touchable Shop POS (Point of Sale) system is a sophisticated software solution developed using…