通过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，同时返回参数不要
Ajax、Promise、Axios前端三剑客
2023-05-19 12:04

夏诗曼CharmaineXia的博客 Ajax是一种用于实现异步通信的技术，Promise是一种用于处理异步操作的对象，而Axios则是一个基于Promise的HTTP客户端，用于发送HTTP请求。...系统性的学习这三项技术有助于提高你对前端技术的掌握。
前端面试提问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
Ajax技术详解（前端技术学习）
2021-07-21 18:33

小高写BUG的博客文章目录1.全局刷新和局部刷新1.1全局刷新1.2局部刷新2....#Ajax前端技术前端技术：在浏览器中执行的程序都是前端，html，css，js等后端技术：Servlet jsp jdbc mysql tomcat 等 1.全局刷新和局部刷新 1.1全局刷新
用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
3、JavaWeb-Ajax/Axios-前端工程化-Element
2024-02-27 23:25

所谓远行Misnearch的博客基于Vue脚手架创建出来的工程，有标准的目录结构：node_modules：项目依赖包public:项目静态文件src:存放项目源代码assets静态资源components可重用的组件router路由配置views视图组件，页面App.vue入口页面（根组件...
ajax post请求后页面会自动刷新页面 ajax javascript 前端有问必答
2022-03-11 16:18

回答 2 已采纳代码没看出什么问题。自动刷新目测是提交表单了，有下面的可能1）jquery没有正确导入导致事件没绑定上，比如路径错误2）执行click事件绑定的代码放到dom前面了没绑定上事件，导致提交了表单。需要放
前端基础学习——Vue框架-AJAX的使用
2022-07-14 11:37

Hulake_的博客本文为大家介绍了前端基础学习——Vue框架-AJAX的使用，希望对你有帮助~~
2024年前端面试题汇总
2023-02-08 22:55

sun_qqq的博客 js通过原型链模拟实现面向对象，比如通过实例化一个构造函数可以给每个对象挂载自己专属的属性，通过给类的prototype上赋方法是所有对象所共有的方法。每次实例化不再赋值原型链上的方法。 10、防抖/节流的区别？ ...
没有解决我的问题, 去提问

悬赏问题

¥20 西门子S7-Graph,S7-300，梯形图
¥50 用易语言http 访问不了网页
¥50 safari浏览器fetch提交数据后数据丢失问题
¥15 matlab不知道怎么改，求解答！！
¥15 永磁直线电机的电流环pi调不出来
¥15 用stata实现聚类的代码
¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
¥20 docker里部署springboot项目，访问不到扬声器
¥15 netty整合springboot之后自动重连失效
¥15 悬赏！微信开发者工具报错，求帮改

通过ajax添加部分视图

1条回答 默认 最新

悬赏问题

1条回答默认最新