我正在使用.cs文件中的TreeView填充文件夹结构,并将其呈现在view.cshtml中。单击一个项目后,我调用了一个js函数,该函数对Web api进行了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>
答案 0 :(得分: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 <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);
}
});
答案 1 :(得分:0)
首先,从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="javascript:;"
或href="#"
替换锚链接的空白href属性。
答案 2 :(得分:0)
我使用按钮代替锚链接,它按预期方式工作,不会刷新屏幕。
<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>