在 razor 页面中使用 javascript 更新部分视图答案

【问题标题】：Updating a partial view with javascript in razor pages在 razor 页面中使用 javascript 更新部分视图
【发布时间】：2021-12-14 19:55:21
【问题描述】：

我有一个页面 (Index)，它列出了 PageModel 列表中的所有对象，如下所示： page with list of objects

Index.cshtml

@page
@model WAD_Website.Pages.Gods.IndexModel
@{
}

<body>
    <label id="lblInformation">Select a God</label>
    <div class="searchGod">
        <form method="post">
            <input type="text" id="txtSearchGod" placeholder="Search for a God..." oninput="SearchGod()" />
        </form>
    </div>
    <div class="godContainer">
        @await Html.PartialAsync("_GodsPartial", Model.GodList);
    </div>
</body>

<script src="~/js/Gods.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

_GodsPartial.cshtml

@using Models.Gods; 
@model List<God>

@foreach (God god in Model)
{
    <a class="god" id="@god.Name" asp-page="/Gods/Builds" asp-route-id="@god.Id">
        <img class="godImage" src="@god.godIcon_URL" />
        <p>@god.Name</p>
    </a>
}

当这个索引页面加载时，神列表由返回 117 个不同神对象的 API 填充。我希望用户能够搜索此列表。当用户在此文本框中输入文本时：

<input type="text" id="txtSearchGod" placeholder="Search for a God..." oninput="SearchGod()" />,

它使用 Gods.js 通过 jQuery 调用 Index.cshtml.cs 中的方法

Gods.js

let txtSearchGod = document.getElementById("txtSearchGod");

function SearchGod() {
    $.ajax({
        type: "POST",
        url: '../../Gods?handler=SearchGod',
        beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        data: JSON.stringify(txtSearchGod.value),
        contentType: "application/json",
        dataType: "json"
    });
}

Index.cshtml.cs

    public async Task OnGet()
    {
        _godManager = await GodManager.GetInstance();
        GodList = new List<God>();
        God[] gods = _godManager.GetGodList();
        foreach (God god in gods)
        {
            GodList.Add(god);
        }
    }

    public async Task<IActionResult> OnPostSearchGodAsync()
    {
        _godManager = await GodManager.GetInstance();
        GodList = new List<God>();
        God[] gods = _godManager.GetGodList();

        string godName = "";
        {
            MemoryStream stream = new MemoryStream();
            await Request.Body.CopyToAsync(stream);
            stream.Position = 0;
            using (StreamReader reader = new StreamReader(stream))
            {
                string requestBody = await reader.ReadToEndAsync();
                if (requestBody.Length > 0)
                {
                    godName = JsonConvert.DeserializeObject<string>(requestBody);

                    if (godName.Length > 0)
                    {
                        foreach (God god in gods)
                        {
                            if (god.Name.Contains(godName))
                            {
                                GodList.Add(god);
                            }
                        }
                    }
                    else
                    {
                        foreach (God god in gods)
                        {
                            GodList.Add(god);
                        }
                    }
                }
            }
        }
        return Partial("_GodsPartial", GodList);
    }

一切正常，因为在发送到部分视图页面的列表中只包含过滤后的神。但我就是不知道如何更新这段 HTML。

<div class="godContainer">
    @await Html.PartialAsync("_GodsPartial", Model.GodList);
</div>

我已经查看并尝试了很多可能的解决方案，但都无济于事。谁能告诉我如何更新 HTML？

【问题讨论】：

标签： javascript c# razor-pages asp.net-core-razor-pages

【解决方案1】：

您需要将success 或done 处理程序添加到您的SearchGod 函数中，您可以在其中访问返回的HTML 并将其放置在目标元素中：

function SearchGod() {
    $.ajax({
        type: "POST",
        url: '../../Gods?handler=SearchGod',
        beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        data: JSON.stringify(txtSearchGod.value),
        contentType: "application/json",
        dataType: "json"
    }).done(function (response){
        $('.godContainer').html(response);
    });
}

【讨论】：

我设法找到了一种更简单的方法来实现这一点：$('#elementId').load('partialViewUrl?handler=methodName&parameterName=' + parameterValue))