Question

我有一个简单的MVC页面，1页，进行3次ajax GET调用以填充主页面上的3个div。当调用发生时，我注意到部分视图加载到div中的ajax之前有时需要几秒钟。所以你可以清楚地看到div正在逐个更新......

当我从头开始创建一个具有相同设置的项目时，它不那么严重，但我有类似的行为。

奇怪的是，我尝试对来自控制器方法进行3次ajax调用，这比我更改它以调用真正的控制器方法时要快得多...

First request with all same partial results

Second request with all different partial results

主页的Razor代码是

<div class="container">
<div class="row mb-3">
    <input type="date" id="gameDate" name="gameDate" />
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                First Container
            </div>
            <div class="card-body">
                <div id="scientisttimes" ></div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                Second Container
            </div>
            <div class="card-body">
                <div id="criminaltimes" ></div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                Third Container
            </div>
            <div class="card-body">
                <div id="tlhtimes"></div>
            </div>
        </div>
    </div>
</div>
</div>

Ajax调用javascript是

@section scripts{
<script>
    $("#gameDate").change(function () {
        var date = $("#gameDate").val();

        $.ajax({
            url: '@Url.Action("FirstTime", "Book")',
            type: "GET",
            success: function (data, textStatus, XMLHttpRequest) {
                $("#scientisttimes").html(data);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                $('#scientisttimes').html(xhr.responseText);
            }
        });

        $.ajax({
            url: '@Url.Action("SecondTime", "Book")',
            type: "GET",
            success: function (data, textStatus, XMLHttpRequest) {
                $("#criminaltimes").html(data);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                $('#criminaltimes').html(xhr.responseText);
            }
        });

        $.ajax({
            url: '@Url.Action("ThirdTime", "Book")',
            type: "GET",
            success: function (data, textStatus, XMLHttpRequest) {
                $("#tlhtimes").html(data);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                $('#tlhtimes').html(xhr.responseText);
            }
        });
    });
</script>
}

每个局部视图与不同的文字相似，所以非常非常基本

<div>
    First
</div>

控制器代码也非常简单

    public ActionResult Index()
    {
        return View();
    }

    public PartialViewResult FirstTime()
    {
        return PartialView("_FirstPartial");
    }

    public PartialViewResult SecondTime()
    {
        return PartialView("_SecondPartial");
    }

    public PartialViewResult ThirdTime()
    {
        return PartialView("_ThirdPartial");
    }

因此，当我更改javascript以调用3次相同的局部视图而不是3个不同的部分视图时。我只是经历了极长的时间（超过一秒......）这是不可行的。查看链接以获取有关时间的详细信息

有没有人知道我在忽视什么，或者这种行为来自哪里？

GRTS，兰德

ajax调用mvc需要花费大量时间

0 个答案: