MVC4 link between view and controller

Question

I'm writing my first MVC app (MVC4). A lot of it's been generated using the excellent Razor tools in VS2010, but now I've run into a wall and I feel I don't understand something fundamental.

In my app,

• a User can have access to many Clients.
• I have a Client Controller and View.
• I have a User Controller and View (expanded version of the simple membership's UserProfile, populated using User.Identity).

What I want to do is let the user edit a client's details and ALSO edit their own account details on the same page.

I've tried using Html.Partial to add the UserProfile view to the Client view, but it bombs out trying to pass the UserProfile view the Client model.

How do I make the Client view call the UserProfile controller so it can read the User.Identity and return the correct UserProfile view?

I tried making it a viewmodel with both the client and userprofile classes attached, and doing it all on the one screen, but it refused to send values to the controller on submit.

Client view:

@model MyProject.Client
<div>
 @Html.Partial("_AcctDetailsPartial")
</div>
<div>
 @using (Html.BeginForm())
{
.
.
.
@Html.HiddenFor(model => model.ClientID)
{
.
.
.    
 <client fields>
{
.
.
.    
 <div class="form-actions">
      <button type="submit" name="ButtonName" value="Company" class="btn blue"><i class="icon-ok"></i> Save</button>
       <button type="button" class="btn">Cancel</button>
 </div>
}

</div>

UserProfile View:

@model Surecall.UserProfile

<div style="height: auto;" id="accordion1-1" class="accordion collapse">
@using (Html.BeginForm())
{
        <h3 class="form-section">Personal Info</h3>
        <label class="control-label">First Name</label>
        @Html.TextBoxFor(m => m.FirstName, new { @class = "m-wrap span8", @id="FirstName" })
        <label class="control-label">Last Name</label>
        @Html.TextBoxFor(m => m.Surname, new { @class = "m-wrap span8" })
        <label class="control-label">Phone Number</label>
        @Html.TextBoxFor(m => m.Mobile, new { @class = "m-wrap span8" })
        <label class="control-label">Email</label>
        @Html.TextBoxFor(m => m.Email, new { @class = "m-wrap span8" })
        <label class="control-label">Position</label>
        @Html.TextBoxFor(m => m.Occupation, new { @class = "m-wrap span8" })
            <label class="control-label">Interests</label>
        @Html.TextBoxFor(m => m.Interests, new { @class = "m-wrap span8" })
        <div class="form-actions">
            <button type="submit" name="SaveLoginDetails" value="SaveUser" class="btn green"><i class="icon-ok"></i> Save</button>
            <button type="button" class="btn">Cancel</button>
        </div>
}

</div> 

Answer 1

What you are looking for is a Viewmodel. Right now, your controller serves back a view consisting of the "Client" class/model. But you want a view consisting of Client + UserProfile.

I am not considering unut of work, repository and similar patterns. What you first need is to create the viewmodel

public class ClientUserProfileVM()
{
  public Client client {get; set; }
  public UserProfile user { get; set; } //use actual Usermodel here
}

In your controller write something like this

public ActionResult GetClientAndUser()
{
  ClientUserProfileVM viewmodel = here comes some LINQ magic
                                  select new ClientUserProfileVM {
                                                                  client,
                                                                  user
                                                                 };
  return View(viewmodel);
}

This way you are giving a viewmodel to your view consiting of a client and a user, which you can access with @model.user or @model.client in your view

There are plenty of interseting links for this:

ViewModel Best Practices

What is ViewModel in MVC?

http://www.youtube.com/watch?v=AkptHlDSKSQ