Adding partial view via ajax

Question

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






    
        
             
        
        
            
            
            
            
            
            
            
            
            
            
        
        
            @using (Html.BeginForm())
            {
                @Html.AntiForgeryToken()
                
                    Username
                    @Html.TextBox("username", null, new { id = "username", @class = "form-control", @Value="us" })
                
                
                    Password
                    @Html.TextBox("password", null, new { id = "password", @class = "form-control", @Value = "pwd" })
                
                
                    
                    

                    
                    
                
            }
        
        
            @using (Html.BeginForm())
            {
                @Html.AntiForgeryToken()
                
                    Email
                    @Html.TextBox("email", null, new { id = "email", @class = "form-control", @Value = "jhjhblah" })
                
                
                    
                    
                
            }

Tetsuya Yamamoto · Accepted Answer

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

Adding partial view via ajax

Answers (1)

Related Questions