Pass a viewModel to the layout

Question

I have this viewmodel that has some properties and stuff that i would like to apply to the layoutpage:

public class BasicViewModel
{
    public Page Page { get; set; }
    public List<Settings> Settings { get; set; }      
}

From other threads here have i understood that this is possible but i dont really understand how.

From what I understand I somehow need to modify a controller and this is where I get confused. How do I know what controller that has to be modified and how? Any help appreciated.

I would like to know, Why do you need to pass a viewModel to the layout? — Satpal, May 02 '14 at 11:53
@Satpal because that's what you do using the MVVM pattern... — Abbas, May 02 '14 at 11:54
In the controller that returns the view, you'll have to return your viewmodel instead of the 'real' model. Of course you'll have to edit your view accordingly. — germi, May 02 '14 at 11:55
By editing my view accordingly you mean putting for ex: @model basicViewModel at the top? — user2915962, May 02 '14 at 11:56
"In the controller that returns the view, you'll have to return your viewmodel instead of the 'real' model"...This is the confusing part to me, how do i do this? — user2915962, May 02 '14 at 11:57
@Abbas, I haven't face a situation where we need to pass viewModel to layout. Ideally you need to pass viewModel to view — Satpal, May 02 '14 at 11:58
@Satpal I'm confused, what is the layout then, is this not the view? — Abbas, May 02 '14 at 11:59
@user2915962: Try to read this: http://stackoverflow.com/questions/16814566/what-role-does-mvvm-play-in-asp-net-mvc-4-web-applications — Will Marcouiller, May 02 '14 at 11:59
@Abbas, _layout is like a master page, this might give you a better idea http://www.asp.net/web-pages/tutorials/introducing-aspnet-web-pages-2/layouts — Satpal, May 02 '14 at 11:59
@Satpal: Layout is anything but a master page. The layout is only the way things are displayed on your view. The class LayoutRoot corresponds to the way all you other VIEWS shall look like. — Will Marcouiller, May 02 '14 at 12:01
@user2915962: This has a step by step example, try and follow it first in order to understand the dynamic between each objects and how they relate on each other, then try it on your project: http://blogs.microsoft.co.il/helpercoil/2010/08/28/aspnet-mvc-and-the-mvvm-pattern/ — Will Marcouiller, May 02 '14 at 12:03

Ankush Jain · Answer 1 · 2014-05-02T13:38:53.903

1

In controller, Prepare an action like

public ActionResult BasicViewModelDemo
{
           BasicViewModel obj=new BasicViewModel()
           // assign properties

            return View(obj);
}

and view write some jquery. (Here i am using knockout to make view model)

<script>
   var model='@Html.Raw(Json.Encode(Model))';
   var viewmodel = ko.mapping.fromJSON(model);
</script>

edited May 02 '14 at 13:38

answered May 02 '14 at 12:08

Ankush Jain

5,654
4
32
57

score 0 · Accepted Answer · answered May 02 '14 at 13:48

Here goes my solution -

Lets say you have a model of this way -

public class BasicViewModel
{
    public Page Page { get; set; }
    public List<Settings> Settings { get; set; }
}

public class Page
{
    public string PageName { get; set; }
}

public class Settings
{
    public string SettingName { get; set; }
}

Then in the controller you should initiate the model in this way -

public class HomeController : Controller
{
    BasicViewModel model;
    public HomeController()
    {
        model = new BasicViewModel();
        model.Page = new Page();
        model.Settings = new List<Settings>();
    }

    public ActionResult Index()
    {
        model.Page.PageName = "My Page";
        ViewBag.LayoutModel = model;
        return View();
    }
 }

So basically we used Constructor to initiate the model and then we assign proper values in the controller action.

Then in the Layout, we can use the Model property as shown below -

<div> @ViewBag.LayoutModel.Page.PageName </div>

Pass a viewModel to the layout

2 Answers2