How to include the login form on the Home index page in MVC

Question

Hi guys I really need your help for this. I am relatively new to programming and I need help to something that could be easy for a experienced programmer.

I would like to get the login form that we get for free in an MVC application on the left sidebar of my Home index page instead of the usual Account/Login page.

I am facing some problems.

First I need a product object to be displayed on my Home Index page as well.

What I did is that I added a product object to the LogOnModel that they provide in the AccountModels class and I created a UserControl (partial view) copying the content of the LogOn.aspx view. Now my Home index.aspx as well as my partial view inherits the LogOnModel class.

I can see the Login form on my Home Index page as well as my product object BUT the login Form is never empty. The last username and password always appear there.

I know I must have forgotten something or have done something wrong or the way did it is completely wrong !!

Please could you give me some advice Thks

 <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<CoderForTradersSite.Models.LogOnModel>" %>

<h4>Login Form</h4>
    <p>
        Please enter your username and password. <%= Html.ActionLink("Register", "Register") %> if you don't have an account.
    </p>

    <% using (Html.BeginForm()) { %>
        <%= Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.") %>
        <div>
            <fieldset>
                <legend>Account Information</legend>

                <div class="editor-label">
                    <%= Html.LabelFor(m => m.UserName) %>
                </div>
                <div class="editor-field">
                    <%= Html.TextBoxFor(m => m.UserName) %>
                    <%= Html.ValidationMessageFor(m => m.UserName) %>
                </div>

                <div class="editor-label">
                    <%= Html.LabelFor(m => m.Password) %>
                </div>
                <div class="editor-field">
                    <%= Html.PasswordFor(m => m.Password) %>
                    <%= Html.ValidationMessageFor(m => m.Password) %>
                </div>

                <div class="editor-label">
                    <%= Html.CheckBoxFor(m => m.RememberMe) %>
                    <%= Html.LabelFor(m => m.RememberMe) %>
                </div>

                <p>
                    <input type="submit" value="Log On" />
                </p>
            </fieldset>
        </div>
    <% } %> 

Answer 1

2 things to consider here.. 1) You didn't have to mix the product and logon models.. Have the login form in a partial view, and create an action in the Account controller that will return the partial view:

public ActionResult LogonModule()
{
    return PartialView();
}

Then on your Index page, use the following snippet to display the logon panel: <%: Html.RenderAction("LogonModule", "Account") %> This way this panel will be completely independant from the main page model. It will add the logon module server-side, so it's completely transparent to the user.. The generated html is absolutely the same.

2) You're saying that the login/password fields are prepopulated. Are you completely sure that it's not the browser populating these fields? Most browsers do this, and it can lead to a lot of confusion :) Check the html. If the login and password are not there - then you're fine ^_^

Answer 2

Start by learning how it is working. What is the M, the V and the C, and how you make them communicate. If you just take the starting solution and start adding a bunch of stuff on top of it without thinking, your app will be a mess pretty quickly.

Adding a product to the LogonModel doesn't make sense for example. You should create your own model for the product and create a strongly typed partial view or a DisplayModel for it to be able to display it easily.Create new ViewModel for your pages that contains the right elements of your page and name them with something that makes sense to you.

You could start here for example :Build Your First ASP.NET Application with ASP.NET MVC