重构jQuery AJAX调用以获得部分视图

Question

In my ASP.net MVC 5 application, I have lots of call to different partial views. To load/refresh those view, I am using jQuery AJAX.

However I ended up having lot of call to jquery which seems ugly and redundant. I am thinking there must be a better way to do this.

Here is my script in my index.cshtml where I am calling partial views.

    $(document).ready(function() {
        // load today's level
        $.ajax({
            url: '@Url.Action("_TodayLevel")',
            type: 'GET',
            contentType: 'application/json',
            dataType: 'html',
            //traditional: true,
        }).success(function(e) {
            $('#today-level').html(e);
        });

        // .... truncated to save space. But you get the idea, I have lots of this

        // load host level
        $.ajax({
            url: '@Url.Action("_HostLevel")',
            type: 'GET',
            contentType: 'application/json',
            dataType: 'html',
            //traditional: true,
        }).success(function (e) {
            $('#host-level').html(e);
        });
    });

Is there any better way to do this?

Answer 1

In the examples you gave, you are essentially requesting an HTML page and then updating a portion of the page with the returned HTML.

If this is the case, then you can simply use jQuery's .load() method: https://api.jquery.com/load/

Answer 2

You may simply consider to use below code to achieve what you want

@{Html.renderaction("_TodayLevel","Controller");}

If you does not have any controller action for this two views you may also consider to use

@{Html.renderPartial("_yourViews");}