ASP.NET Core 3.1 AJAX局部视图-C#

在ASP.NET Core Web应用程序中，使用AJAX局部视图（Partial View）可以提高Web应用程序的性能和用户体验。AJAX允许Web浏览器异步在后台与服务器交换数据，而不必完全重新加载页面。

在本教程中，您将学习如何在ASP.NET Core 3.1中使用AJAX局部视图。

步骤一：创建一个ASP.NET Core Web应用程序

将首先使用Visual Studio 2019创建一个ASP.NET Core Web应用程序。

1. 打开Visual Studio 2019，并单击“创建新项目”。
2. 选择“ASP.NET Core Web应用程序”模板。
3. 在“新项目”对话框中，选择“Web应用程序（.NET Core）”模板，并单击“下一步”。
4. 在“配置新项目”对话框中，为您的项目命名，并选择ASP.NET Core 3.1作为目标框架。
5. 在“模板”下，选择“Web应用程序”，并单击“创建”。

您现在已经拥有一个ASP.NET Core Web应用程序。我们将在下一步中创建AJAX局部视图。

步骤二：创建一个AJAX局部视图

以下是我们将创建的AJAX局部视图的代码片段：

@model List<string>

<div id="partialView" class="text-center">
    <h2>Partial View</h2>
    <ul>
    @foreach (string item in Model)
    {
        <li>@item</li>
    }
    </ul>
</div>


@section Scripts {
    <script type="text/javascript">
        $(function() {
            $.ajax({
                url: "/Home/GetPartialView",
                type: "GET",
                success: function(result) {
                    $("#partialView").html(result);
                }
            });
        });
    </script>
}

此代码片段将创建一个包含ul和li元素的列表的AJAX局部视图。此AJAX局部视图将在首页上显示。

要创建AJAX局部视图，请创建一个名为“_PartialView.cshtml”的局部视图文件，内容如下：

@model List<string>

<ul>
@foreach (string item in Model)
{
    <li>@item</li>
}
</ul>

我们将在下一步中使用AJAX来动态呈现此视图。

步骤三：使用AJAX呈现局部视图

我们将使用jQuery AJAX方法来动态呈现AJAX局部视图。

首先，在HomeController.cs中添加以下代码片段：

[HttpGet]
public IActionResult GetPartialView()
{
    List<string> model = new List<string> { "Code", "Stack", "Overflow" };
    return PartialView("_PartialView", model);
}

此代码片段将动态生成AJAX局部视图的模型数据。

接下来，在Index.cshtml文件中添加以下代码片段：

<div id="partialView" class="text-center">
    Loading...
</div>

@section Scripts {
    <script type="text/javascript">
        $(function() {
            $.ajax({
                url: "/Home/GetPartialView",
                type: "GET",
                success: function(result) {
                    $("#partialView").html(result);
                }
            });
        });
    </script>
}

此代码片段将在首页上呈现AJAX局部视图。它将使用jQuery AJAX方法从服务器动态获取模型数据，并将其插入到名为“partialView”的div元素中。

结论

现在您已经学会了如何在ASP.NET Core 3.1中使用AJAX局部视图。AJAX局部视图可以提高Web应用程序的性能和用户体验。这是一种非常有用的技术，可以帮助您在Web应用程序中创建高度交互的用户界面。