razor代码中的Ajax调用刷新页面

我正在使用.cs文件中的TreeView填充文件夹结构，并在view.cshtml中呈现它。当单击一个项目时，我调用一个js函数，该函数对webapi进行ajax调用，获取文件内容，并将结果显示在TextArea或Div中

结果从web api返回，并立即显示在文本区域中，然后消失。我想这是在刷新页面。但我不知道如何预防。我以前也做过类似的事情，没有表现得那么好。我肯定我错过了什么，但我不知道我错过了什么

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<form>
    <div style="width: 100%; overflow: hidden;">
        <div style="width: 600px; float: left;">
            <ul>
                @foreach (var node in Model.Nodes[0].ChildNodes)
                {
                    <li>@node.Text</li>
                    <ul>
                        @foreach (var f in node.ChildNodes)
                        {
                            <li><a href="" onclick="getLog('@f.Value')">@f.Text</a></li>
                        }
                    </ul>
                }
            </ul>
        </div>
        <div id="divLog" style="margin-left: 620px;overflow:auto;"><textarea id="txtLog" rows="10" cols="50"></textarea></div>
    </div>
</form>

<script>
    function getLog(fileref) {
        var baseURL = window.location.protocol + '//' + window.location.host + '@Url.Content("~")';
        var apiUrl = baseURL + "/api/logapi?fileref=" + fileref;

        document.getElementById("txtLog").innerText = "";

        $(document).ready(function () {
            $.ajax({
                url: apiUrl,
                type: "GET",
                success: function (data, textStatus, jqXHR) {
                    document.getElementById("txtLog").innerText = data;
                    //document.getElementById("txtLog").innerHTML = data;
                    //$("#txtLog").val(data);

                    alert(data);
                }
            });
        });
    }
</script>

---

首先，从document ready函数中删除Ajax调用：

function getLog(fileref) {
    var baseURL = window.location.protocol + '//' + window.location.host + '@Url.Content("~")';
    var apiUrl = baseURL + "/api/logapi?fileref=" + fileref;

    document.getElementById("txtLog").innerText = "";

        $.ajax({
            url: apiUrl,
            type: "GET",
            success: function (data, textStatus, jqXHR) {
                document.getElementById("txtLog").innerText = data;
                //document.getElementById("txtLog").innerHTML = data;
                //$("#txtLog").val(data);

                alert(data);
            }
        });
}

---

其次，将锚链接的空href属性替换为href=javascript:；或者href=。

我使用了按钮而不是锚定链接，它按预期工作，不会刷新屏幕

<style>
    .btn1 {
        background-color: transparent;
        border: hidden;
    }
</style>

<li><input type="button" id="a" value="@f.Text" onclick="getLog('@f.Value')" class="button btn1"></li>

---

也许对任何来这里的人来说都是另一个解决方案。在我的Razor pages项目中，当我试图从表单调用Ajax函数时，也遇到了同样的问题。页面将调用正确的页面处理程序并返回Json结果，但是页面将始终刷新，并且不会调用ajax调用中的成功部分。对我来说，有效的方法是删除form元素并用div替换它。现在Ajax调用为我正确返回

       <div id="first" class="section"> //WHEN THIS WAS FORM THE PAGE REFRESHED
            <div class="section">
                @Html.HiddenFor(m => m.PersonId)
                @Html.HiddenFor(m => m.ProviderId)
                @Html.AntiForgeryToken()                   
                <div class="container2">
                    <input type="radio" name="group1" id="radio-1" checked="checked">
                    <label for="radio-1"><span style="font-size:16px;" class="radio">I want to recieve all Emails (personal and marketing)</span></label>
                </div>
             <button onclick="setPreferences()" class="btn btn-save">Save&nbsp;<i class="fa fa-save"></i></button>
          </div>
       </div>

---

单击时调用的函数调用内部的DocumentReady没有任何意义。取消单击操作。“document.ready”是我的一项试错工作。我把它拿走了，两种方法都不行。但我发现了问题所在，这是一个关键环节。我切换到按钮，它的工作。我发布了我的答案。哦，问题是锚链接有一个空的href属性。不知怎么的，我没有看到你在之前的回复中已经提到了它，可能是因为你把它放在了代码块之后。我不需要把它改成按钮。

$.ajax({
        url: '/UserPreferences?handler=SetPreferences',          
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify(model),
        headers: {
            RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val()
        },
        success: function (response) {
            console.log(response);
           }
    });