How to call partial view using ajax method from jQuery

Question

I work with asp.net and I have some issues.

I created partial view with error message and I want to call view using jQuery.

I have already created function in controller which returns a partial view. But I am stuck with ajax, all time I get errors.

Controller:

[HttpGet]
public ActionResult LoadPartialView()
{
    return PartialView("_ErrorMessageWindow");
}

jQuery:

$.ajax({
        url: "@(Url.Action('LoadPartialView'))",
        type: "GET",
        cache: false,
        datatype: 'html',
        success: function (data) {
      }
});

Error:

jquery-3.3.1.min.js:2 GET https://localhost:5001/@(Url.Action('LoadPartialView'))?_=1565937416181 404 (Not Found)

Where you are writing your Jquery code? Is it in the .cshtml or separate .js file. — Rahul Nikate
– Rahul Nikate, Commented Aug 16, 2019 at 6:38
@RahulNikate in .js file, Partial view created in cshtml — qunzor
– qunzor, Commented Aug 16, 2019 at 6:40
Please see my answer for your error. Thank you @qunzor. Also let me know if that works for you. — Rahul Nikate
– Rahul Nikate, Commented Aug 16, 2019 at 7:00

Rahul Nikate · Accepted Answer · 2019-08-16 11:52:11Z

Reason for not working:

@Url.Action() is Razor server side code and that will not be parsed in external .js files.

Solution:

Create this <div> in your .cshtml:

<div id="partial-view-url" data-request-url="@Url.Action("LoadPartialView", "ControllerName")"></div>

then get Partial View Url in your separate/external .js file using data-request-url like below:

$("#partial-view-url").data('data-request-url');

So your $.Ajax will become like this:

$.ajax({
        url: $("#partial-view-url").data('data-request-url'),
        type: "GET",
        cache: false,
        datatype: 'html',
        success: function (data) {

        }
});

Another way is to declare global variable: Create global variable in your main .cshtml file and use it in your external .js file.

//Declare this variable in your main `.cshtml` file.
var partial-view-url = @Url.Action("LoadPartialView","ControllerName");

//and then use it in your separate/external `.js` file.
$.ajax({
        url: partial-view-url,
        type: "GET",
        cache: false,
        datatype: 'html',
        success: function (data) {

        }
});

Collectives™ on Stack Overflow

How to call partial view using ajax method from jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related