Login + Register + another model in a single view? - asp.net-mvc

Question

I am trying to find the best solution so that on any given page I always have a login model, a register model and another model (or more). The login and register models are found in the navbar and the footer respectively on each page.
Specifically I have a situation whereby I have a course page which populates from a table depending on which course has been looked up via the url inputted. So the page loads the course page model. On the same page in the header and footer I need to have the login and register forms which both require their own models.
The course page is populated using a foreach loop:
COURSE PAGE VIEW (SHORTENED):
#model IEnumerable<oltinternational_mvc.Models.Course_page>
#{
Layout = "~/Views/Shared/_courselayout.cshtml";
foreach (var cpage in Model) { ViewBag.Title = #cpage.page_title; }
}
#foreach (var cpage in Model)
{
if (cpage.template_type == 2)
{
<div id="main_container">
<article class="content">
<h1>
#cpage.Title
</h1>
<section>
#Html.Raw(cpage.main_image)
<h3>
#cpage.Country
</h3>
<p>#cpage.intro_1</p>
#if (!string.IsNullOrEmpty(cpage.intro_2))
{
<p>#cpage.intro_2</p>
}
#if (!string.IsNullOrEmpty(cpage.intro_3))
{
<p>#cpage.intro_3</p>
}
View sample pages
#if (!string.IsNullOrEmpty(cpage.website_button))
{
#Html.Raw(cpage.website_button)
}
else {
Licensing options
}
#Html.Raw(cpage.popup_script)
<div class="clearfloat"></div>
</section>
</article>
</div>
The controller is as follows:
public ActionResult Course_page(string id)
{
string abbrev = id;
var cpage = from c in db.Course_page
select c;
if (!String.IsNullOrEmpty(abbrev))
{
cpage = cpage.Where(x => x.abbrev.Contains(abbrev));
}
return View(cpage);
}
and the model:
[Table("course_page")]
public class Course_page
{
[Key]
public int CourseID { get; set; }
public string Meta { get; set; }
public string Title { get; set; }
public string Country { get; set; }
public string main_image { get; set; }
public string list_1 { get; set; }
public string list_2 { get; set; }
public string list_3 { get; set; }
public string list_4 { get; set; }
public string list_5 { get; set; }
public string list_6 { get; set; }
public string list_7 { get; set; }
public string list_8 { get; set; }
public string list_9 { get; set; }
public string list_10 { get; set; }
public string testim_1 { get; set; }
public string testim_2 { get; set; }
public string testim_3 { get; set; }
public string course_site { get; set; }
public string popup_script { get; set; }
public string abbrev { get; set; }
public string page_title { get; set; }
public int template_type { get; set; }
public string intro_1 { get; set; }
public string intro_2 { get; set; }
public string intro_3 { get; set; }
public string website_button { get; set; }
}
In the navbar I have the following list item which references my ajax logging in form:
<li class="login">
<span>Login</span>
#using (Ajax.BeginForm("login", "Account", new AjaxOptions
{
HttpMethod = "POST",
UpdateTargetId = "login_box"
}, new { id = "login_box" }))
{
#Html.Partial("_login")
}
</li>
Which loads this form:
#model myproject_mvc.Models.LoginViewModel
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div id="login_box">
<div class="sign_up_box"> Sign up in seconds </div>
#Html.ValidationSummary(true)
#Html.AntiForgeryToken()
<div class="login_box_lower">
<p class="login_box_or">or</p>
<p class="login_sign_in">Sign in</p>
<div style="position:relative;">
#Html.EditorFor(model => model.Email, new { htmlAttributes = new { placeholder = "Email", maxlength = "18", #class = "login_username clearable" } })
<span class="login_username_icon"></span>
</div>
<div style="position:relative;">
#Html.EditorFor(model => model.Password, new { htmlAttributes = new { placeholder = "Password", maxlength = "18", #class = "login_pw clearable" } })
<span class="login_pw_icon"></span>
</div>
Login
<div class="clearfloat"></div>
Forgot password?
</div>
</div>
With the following model:
public class LoginViewModel
{
[Required]
[Display(Name = "Email")]
[EmailAddress]
public string Email { get; set; }
[Required]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password { get; set; }
[Display(Name = "Remember me?")]
public bool RememberMe { get; set; }
}
The same situation is such for the Register form in the footer, which uses the RegisterViewModel. Bearing in mind the actual form above for logging in isn't completed yet, it just directs to a /account url for now.
I've tried a few solutions I've found online but can't seem to make any of them work, I think in part because I am using foreach to populate the view from the course page model. I don't see how I can use a viewmodel because I am using a foreach loop on the page.
What I would like to know is what is the best way to deal with this situation?

Answer 1

You should create and use viewmodel(s) instead of directly referencing your objects. Perhaps something like this.
Create a new class, MyViewModel.cs (or whatever name you prefer)
public class MyViewModel
{
public IEnumerable<oltinternational_mvc.Models.Course_page> CoursePages { get; set; }
public myproject_mvc.Models.LoginViewModel { get; set; }
}
Now in your view, instead of referencing the models directly, you would reference the view model. Something like #model myproject_mvc.ViewModels.MyViewModel
In your foreach loop you would so something like this #foreach (var cpage in Model.CoursePages)