Hi nedash,
I have created an example. Refer below sample code.
Step 1: Verify you have Microsoft jQuery Unobtrusive Ajax in your script folder.
If not then install package using the following command in Nuget: Install-Package Microsoft.jQuery.Unobtrusive.Ajax -Version 3.2.3
Step 2: Create Controller, Model and View in your MVC application.
Step 3: Include the script file in your project (used in code).
Step 4: Create Partial view that you want to update in the Ajax.BeginForm submit.
Step 5: Add Ajax.BeginForm and pass Action Name, Controller Name, AjaxOption.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Controller
public class HomeController : Controller
{
NorthwindEntities entities = new NorthwindEntities();
// GET: Home
public ActionResult Index()
{
var Model = entities.Customers.Take(10).ToList();
return View(Model);
}
public ActionResult SearchInfo(string txtname)
{
IEnumerable<Customer> Model = entities.Customers.Where(p => p.ContactName.Contains(txtname)).Take(10).ToList();
return PartialView("_PartialView", Model);
}
}
View
@model IEnumerable<_Ajax_BeginForm.Customer>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.10.2.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
</head>
<body>
<div>
@using (Ajax.BeginForm("SearchInfo", "Home", new AjaxOptions { UpdateTargetId = "divajax", HttpMethod = "Post", InsertionMode = InsertionMode.Replace }))
{
@Html.TextBox("txtname");
<input type="submit" name="btnsearch" value="Search" />
}
<div id="divajax">
@{Html.RenderPartial("_PartialView", Model);}
</div>
</div>
</body>
</html>
_PartialView
@model IEnumerable<_Ajax_BeginForm.Customer>
<table class="table">
<tr>
<th>@Html.DisplayNameFor(model => model.ContactName)</th>
<th>@Html.DisplayNameFor(model => model.Address)</th>
<th>@Html.DisplayNameFor(model => model.City)</th>
<th>@Html.DisplayNameFor(model => model.Country)</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>@Html.DisplayFor(modelItem => item.ContactName)</td>
<td>@Html.DisplayFor(modelItem => item.Address)</td>
<td>@Html.DisplayFor(modelItem => item.City)</td>
<td>@Html.DisplayFor(modelItem => item.Country)</td>
</tr>
}
</table>
Screenshot
