Home/ Questions/Q 8384643
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T17:27:20+00:00

I’m wondering how I should implement a multi-faceted account settings UI in ASP.NET MVC

  • 0

I’m wondering how I should implement a multi-faceted account settings UI in ASP.NET MVC 4, i.e., there’s one view for each settings facet (e.g. General settings, Email addresses…), that you navigate between with the help of a tab bar. Each settings view would share the same layout and only differ in terms of data, i.e., each view has a form with different fields.

These mockups should illustrate what I mean:

Generalk settings
Email settings

To elaborate, what’s the most efficient (DRY) way of generating these views with ASP.NET MVC 4? As you can see the views are constructed in the same way, and vary only in terms of the title and the fields of the form. There must be some simple way of re-using the common structure in the views, and simply specialize it for each of them, but I’m not sure how to do it.

The Solution

flem’s answer put me on the right track, but I revised it a little bit, in particular by making the settings layout nested.

Settings layout:

@model SettingsModelBase
@{
  Layout = "~/Views/Shared/_Layout.cshtml";
  ViewBag.Title = string.Format("Settings - {0}", ViewBag.SettingsSection);
}

<h1>@Model.SelectedPage.ToString()</h1>
<div class="account-section">
  @using (Html.BeginForm())
  {
    @RenderBody()
    <input type="submit" value="Update" />
    <input type="reset" value="Cancel" />
  }
</div>

Personal settings view:

@model PersonalSettingsModel
@{
  Layout = "_SettingsLayout.cshtml";
  ViewBag.SettingsSection = "Account";
}

@Html.EditorForModel()
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would suggest using a custom layout for settings pages and a model for each settings view, each extending the same base class. Something like this (note that I haven’t tested this code – it’s freehand):

    Base Model:

    public abstract class SettingsModelBase
{
    public SettingsPageEnum SelectedPage { get; set; }
}

    Personal details settings model:

    public class PersonalSettingsModel : SettingsModelBase
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Location { get; set; }
}

    View:

    @model PersonalSettingsModel
@{
    Layout = "SettingsLayout.cshtml";
}
@using(Html.BeginForm())
{
    <div>
        @Html.LabelFor(m => m.FirstName)
        @Html.EditorFor(m => m.FirstName)
        @Html.LabelFor(m => m.FirstName)
        @Html.EditorFor(m => m.FirstName)
    </div>
    <div>
        @Html.LabelFor(m => m.FirstName)
        @Html.EditorFor(m => m.FirstName)
    </div>
    <input type="submit" value="Save" />
}

    Layout:

    @model SettingsModelBase

<html>
    <head>
    </head>
    <body>
        @Model.SelectedPage.ToString()
        <div id="settingsdiv">
            @RenderBody()
        </div>
    </body>
</html>
    • 0