Render PartialView on same page using jQuery AJAX in ASP.Net MVC

Last Reply one year ago By mukesh1

Posted one year ago

how to render partial view on same page with ajax.

            function ckkreport() {
                var s = document.getElementById("chklist").value;
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("Index", "Home")',
                    data: '{ tempDataValue:"' + s + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "text",
                    success: function (r) {
                        alert(r);
                    },
                    error: function (r) {
                        alert(r.responseText);
                    }
                });
            }
        </script>
Posted one year ago Modified on one year ago

Hi mukesh1,

Check this example. Now please take its reference and correct your code.

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
{
    // GET: Home
    public ActionResult Index()
    {
        NorthwindEntities entities = new NorthwindEntities();
        return View(entities.Employees.Take(5).ToList());
    }

    [HttpGet]
    public ActionResult Details(int? id)
    {
        NorthwindEntities entities = new NorthwindEntities();
        return PartialView("EmployeeDetails", entities.Employees.Where(e => e.EmployeeID == id).FirstOrDefault());
    }
}

Index View

@model IEnumerable<_Render_PartialView_jQuery.Employee>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <table class="table">
        <tr>
            <th>@Html.DisplayNameFor(model => model.EmployeeID)</th>
            <th>@Html.DisplayNameFor(model => model.FirstName)</th>
            <th>@Html.DisplayNameFor(model => model.LastName)</th>
            <th>Action</th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.EmployeeID)</td>
                <td>@Html.DisplayFor(modelItem => item.FirstName)</td>
                <td>@Html.DisplayFor(modelItem => item.LastName)</td>
                <td><input type="button" name='@item.EmployeeID' value="Details" id="btnDetails" /></td>
            </tr>
        }
    </table>
    <br />
    <div id="dvPartialView"></div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('[id*=btnDetails]').on('click', function () {
                $.ajax({
                    url: '@Url.Action("Details", "Home")',
                    dataType: "html",
                    data: { "id": $(this).attr('name') },
                    type: "GET",
                    contentType: "application/json",
                    success: function (response) {
                        $('#dvPartialView').html(response);
                    },
                    error: function (err) {
                        alert(err.responseText);
                    }
                });
            });
        });
    </script>
</body>
</html>

EmployeeDetails Partial View

@model _Render_PartialView_jQuery.Employee
<b>Address of @Html.DisplayFor(model => model.FirstName) @Html.DisplayFor(model => model.LastName) is :</b>
<hr />
@Html.DisplayFor(model => model.Address)
<br />
@Html.DisplayFor(model => model.City),
@Html.DisplayFor(model => model.PostalCode)
<br />
@Html.DisplayFor(model => model.Country)

Screenshot


Posted one year ago

on view side

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Checkbook</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Chq_Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("CheqLIst", new SelectList(ViewBag.CheqLIst, "Chq_id", "Chq_Name"), new { @class = "form-control", @id = "chklist", onchange = "javascript:return ckkreport()" })
                @Html.ValidationMessageFor(model => model.Chq_Name, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="dvPartialView">
        </div>
    </div>
}

 

@section Scripts{
    <script>
        function ckkreport() {
            var drpvalue = document.getElementById("chklist").value;
            $.ajax({
                    url: '@Url.Action("_Chklost", "Org")',
                    dataType: "html",
                    data: { "sb": drpvalue },
                    type: "GET",
                    contentType: "application/json",
                    success: function (response) {
                        alert(response.data);
                        $('#dvPartialView').html(response);
                    },
                    error: function (err) {
                        alert(err.responseText);
                    }
                });
        }
    </script>
}

on view of this partial view

@model IEnumerable<Leisure_Mgmt.leisure_Repository.cheque_Detail>

@{
    WebGrid grid = new WebGrid(Model);
}
  <h2>Users</h2>
        @grid.GetHtml(tableStyle: "table-design table table-bordered table-hover dataTable", fillEmptyRows: false,
         columns: new[]
         {
             grid.Column(columnName:"Cheque_Number", header:"Cheque Number"),
             grid.Column(columnName:"Cheque_Status", header:"Status")
         })