在视图中:
<form method="get" action="@Url.Action("Index")" data-atpl-ajax="true" data-atpl-target="#results">
<div class="form-group">
<label for="recipient-name" class="control-label">IP:</label>
<input type="text" class="form-control" id="ClientIP" name="ClientIP">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Name:</label>
<input type="text" class="form-control" id="Name" name="Name">
</div>
<button type="submit" class="btn btn-primary">Show Results</button>
</form>
JavaScript文件:
$(function () {
var ajaxFormSubmit = function () {
var $form = $(this);
var options = {
url: $form.attr("action"),
type: $form.attr("method"),
data: $form.serialize()
};
$.ajax(options).done(function (data) {
var $target = $($form.attr("data-atpl-target"));
$target.replaceWith(data);
});
return false;
};
$("form[data-atpl-ajax='true']").submit(ajaxFormSubmit);
});
我还确保了js文件的正确顺序:
<script type="text/javascript" src="~/Scripts/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
但是,在控制器动作中,
Request.IsAjaxRequest()
返回false。这里的问题是什么?
答案 0 :(得分:0)
正如其他人在评论中指出的那样,为了使Request.IsAjaxRequest()
起作用,X-Requested-With
标题必须存在于AJAX请求中。 jQuery应该自动添加它。环顾四周,我只发现了非常旧版本的jQuery的异常。如果您没有使用最新的1. *或2. *(取决于您对过去的IE版本支持的需要),您应该升级。
除此之外,您可以手动添加标题。这不是理想的,因为你几乎只是在讨论这个问题,但更糟糕的是,只需添加以下内容:
var options = {
url: $form.attr("action"),
type: $form.attr("method"),
data: $form.serialize(),
beforeSend: function(xhr) {
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
}
};
答案 1 :(得分:0)
我不知道如何,但使用Ajax.BeginForm()为我工作。我已经摆脱了表单元素并实现了这个:
@using (Ajax.BeginForm(new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "results"
}))
{
//input fields go here
}
有兴趣知道造成这种行为的原因。