通过ajax添加部分视图

In my main layout I'm trying to add a login partial view via ajax, however I keep getting 'Internal Server Error'. I've tried various other posted solutions without luck

Everything is pretty standard I've got my HomeController and index.cshtml (which uses layout.cshtml)

In the layout, once the document is ready, I use ajax to see if a user is logged in via the HomeController, if the returned value is false I want to show a partial view.

The function showLoginPartial where it trys, via ajax, to get the partial view from the LoginController fails

"Error in showLoginPartial(): Internal Server Error :-: error"

What am I doing wrong?

HomeController method:

    public JsonResult IsUserLoggedIn()
    {
        return Json(new { result = (CurrentUser != null) }, JsonRequestBehavior.AllowGet);
    }

layout 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);
    }
}

Site Structure:

[EDIT]

Just tried adding the partial view via an RenderAction() and it worked, but this is not what I'm after, definitely want to use ajax.

@{ Html.RenderAction("LoginDisplay", "Login"); }

Added the rest of the methods into the LoginController above as well

_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;">&nbsp;</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 提建议
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
weixin_33695450 2018-10-31 06:22
关注
The [ChildActionOnly] attribute usage ensures that an action method can be called only as a child method from a parent view (i.e. disables direct navigation to load partial view like /Login/LoginDisplay), and usually used to render partial view with RenderAction() helper:

Any method that is marked with ChildActionOnlyAttribute can be called only with the Action or RenderAction HTML extension methods.

Since you're not calling the partial view by RenderAction() but with AJAX which requires direct URL navigation in url setting, the ChildActionOnlyAttribute immediately prevents respond to request of that URL and runtime error Child action accessible only by a child request will be thrown (shown as "Internal Server Error" in AJAX result).

Hence, the controller action should not use [ChildActionOnly] attribute:

[HttpGet] public ActionResult LoginDisplay() { return PartialView("_LoginDisplay"); }

And the AJAX call should be like this:

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

References:

System.Web.Mvc.ChildActionOnlyAttribute Class

Using ChildActionOnly in MVC
解决无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

报告相同问题？

关注问题

通过ajax从数据库请求成功数据后，如何将数据渲染到前端页面？ ajax javascript 前端
2021-12-11 22:33

回答 1 已采纳你应该是用原生js吧用获取到的数据生成html片段，然后插入到页面中.例如：获取到的数据是data=[ ] for(let i =0;i<data.length;i++){
前端ajax问题前端通过ajax请求访问后端接口 ajax javascript layui
2021-09-26 14:53

回答 2 已采纳只有后端有正确返回了，那么前端，肯定是可以接收得到。首先，你先确认后端有正确返回了，比如，你可以用postman请求接口试试，看看有没有正确返回。
前端通过Thymeleaf获取不到值 ajax spring boot 前端
2022-10-17 19:20

回答 1 已采纳您好，用了ajax的方式去请求后台，你放在model里面的值就取不到了。因为值得获取方式不对，如果想在ajax中返回相应的值，saveFile的方法上要加上@ResponseBody，同时返回参数不要
在Laravel中实现使用AJAX动态刷新部分页面
2020-10-16 05:14

在视图头部添加`<meta>`标签以获取CSRF令牌，并在JS文件中设置全局的AJAX设置。 2. **增加模块的AJAX函数**： - 使用jQuery监听`button[name="btn-add"]`的点击事件。 - 发送POST请求到指定的路由，例如`/orders/...
前端面试提问ajax ajax
2021-03-09 22:38

回答 2 已采纳 AJAX - onreadystatechange 事件当请求被发送到服务器，服务器对我们的请求响应时，我们需要执行一些基于响应的任务。也就是每当 readyState 改变时，就会触发 onre
关于ajax链接前端后台的一些问题 ajax 前端数据库
2018-06-29 00:26

回答 7 已采纳 ``` //Ajax调用处理 $.ajax({ type: "POST", url: "tes
想从sql db获取图像src并通过ajax codeigniter显示视图文件 ajax php
2019-07-09 07:53

回答 1 已采纳 The error Array to string conversion means exactly what it sounds like: You are trying to u
VS2022 DonetCore6.0 Ajax数据交易
2022-06-08 11:09

以上代码展示了基本的Ajax数据交易流程，前端通过Ajax提交登录请求，后端控制器验证数据并返回结果。注意，实际应用中你需要对密码进行加密存储和验证，这里仅为了演示目的简单处理。在Ezy.Login这个压缩包中，...
用ajax传前端的数据进数据库 java javascript 前端
2023-04-10 15:39

回答 3 已采纳这里改成data:{sum:sum}你的请求方式应该是get 因为你的服务端写的是get
为什么我的ajax传到后端，后端却显示为null ajax java 前端
2022-07-28 21:55

回答 3 已采纳后端不要写@RequestBody，默认从url获取参数ajax去掉dataType:'text', url路径不对，参数'stdlib':stdlib拼接在url后采用 ?key=value格式进行
通过Ajax请求获取ContentBuilder列表视图 ajax jquery php
2013-11-21 10:33

回答 1 已采纳 If you want to load only the component's html content add to the URL tmpl=component http://epc.ar
Ajax、Promise、Axios前端三剑客
2023-05-19 12:04

夏诗曼CharmaineXia的博客 Ajax是一种用于实现异步通信的技术，Promise是一种用于处理异步操作的对象，而Axios则是一个基于Promise的HTTP客户端，用于发送HTTP请求。...系统性的学习这三项技术有助于提高你对前端技术的掌握。
前端问题：ajax请求获取了pdf 文件流，怎么在线展示 ajax 前端
2018-11-30 05:41

回答 3 已采纳可以参考这个文章：[https://www.jianshu.com/p/242525315bf6](https://www.jianshu.com/p/242525315bf6 "")
固定行列，可ajax添加数据
2021-06-01 19:53

标题“固定行列，可ajax添加数据”所涉及的是一个网页表格功能，该功能结合了JavaScript（js）和jQuery技术，实现了表格行和列的固定，同时支持通过Ajax异步加载和添加新数据。这种功能在大数据量展示或者需要动态...
springmvc-ajax:springmvc-ajax 前端后端ajax通信
2021-05-05 14:29

Ajax允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提高了用户体验，因为用户无需等待整个页面刷新就能看到结果。Ajax的核心是JavaScript，它通过XMLHttpRequest对象与服务器...
没有解决我的问题, 去提问

悬赏问题

¥15 宇视监控服务器无法登录
¥15 PADS Logic 原理图
¥15 PADS Logic 图标
¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
¥20 气象站点数据求取中~
¥15 如何获取APP内弹出的网址链接
¥15 wifi 图标不见了不知道怎么办上不了网变成小地球了
¥50 STM32单片机传感器读取错误
¥50 power BI 从Mysql服务器导入数据，但连接进去后显示表无数据
¥15 (关键词-阻抗匹配，HFSS，RFID标签天线)

通过ajax添加部分视图

1条回答 默认 最新

悬赏问题

1条回答默认最新