在我的主布局中,我试图通过ajax添加登录部分视图,但是我不断收到“内部服务器错误”。我尝试了其他各种发布的解决方案,但没有运气
一切都很标准,我有HomeController和index.cshtml(使用layout.cshtml)
在布局中,一旦文档准备就绪,我将使用ajax来查看用户是否通过HomeController登录,如果返回的值为false,我想显示部分视图。
试图通过ajax从LoginController获取部分视图的showLoginPartial函数失败
“ showLoginPartial()中的错误:内部服务器错误:-:错误”
我在做什么错了?
HomeController方法:
public JsonResult IsUserLoggedIn()
{
return Json(new { result = (CurrentUser != null) }, JsonRequestBehavior.AllowGet);
}
布局jquery:
$(document).ready(function () {
checkLoggedIn();
function checkLoggedIn() {
$.ajax({
url: '@Url.Action("IsUserLoggedIn", "Home", new { })',
success: function (data) {
if (data.result == false) {
//Show the login partial view
showLoginPartial();
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error in checkLoggedIn(): " + errorThrown + " :-: " + textStatus);
}
});
}
function showLoginPartial() {
$.ajax({
url: '@Url.Action("LoginDisplay", "Login", new { })',
success: function (response) {
//add the partial view after #ib-container div
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//Error displays
alert("Error in showLoginPartial(): " + errorThrown + " :-: " + textStatus);
}
});
}
})
LoginController:
public class LoginController : Controller
{
// GET: Login
[ChildActionOnly]
public ActionResult LoginDisplay()
{
return PartialView("_LoginDisplay");
}
public JsonResult UserLoggedOut()
{
return Json(new { result = Nuclei.Models.CurrentUserAccount.Instance.LoggedOut }, JsonRequestBehavior.AllowGet);
}
public JsonResult UserAutoAuthenticate()
{
bool l_result = false;
System.Threading.Thread.Sleep(3000);
return Json(new { result = l_result }, JsonRequestBehavior.AllowGet);
}
public JsonResult UserManualAuthenticate()
{
bool l_result = false;
System.Threading.Thread.Sleep(3000);
return Json(new { result = l_result }, JsonRequestBehavior.AllowGet);
}
public JsonResult SendUserCredentials()
{
bool l_result = true;
System.Threading.Thread.Sleep(3000);
return Json(new { result = l_result }, JsonRequestBehavior.AllowGet);
}
}
[编辑]
只需尝试通过RenderAction()添加部分视图即可,但是它不是我想要的,绝对想使用ajax。
@{ Html.RenderAction("LoginDisplay", "Login"); }
也将其余方法添加到上面的LoginController中
_LoginDisplay.cshtml
<div id="login_layer_overlay">
</div>
<div id="login_layer">
<div id="MainLoginDiv">
<div id="LoginHeaderDiv" class="text-center">
<h3 id="LoginHeader" class="page-header" style="color:white;"> </h3>
</div>
<div id="Spinner" class="spinner">
<i><b></b></i><!--1--><i><b></b></i><!--2--><i><b></b></i><!--3--><i><b></b></i><!--4--><i><b></b></i><!--5--><i><b></b></i><!--6--><i><b></b></i><!--7--><i><b></b></i><!--8--><i><b></b></i><!--9--><i><b></b></i><!--10-->
<i><b></b></i><!--1--><i><b></b></i><!--2--><i><b></b></i><!--3--><i><b></b></i><!--4--><i><b></b></i><!--5--><i><b></b></i><!--6--><i><b></b></i><!--7--><i><b></b></i><!--8--><i><b></b></i><!--9--><i><b></b></i><!--10-->
<i><b></b></i><!--1--><i><b></b></i><!--2--><i><b></b></i><!--3--><i><b></b></i><!--4--><i><b></b></i><!--5--><i><b></b></i><!--6--><i><b></b></i><!--7--><i><b></b></i><!--8--><i><b></b></i><!--9--><i><b></b></i><!--10-->
<i><b></b></i><!--1--><i><b></b></i><!--2--><i><b></b></i><!--3--><i><b></b></i><!--4--><i><b></b></i><!--5--><i><b></b></i><!--6--><i><b></b></i><!--7--><i><b></b></i><!--8--><i><b></b></i><!--9--><i><b></b></i><!--10-->
<i><b></b></i><!--1--><i><b></b></i><!--2--><i><b></b></i><!--3--><i><b></b></i><!--4--><i><b></b></i><!--5--><i><b></b></i><!--6--><i><b></b></i><!--7--><i><b></b></i><!--8--><i><b></b></i><!--9--><i><b></b></i><!--10-->
<i><b></b></i><!--1--><i><b></b></i><!--2--><i><b></b></i><!--3--><i><b></b></i><!--4--><i><b></b></i><!--5--><i><b></b></i><!--6--><i><b></b></i><!--7--><i><b></b></i><!--8--><i><b></b></i><!--9--><i><b></b></i><!--10-->
<i><b></b></i><!--1--><i><b></b></i><!--2--><i><b></b></i><!--3--><i><b></b></i><!--4--><i><b></b></i><!--5--><i><b></b></i><!--6--><i><b></b></i><!--7--><i><b></b></i><!--8--><i><b></b></i><!--9--><i><b></b></i><!--10-->
<i><b></b></i><!--1--><i><b></b></i><!--2--><i><b></b></i><!--3--><i><b></b></i><!--4--><i><b></b></i><!--5--><i><b></b></i><!--6--><i><b></b></i><!--7--><i><b></b></i><!--8--><i><b></b></i><!--9--><i><b></b></i><!--10-->
<i><b></b></i><!--1--><i><b></b></i><!--2--><i><b></b></i><!--3--><i><b></b></i><!--4--><i><b></b></i><!--5--><i><b></b></i><!--6--><i><b></b></i><!--7--><i><b></b></i><!--8--><i><b></b></i><!--9--><i><b></b></i><!--10-->
<i><b></b></i><!--1--><i><b></b></i><!--2--><i><b></b></i><!--3--><i><b></b></i><!--4--><i><b></b></i><!--5--><i><b></b></i><!--6--><i><b></b></i><!--7--><i><b></b></i><!--8--><i><b></b></i><!--9--><i><b></b></i><!--10-->
</div>
<div id="ManualLogin" class="box" style="border: none;">
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-group">
<label class="control-label" style="color:white;">Username</label>
@Html.TextBox("username", null, new { id = "username", @class = "form-control", @Value="us" })
</div>
<div class="form-group">
<label class="control-label" style="color:white;">Password</label>
@Html.TextBox("password", null, new { id = "password", @class = "form-control", @Value = "pwd" })
</div>
<div class="text-center" style="margin-top:40px;">
<input type="button" id="ManualLoginBtn" value="Sign in" class="btn btn-primary" />
<br />
<input type="button" id="AutoLoginBtn" value="Auto Authenticate" class="btn btn-default" />
<input type="button" id="ForgotLoginBtn" value="Forgot Credentials" class="btn btn-default" />
</div>
}
</div>
<div id="ForgotLogin" class="box" style="border: none;">
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-group">
<label class="control-label" style="color:white;">Email</label>
@Html.TextBox("email", null, new { id = "email", @class = "form-control", @Value = "jhjhblah" })
</div>
<div class="text-center" style="margin-top:40px;">
<input type="button" id="BackToLoginBtn" value="Back" class="btn btn-default" />
<input type="button" id="ForgotSubmitBtn" value="Submit" class="btn btn-primary" />
</div>
}
</div>
</div>
</div>
<script>
$(document).ready(function () {
var spinnerItems = $("#Spinner i b");
$("#MainLoginDiv").css("opacity", "1");
checkUserLoggedOut();
function checkUserLoggedOut() {
$.ajax({
//First need to check for logged off
url: '@Url.Action("UserLoggedOut", "Login", new { })',
success: function (data) {
if (data.result == false) {
showAutoAuthenticate();
}
else {
showManualForm();
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error: " + errorThrown + " :-: " + textStatus);
}
});
}
function showAutoAuthenticate() {
$("#LoginHeader").text("Auto Authenticating");
$("#ManualLogin").css("opacity", "0");
setTimeout(function () { $("#ManualLogin").css("display", "none"); }, 550);
$("#Spinner").css("opacity", "1");
spinnerItems.each(function () {
$(this).addClass("spinAnimation");
})
$.ajax({
url: '@Url.Action("UserAutoAuthenticate", "Login", new { })',
success: function (data) {
if (data.result == false) {
//Switch to manual
//showForgotLogin();
showManualForm();
}
else {
//Remove login
$("#AutoLogin").css("opacity", "0");
spinnerItems.each(function () {
$(this).removeClass("spinAnimation");
})
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error in showAutoAuthenticate(): " + errorThrown + " :-: " + textStatus);
}
});
}
function showManualAuthenticate() {
$("#LoginHeader").text("Authenticating");
$("#ManualLogin").css("opacity", "0");
setTimeout(function () { $("#ManualLogin").css("display", "none"); }, 550);
$("#Spinner").css("opacity", "1");
spinnerItems.each(function () {
$(this).addClass("spinAnimation");
})
$.ajax({
url: '@Url.Action("UserManualAuthenticate", "Login", new { })',
success: function (data) {
if (data.result == false) {
//Switch to manual
//showForgotLogin();
showManualForm();
}
else {
//Remove login
$("#AutoLogin").css("opacity", "0");
spinnerItems.each(function () {
$(this).removeClass("spinAnimation");
})
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error in showManualAuthenticate(): " + errorThrown + " :-: " + textStatus);
}
});
}
function showForgottenProcessing() {
$("#ForgotLogin").css("opacity", "0");
setTimeout(function () { $("#ForgotLogin").css("display", "none"); }, 550);
$("#Spinner").css("opacity", "1");
spinnerItems.each(function () {
$(this).addClass("spinAnimation");
})
$.ajax({
url: '@Url.Action("SendUserCredentials", "Login", new { })',
success: function (data) {
if (data.result == false) {
//Switch to manual
showForgotLoginForm();
}
else {
//Go back to login
showManualForm();
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error in showManualAuthenticate(): " + errorThrown + " :-: " + textStatus);
}
});
}
function showManualForm() {
$("#Spinner").css("opacity", "0");
spinnerItems.each(function () {
$(this).removeClass("spinAnimation");
})
$("#ForgotLogin").css("opacity", "0");
setTimeout(function () { $("#ForgotLogin").css("display", "none"); }, 550);
$("#LoginHeader").text("Login");
$("#ManualLogin").css("display", "block");
$("#ManualLogin").css("opacity", "1");
}
function showForgotLoginForm() {
$("#Spinner").css("opacity", "0");
spinnerItems.each(function () {
$(this).removeClass("spinAnimation");
})
$("#ManualLogin").css("opacity", "0");
setTimeout(function () { $("#ManualLogin").css("display", "none"); }, 550);
$("#LoginHeader").text("Retrieve Credentials");
$("#ForgotLogin").css("display", "block");
$("#ForgotLogin").css("opacity", "1");
}
$("#AutoLoginBtn").click(function () {
showAutoAuthenticate();
});
$("#ForgotLoginBtn").click(function () {
showForgotLoginForm();
});
$("#BackToLoginBtn").click(function () {
showManualForm();
});
$("#ManualLoginBtn").click(function () {
showManualAuthenticate();
});
$("#ForgotSubmitBtn").click(function () {
showForgottenProcessing();
});
})
</script>
答案 0 :(得分:2)
使用[ChildActionOnly]
属性可确保只能从父视图中将操作方法作为子方法调用(即,禁用直接导航以加载像/Login/LoginDisplay
这样的局部视图),并且通常用于呈现RenderAction()
助手的部分视图:
任何带有
ChildActionOnlyAttribute
标记的方法都可以调用 仅使用Action或RenderAction HTML扩展方法。
由于您不是通过RenderAction()
调用部分视图,而是使用AJAX,它需要在url
设置中直接进行URL导航,所以ChildActionOnlyAttribute
会立即阻止响应该URL和运行时的请求错误只能由子请求访问的子操作(在AJAX结果中显示为“内部服务器错误”)。
因此,控制器操作不应使用[ChildActionOnly]
属性:
[HttpGet]
public ActionResult LoginDisplay()
{
return PartialView("_LoginDisplay");
}
AJAX调用应如下所示:
function showLoginPartial() {
$.ajax({
url: '@Url.Action("LoginDisplay", "Login")',
type: 'GET',
success: function (response) {
$('#ib-container').html(response);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//Error displays
alert("Error in showLoginPartial(): " + errorThrown + " :-: " + textStatus);
}
});
}
参考文献: