Render Partial View Using Jquery in ASP.NET MVC

Render Partial View Using jQuery in ASP.NET MVC

I have used ajax load to do this:

$('#user_content').load('@Url.Action("UserDetails","User")');

Render Partial View using jQuery .load() function

As Curiousdev said in the comment, I just changed some code in my jquery

$('#tbl-disease').load( '@Url.Action("_DiseaseList", "DiseaseLists",new {assessmentID = assessmentID})' );

How to load partial view via jQuery?

The folder structure and the name of the .cshtml file is irrelevant. You should make an ajax call to controller action which returns the partial view you want.

The controller action method returning the partial view should look like following,

//
// GET: /SampleController/MyAction

[HttpGet]
public ActionResult MyAction()
{
   return PartialView("_MyPartial");
}

Then you need to make a call to this method,

$('#divname').load("/SampleController/MyAction");

How to dynamically load partial view Via jquery ajax in Asp.Net MVC

Assign Id submit to submit button

<input type="submit" value="Search" id="submit" class="btn btn-default"/>

Change your js as follows:

var url = '@Url.Action("DisplayData", "Show")';
$('#submit').on('click',function(e){
 e.preventDefault();
$.ajax({
    type: "POST",
    url: url,
    data:$('form').serialize(),
}).done(function (r) {
   $('#search').html(r);

}).fail(function (e) {
    console.log(e.responseText);
});
});    

Change Controller code accordingly:

public ActionResult DisplayData(SearchData model)
{
//some manipulation
model.data = data;
return PartialView("DisplayData", model.data);
}

Loading a partial view in mvc using JQuery

<script src="/scripts/jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.jsload').on('click', function (evt) {
            evt.preventDefault();
            evt.stopPropagation();;
            $('#detailsDiv').load($(this).data('url'));
        });
    })
</script>
<div id="detailsDiv">
    <!--Content gets loaded by JQuery-->
</div>
<button data-url='@Url.Action("Details","Statistics", new { id = Model.Id } 
)' class="jsload">
  Show Skills
</button>

Load ASP.NET MVC Partial Views Dynamically Using JQuery

You can load Partial View dynamically using Jquery in following way

$(document).on("click", "#TestLink", function () {
        var url = "/MainView/GetView";
        $.get(url, function (data) {
            $("#content").html(data);
        });
 });

Here URL is the URL of action which will return PartialView.

Issue with appending html for partial view via jQuery in ASP.NET MVC Core 3.1

<partial> is not a HTML tag. it's a server-side tag helper defined by .NET Core.

Consider your Things entities. It's stored in the database. Unless you render all the entities in your .cshtml file, you can't have them in client side without sending additional requests to your server.

<partial> tag helper is executed when rendering the resultant HTML markup at the server, while jQuery is executed at the client (e.g. browser). That's why you cannot simply put the <partial> inside your jQuery and get the data you want.

Possible solution

The following code snippets show you the idea on how to handle this problem. Copy-and-paste directly does not work. You have to understand the concept and do some google search in order to make it works.

You can define a partial action in your controller:

public ActionResult GetThingPartial (int id)
{
    /* get Thing[id] from database using EF Core */
    var videModel = Thing[id];
    return PartialView( "_CreateThingPartial", viewModel );
}

Fetch the partial result using jQuery's ajax call.

In your .cshtml file:

var url = '@Url.Action("GetThingPartial", "YourControllerName")';

$.get(url, function(data) {
    /* append the data, which should be the partial HTML, to the corresponding <div> */
});

This article may also helpful to solve the problem you met: https://www.c-sharpcorner.com/uploadfile/manas1/sending-partialview-using-jquery-ajax-request-in-asp-net-mvc/

---

Related Topics