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

Posted 2023-04-12

技术标签:

【中文标题】在 razor 页面中使用 javascript 更新部分视图【英文标题】：Updating a partial view with javascript in razor pages 【发布时间】：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？

【问题讨论】：

【参考方案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))

以上是关于在 razor 页面中使用 javascript 更新部分视图的主要内容，如果未能解决你的问题，请参考以下文章

Razor/JavaScript 和尾随分号

将数据从 javascript 传递到 asp.net core 2 razor 页面方法

在 Razor 页面中使用 OnPost 页面处理程序处理 AJAX 请求

使用 javascript 重新加载 mvc/razor 部分视图

如何更改绑定到 Razor 页面上模型的特定文本的字体颜色？

Razor 页面与服务器端 Blazor