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

Question

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

结果从web api返回，并在textarea中显示并消失。我猜它正在刷新页面。但我不知道如何防止它。我以前做过类似的事情，没有表现得如此。我确定我错过了什么，但我说不出我错过了什么。

@{
    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>

Answer 1

对于任何来到这里的人来说，这可能是另一种解决方案。尝试从表单调用 Ajax 函数时，我在 Razor 页面项目中遇到了同样的问题。该页面将调用正确的页面处理程序并返回 Json 结果，但是页面将​​始终刷新，并且不会调用 ajax 调用中的成功部分。对我有用的是删除表单元素并将其替换为 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>

还有 ajax：

$.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);
           }
    });

Answer 2

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

<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>

Answer 3

首先，从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="#"。