Model in Layout breaks other pages

Question

I have a design flaw based on my lack of MVC4 experience.

The issue is that I have a model in my Layout...

@model BasicFinanceUI.Models.LoginModel
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet"/>

    <title>@ViewBag.Title</title>
</head>

The reason it's on my Layout, is that the Login button is on the layout screen, and it launches a modal popup, which has fiends that use the model.

So, at the bottom of the layout, I have:

<div class="modal fade" id="login" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Login</h3>
                <div class="modal-body">
                    @using (Html.BeginForm("LoginUser", "User"))
                    {
                        <p>
                            @Html.LabelFor(x => x.Username)
                            @Html.TextBoxFor(x => x.Username)
                        </p>
                        <p>
                            @Html.LabelFor(x => x.Password)
                            @Html.PasswordFor(x => x.Password)
                        </p>
                        <p>
                            @Html.LabelFor(x => x.RememberMe)
                            @Html.CheckBoxFor(x => x.RememberMe)
                        </p>
                        <div class="modal-footer">
                            <input type="submit" value="Login" name="btn_login" class="btn btn-default" />
                            <a class="btn btn-primary" data-dismiss="modal">Cancel</a>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>

I also have a Login and Logout button on my /Home/Index, so the user see's two login buttons when on the default page. One on the main page, and one in the header/menu, which is shared.

I think having the model, and probably all the Login screen code, on the Layout page, might be the problem here. How should I be implementing this?

I need the Login button on the Index.cshtml page (Default), and the button in the Layout's menu at the top. And both use the model popup code shown above.

We put the login screen on its own. Once they pass the login, then they get redirected to the main program with the layout page. If you do want to put the login on the layout page, definitely put the code into a partial view — Matt Bodily, Dec 28 '13 at 05:57
Thanks... And then the model reference in the partial view, and it woun't interfere with the other views? — Craig, Dec 28 '13 at 06:01
a model on the layout page will still conflict with everything using that layout page. Use the partial but you will need to handle the model a little differently. Usually a login page just has a couple fields. If that is the case with yours you can just send those individual fields back to the controller with an ajax call so you don't need to use a model — Matt Bodily, Dec 28 '13 at 06:04
Thanks Matt... It does just have the three fields... Username, Password and RememberMe. At the moment, I am doing it with a LoginModel. I am pretty green at this. Is it possible to still use the model, rather than Ajax calls? (I haven't got to Ajax calls yet... :)) Failing though, as I am trying to use " @Html.RenderPartial("~/Views/User/_LoginUser.cshtml")", but it's red. — Craig, Dec 28 '13 at 06:08
it is but not from the layout page. I can help with the ajax call if you would like to go that route. Otherwise I would recommend moving the login page from your layout to your index page where you can pass the model through your view model. Just put a check on the view for logged in on whether to show the rest of the content — Matt Bodily, Dec 28 '13 at 06:10
Thanks Matt - Help with the Ajax call is maybe better then, and I'll be learning, which is what I am trying to do right now. — Craig, Dec 28 '13 at 06:12
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/44035/discussion-between-matt-bodily-and-craig) — Matt Bodily, Dec 28 '13 at 06:12

Matt Bodily · Accepted Answer · 2013-12-28T06:36:34.967

First build the view like you have it but instead of using helpers just build the html fields. Make sure you put an id or a class on the fields that we can use as a selector

<input type="text" class="txtUserName" /> etc

then make sure you have jquery referenced on the page and put this on the bottom of your screen

<script type="text/javascript">
    $(document).ready(function(){
        $('.btnSubmit').on('click', function(){
            $.ajax({
                url: "@(Url.Action("Action", "Controller")",
                type: "POST",
                contentType: "application/json",
                data: { UserName: $('.txtUserName').val(), Password: $('.txtPassword').val() }
                cache: false,
                async: true,
                success: function (result) {
                    alert('Login Successful!');
                    window.location = "@Url.Action("Index", "Controller")";
                }
            });
        });
    });
</script>

then on your controller you need to have a method set up to receive the ajax call

[HttpPost]
public ActionResult Login(string UserName, string Password){
    //Check the user name and password against the database
    //from here http://stackoverflow.com/questions/10608198/asp-net-mvc3-returning-success-jsonresult
    var result=new { Success="True", Message="Success"};
    return Json(result, JsonRequestBehavior.AllowGet);
}

Model in Layout breaks other pages

1 Answers1

Linked