How to use two instances of the same .ascx in the same page in ASP.NET MVC?

Question

I have two instances of an Address.ascx control in an ASP.NET MVC page.

   <h1>Shipping Address</h1>
   <% Html.RenderPartial("Controls/AddressControl"); %>

   <h1>Billing Address</h1>
   <% Html.RenderPartial("Controls/AddressControl"); %>

Of course, with the code exactly like this I'll end up with the same IDs for each field in the address. I can easily append a string to the ID of the fields so I'd have 'Street1_billing' and 'Street1_shipping', but I'm not clear how to map this to the model.

Whats the best solution to mapping a model to an array of items (in this case only 2). I'm not aware of any ASP.NET 'out of the box' solution for this.

Note: This is slightly similar to this question and I could use this solution from Scott Hanselman, but its not exactly what I want. In my case I know I have two items, so its essentially a 2 item array but I'm wondering if there is a slightly more elegant solution.

PS. I'm sure this has been asked many times before, but I just cant seem to put in the right search terms. Please link this question if you're aware of dupes!

Answer 1

You can have a ViewModel

OrderCheckoutViewModel
{
    public Address ShippingAddress{get;set;}
    public Address BillingAddress{get;set;}
}

The values of formelements are mapped to the right Member of the ViewModel if they have the form

<input type="text" name="ShippingAddress.StreetAddress1"><input>

There is no easy and elegant way to come from StreetAddress1 to ShippingAddress.StreetAddress1. My address model has the form:

public class Address
{
    String StreetAddress1 { get; set }
    String StreetAddress2 { get; set }
    String City { get; set }
    String State { get; set }
    String Zip { get; set }
    String InstanceName{ get; set }
}

I set the InstanceName to the Name of the property (ShippingAddress).

Then the form elements are defined in this form

<input type="text" name="<%=Model.InstanceName%>.StreetAddress1"><input>

The place of the ascx looks uncommon. Any reason why you dont put it in Shared and access it by

<% Html.RenderPartial("AddressControl",Model.ShippingAddress); %>

?

Answer 2

First, add an Address class to the model.

public class Address
{
    String StreetAddress1 { get; set }
    String StreetAddress2 { get; set }
    String City { get; set }
    String State { get; set }
    String Zip { get; set }
}

In Address.ascx, you need a line at the top that inherits the Address model, like this:

<%@ Page Language="C#" 
    Inherits="System.Web.Mvc.ViewPage<MyProject.Models.Address>" %>

In the controller for the main view, push your two addresses into the ViewData.

Address myAddressObject1 = new Address
{
   AddressLine1 = "123 Anywhere Street",
   // ..etc.  Same with MyAddressObject2.  Or, just populate from database.
}

ViewData["Address1"] = myAddressObject1;
ViewData["Address2"] = myAddressObject2;
//
// do other stuff as needed
//
Return View();

In your main view, call your two Address subviews like this:

<%= Html.RenderPartial("Address", ViewData["Address1"]) %>
<%= Html.RenderPartial("Address", ViewData["Address2"]) %>