Render partial view at view load and send json data to parti

Follow the steps as

Step 1: Create an controller with Index action method which will return a View (main page) as bellow & create view for the same on which you have to call a partial view by using RenderPartial method.

Also do some ajax call in document.ready function which will ajax method inn your controller which returns some json data & after successfully execution bind that data to div which is declare in partial view

Controller code as

public class ReportController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpGet]
public JsonResult GetJsonData()
{
return Json("My Report Data", JsonRequestBehavior.AllowGet);
}
}

Main view i.e. Index.cshtml

@{
Layout = null;
}
>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Indextitle>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript">script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript">script>
head>
<body>
<div>
@{Html.RenderPartial("_ReportData");}
div>
body>
html>
<script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "@(Url.Action("GetJsonData", "Report"))",
data: {},
success: function (data) {
$("#divReportData").html(data);
}
});
});
script>

Create partial view (Note keep this partial view in Views/Report/_ReportData.cshtml folder for better access so will not get an any error while access it)

_ReportData.cshtml as

<div id="divReportData">
div>

Dont forget to add jquery libraries into main view.

Now run & your output will be as

Enjoy....Happy coding

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Rupesh Kahane8y ago
Follow the steps as

Step 1: Create an controller with Index action method which will return a View (main page) as bellow & create view for the same on which you have to call a partial view by using RenderPartial method.

Also do some ajax call in document.ready function which will ajax method inn your controller which returns some json data & after successfully execution bind that data to div which is declare in partial view

Controller code as
public class ReportController : Controller
   {
       public ActionResult Index()
       {
           return View();
       }

       [HttpGet]
       public JsonResult GetJsonData()
       {
           return Json("My Report Data", JsonRequestBehavior.AllowGet);
       }
   }
Main view i.e. Index.cshtml
@{
    Layout = null;
}
>
<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Indextitle>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript">script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript">script>
head>
<body>
    <div>
        @{Html.RenderPartial("_ReportData");}
    div>
body>
html>
<script>
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "@(Url.Action("GetJsonData", "Report"))",
            data: {},
            success: function (data) {
                $("#divReportData").html(data);
            }
        });
    });
script>
Create partial view (Note keep this partial view in Views/Report/_ReportData.cshtml folder for better access so will not get an any error while access it)

_ReportData.cshtml as
<div id="divReportData">
div>
Dont forget to add jquery libraries into main view.
Now run & your output will be as
Enjoy....Happy coding