Partial View Return loading is very slow using Asp.Net MVC Ajax JQuery Call

Question

Problem: I have a partial page let us assume Partial Page: 1 in this I have a button like "Load Students History Data". Once a user is clicked then another partial view open like modal popup code below.

Click button code and modal popup:

<button type="button" id="btnStudProj" class="btn btn-link" 
        data-toggle="modal" data- target="#myModalStudProj">Load Students History Data</button>

<div id="myModalStudProj" class="modal fade" role="dialog" style="overflow-y:scroll">
    <div id="partialStudProj">
    </div>
</div>

Using Ajax in jQuery, I'm loading a partial window:

$('#btnCusProj').click(function (e) {
    e.preventDefault();
    var element = this;
    $.ajax({
        url: applicationRoot + '/Search/StudentResponseData',
        type: "POST",
        data: JSON.stringify({ changeId: $("#changeId").val()  }),
        dataType: "html",
        contentType: "application/json; charset=utf-8",
        success: function (data) {                
                $('#partialStudProj').html('');
                $('#partialStudProj').html(data);
               },
        error: function (e) {
            console.log(e);
            alert("An error has occurred!");
        }
    });
});

This is my controller:

public ActionResult StudentResponseData(string changeId)
{
    try
    {     
        _model = new SearchViewModel();
        _model.StudHistData = _repository.StudHistData(changeId);

         return PartialView("_GCRAnalyzeStudentProjTask", _model);
    }
    catch (Exception ex)
    {
        //Default Page
    }
}

This is the partial view:

<div class="modal-open modal-body">
    <div class="modal-content">
        <div class="modal-header bg-primary">
            <button type="button" class="close" data-dismiss="modal">X</button>
            <h4 class="modal-title">Student History Data</h4>
        </div>
        <div class="modal-body">
            <div class="tab-content">
                <div class="tab-pane active" id="oem">
                    <div class="panel-body modelpopup-scroll">
                        <table class="table table-hover table-responsive table-bordered">
                            <thead>
                                <tr>
                                    <th>DATA1</th>
                                    <th>DATA2</th>
                                    <th>DATA3</th>
                                    <th>DATA4</th>
                                    <th>DATA5</th>
                                    <th>DATA6</th>
                                    <th>DATA7</th>
                                    <th>DATA8</th>
                                    <th>DATA9</th>
                                    <th>DATA10</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach (var getRowData in Model.StudHistData )
                            {
                                <tr>
                                    <td class="text-center"> Data1</td>
                                    <td style="width:150px">@getRowData.ProjectName</td>
                                    <td>@getRowData.DepartmentName</td>
                                    <td>DATA4</td>
                                    <td>
                                        @Html.DropDownListFor(model => getRowData.ResponsibleUserId, 
                                        new MultiSelectList(Model.UsersList.Where(x => x.UserId == 
                                        getRowData.ResponsibleUserId.FirstOrDefault().ToString()), 
                                        "UserId", "UserName"), new { @class 
                                        = "form-control" })

                                    </td>
                                    <td>
                                        @Html.ListBoxFor(model => getRowData.SelectedPossibleSigner, 
                                        new MultiSelectList(Model.UsersList, "UserId", "UserName", 
                                        getRowData.SelectedPossibleSigner),
                                        new { @id = "addPossibleSigner" + index, @class = "form- 
                                        control Convert-MultiSelect rowChangeEvent btnPhaseEnable", 
                                        rowIndex = index })
                                    </td>
                                    <td>DATA7</td>
                                    <td>DATA8</td>
                                    <td>DATA9</td>
                                    <td>DATA10</td>
                                </tr>
                                }
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>
</div>

Performance

Question 1. Always 6.2 MB data download and there are only 300 rows and loading time taking more than 28.30 S. 2. After Content download page is not coming quickly it is taking some time but when I check in network tab content download is stopped. 3. Is it possible to improve performance?

Note: Action name is correct just I change for question(below image)

Answer 1

Try not to load the whole partial view, redraw the table using javascript/jquery.

First, make an ajax call that returns the list of studhistdata. Second, redraw it on javascript.

Currently, on page load and on change event, you load the partial view right?

What I suggest is that we do the loading of data through ajax. Instead of reloading the partial view.

These are the things that we should change, On your controller, you pass a Model in your partial view.

return PartialView(YourModel); //remove the model here.

and on the view part, remove the @Model. Now, we do the loading part through js/jquery. For the sample, I would be using jQuery.

//on document ready, page on load.
$(document).ready(function(){
    getstudenhist().then(function(value){
        $.each(value, function(index, rowVal) {
            var row = $('<tr />')
            .append($("<td/>").text(rowVal.firstProp))
            .append($("<td/>").text(rowVal.secondProp))

            //and so on until you fill it way up to data10
            $('table').append(row)//add an id to your table and use it as ref
        })
    })
})

function getstudenhist(){ // gets data through ajax
    return new Promise(function(resolve, reject){
     $.ajax({
        method: POST,
        url: "yourcontroller/GetStudentHistory",//url you can use @Url.Action here as well
        success: function(data){
            resolve(data)
        },
        error: function(data){
            reject(data)
        }
    })
}

on your controller part

public ActionResult GetStudentHistory() {

    List<StudentHistory> studentHistory = new List<StudentHistory>();
    //code that fills studentHistory with StudentHistory
    return Json(studentHistory);

}

note that this is just a sample on page load. You need to manually create the Html helpers.