Частичное представление Возвращаемая загрузка очень медленная при использовании Asp. Net MVC Ajax JQuery Call

Question

Проблема: У меня есть частичная страница, допустим, что Частичная страница: 1 В этом у меня есть кнопка типа «Загрузить данные истории учащегося». Когда пользователь щелкает мышью, открывается другое частичное представление, например код всплывающего окна ниже.

Код кнопки щелчка и всплывающее окно режима:

<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>

Использование Ajax в jQuery, я загрузка частичного окна:

$('#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!");
        }
    });
});

Это мой контроллер:

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

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

Это частичное представление:

<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>

Производительность

Вопрос 1. Всегда загрузка данных объемом 6,2 МБ, только 300 строк и время загрузки занимает более 28,30 с. 2. Страница загрузки контента после не приходит быстро, это занимает некоторое время, но когда я проверяю вкладку сети загрузка контента останавливается. 3. Можно ли улучшить производительность?

Примечание: имя действия правильное, просто я изменяю вопрос (изображение ниже)

Answer 1

Старайтесь не загружать полное частичное представление, перерисовайте таблицу с помощью javascript / jquery.

Сначала выполните вызов ajax, который возвращает список studhistdata. Во-вторых, перерисовать его на javascript.

В настоящее время, при загрузке страницы и при событии изменения, вы загружаете частичное представление, верно?

Что я предлагаю, так это то, что мы выполняем загрузку данных через ajax. Вместо перезагрузки частичного представления.

Это то, что мы должны изменить, На вашем контроллере вы передаете модель в вашем частичном представлении.

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

и в части представления, удалите @Model. Теперь мы делаем загрузку через js / jquery. Для примера я бы использовал 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)
        }
    })
}

на контроллере

public ActionResult GetStudentHistory() {

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

}

, обратите внимание, что это всего лишь пример загрузки страницы. Вам нужно вручную создать Html помощников.