Update (Refresh) DIV content using Ajax.BeginForm on Button Click in ASP.Net MVC

Last Reply 6 months ago By dharmendr

Posted 6 months ago

hi

I use ajax codes in page creat ajax.cshtml and put textbox and button in this page users can enter name in textbox and it will search data from database and will shows resault:

@{
    ViewBag.Title = "Ajax";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using (Ajax.BeginForm("SearchInfo",new AjaxOptions { UpdateTargetId = "divajax", HttpMethod = "Post", InsertionMode = InsertionMode.Replace }))
{
    @Html.TextBox("txtname");
    <input  type="submit" name="btnsearch" value="search"/>
    <div id="divajax"></div>
}

here I define <div id="divajax>" and want it shows resault in this div but when I click on button it will shows resautl in searchinfo.cshtml

below is code:

homecontroller:

        [HttpGet]
        public ActionResult Ajax()
        {
            return View();

        }

        public ActionResult SearchInfo(string txtname)

        {
            var Model = bl.Select().Where(p => p.Name.Contains(txtname));
            return PartialView(Model);
        }

i want it shows data in ajax.cshtml in Div that I define 

how I can do it?

best regards

neda

Posted 6 months ago

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