.net MVC 4 step wizard correct way to populate viewmodels?

Question

I followed Darin's post at multi-step registration process issues in asp.net mvc (splitted viewmodels, single model)

Its a very elegant solution, however im having trouble seeing how you would populate the individual step viewmodels with data. Im trying to emulate amazons checkout step-system which starts with selecting an address, then shipping options, then payment information.

For my first viewmodel i require a list of addresses for my current logged in user which i poll the database for to display on screen

In my head, this is the viewmodel that makes sense to me.

[Serializable]
public class ShippingAddressViewModel : IStepViewModel
{
    public List<AddressViewModel> Addresses { get; set; }

    [Required(ErrorMessage="You must select a shipping address")]
    public Int32? SelectedAddressId { get; set; }


    #region IStepViewModel Members

    private const Int32 stepNumber = 1;

    public int GetStepNumber()
    {
        return stepNumber;
    }

    #endregion
}

However there seems to be no good way to populate the addresses from the controller.

public class WizardController : Controller
{
public ActionResult Index()
{
    var wizard = new WizardViewModel();
    wizard.Initialize();
    return View(wizard);
}

[HttpPost]
public ActionResult Index(
    [Deserialize] WizardViewModel wizard, 
    IStepViewModel step)
{
    wizard.Steps[wizard.CurrentStepIndex] = step;
    if (ModelState.IsValid)
    {
        if (!string.IsNullOrEmpty(Request["next"]))
        {
            wizard.CurrentStepIndex++;
        }
        else if (!string.IsNullOrEmpty(Request["prev"]))
        {
            wizard.CurrentStepIndex--;
        }
        else
        {
            // TODO: we have finished: all the step partial
            // view models have passed validation => map them
            // back to the domain model and do some processing with
            // the results

            return Content("thanks for filling this form", "text/plain");
        }
    }
    else if (!string.IsNullOrEmpty(Request["prev"]))
    {
        // Even if validation failed we allow the user to
        // navigate to previous steps
        wizard.CurrentStepIndex--;
    }
    return View(wizard);
    }
}

So i removed the list of address view models

[Serializable]
public class ShippingAddressViewModel : IStepViewModel
{
    [Required(ErrorMessage="You must select a shipping address")]
    public Int32? SelectedAddressId { get; set; }


    #region IStepViewModel Members

    private const Int32 stepNumber = 1;

    public int GetStepNumber()
    {
        return stepNumber;
    }

    #endregion
}

This is what i came up with a custom editor template for the view model. It calls a Html.RenderAction which returns a partial view from my user controller of all the addresses and uses Jquery to populate a hidden input field for the view model's required SelectedAddressId property.

@model ViewModels.Checkout.ShippingAddressViewModel

<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //Check to see if the shipping id is already set
        var shippingID = $("#SelectedAddressId").val();

        if (shippingID != null) {
            $("#address-id-" + shippingID.toString()).addClass("selected");
        }

        $(".address-id-link").click(function () {
            var shipAddrId = $(this).attr("data-addressid").valueOf();
            $("#SelectedAddressId").val(shipAddrId);
            $(this).parent("", $("li")).addClass("selected").siblings().removeClass("selected");
        });
    });

</script>

<div>
    @Html.ValidationMessageFor(m => m.SelectedAddressId)
    @Html.HiddenFor(s => s.SelectedAddressId)
    <div id="ship-to-container">
        @{Html.RenderAction("UserAddresses", "User", null);}
    </div>
</div>

And the users controller action

[ChildActionOnly]
        public ActionResult UserAddresses()
        {
            var user = db.Users.Include("Addresses").FirstOrDefault(
                u => u.UserID == WebSecurity.CurrentUserId);

            if (user != null)
            {
                return PartialView("UserAddressesPartial", 
                    Mapper.Map<List<AddressViewModel>>(user.Addresses));
            }

            return Content("An error occured");
        }

The partial view

@model IEnumerable<AddressViewModel>

<ul>
    @foreach (var item in Model)
        {
        <li id="address-id-@item.AddressID">
            @Html.DisplayFor(c => item)
            <a class="address-id-link" href="#" data-addressid="@item.AddressID">Ship To this Address
            </a></li>
        }
</ul>

My solution just seems super out of the way/sloppy to me, is there a better more concise way to populate the viewmodel than using partial views from a different controller for this?

score 1 · Accepted Answer · answered Apr 12 '13 at 21:10

There's nothing wrong with using a child action like this to populate the user's addresses. In fact, I think this is actually the optimal approach. You've got full separation of concerns and single responsibility in play. Just because something requires more "pieces" (extra action, views, etc.) doesn't make it sloppy or otherwise wrong.

The only other way to handle this would be with dependency injection. Namely, your ShippingAddressViewModel would need a dependency of the currently logged in user, so that it could populate the list of addresses from that in its constructor. However, since ShippingAddressViewModel is not exposed in your view, you would have to pass the dependency through Wizard which is a bit of code smell. Wizard is not dependent on a user, but it would have dependence forced upon it by virtue of having your view model abstracted away inside it.

Long and short, while there's a way you could do this without the child actions and partial views, it would actually be nastier and sloppier than with them.

.net MVC 4 step wizard correct way to populate viewmodels?

1 Answers1