Question

I am developing a application for Sales Order Management using ASP.NET MVC 3.0. I need to develop a page where Customer Details can be added.

Customer Details Include

public class Customer
    {
        public int ID { get; set; }
        public string Code { get; set; }
        public string Name { get; set; }
        public string Alias { get; set; }
        public int DefaultCreditPeriod { get; set; }        
        public Accounts Accounts { get; set; }
        public IList<Address> Addresses { get; set; }
        public IList<Contact> Contacts { get; set; }
    }

public class Accounts
    {
        public int ID { get; set; }
        public string VATNo { get; set; }
        public string CSTNo { get; set; }
        public string PANNo { get; set; }
        public string TANNo { get; set; }
        public string ECCNo { get; set; }
        public string ExciseNo { get; set; }
        public string ServiceTaxNo { get; set; }
        public bool IsServiceTaxApplicable { get; set; }
        public bool IsTDSDeductable { get; set; }
        public bool IsTCSApplicable { get; set; }
    }

public class Address 
    {
        public int ID { get; set; }
        public AddressType Type { get; set; }        
        public string Line1 { get; set; }
        public string Line2 { get; set; }
        public string Line3 { get; set; }
        public string Line4 { get; set; }
        public string Country { get; set; }
        public string PostCode { get; set; }
    }

public class Contact
    {
        public int ID { get; set; }
        public ContactType Type { get; set; }
        public string Name { get; set; }
        public string Title { get; set; }
        public string PhoneNumber { get; set; }
        public string Extension { get; set; }
        public string  MobileNumber { get; set; }
        public string EmailId { get; set; }
        public string FaxNumber { get; set; }
        public string Website { get; set; }
    }

Customer Requires a single page to fill all the customer details(General info, Account Info,Address Info and Contact Info). There will be multiple Addresses(Billing, Shipping, etc) and multiple Contacts (Sales, Purchase). I am new to MVC. How to Create the View for the above and Add multiple Address dynamically?

Answer 1

I often create wrapper models to handle this kind of situation e.g.

public class CustomerWrapperModel
{
    public Customer Customer { get; set;}
    public Accounts Accounts { get; set;}
    public List<Address> AddressList { get; set}

    //Add
    public CustomerWrapperModel()
    {

    }

    //Add/Edit
    public CustomerWrapperModel(Customer customer, Accounts accounts, List<Address> addressList)
    {
        this.Customer = customer;
        this.Accounts = accounts;
        this.AddressList = addressList;
    }
}

then declare the View to be of type CustomerWrapperModel and use editors like so:

@model MyNamespace.CustomerWrapperModel

@Html.EditorFor(model => model.Customer)
@Html.EditorFor(model => model.Accounts)
@Html.EditorFor(model => model.AddressList)

and have a controller to receive the post that looks like this:

[HttpPost]
public ActionResult(Customer customer, Accounts accounts, List<Address> addressList)
{
   //Handle db stuff here
}

As far as adding addresses dynamically I found the best way to do this if you’re using MVC validation and want to keep the list structured correctly with the right list indexes so that you can have the List parameter in your controller is to post the current Addresses to a helper controller like this:

[HttpPost]
public PartialResult AddAddress(List<Address> addressList)
{
   addressList.Add(new Address);

   return PartialView(addressList);
}

then have a partial view that just renders out the address fields again:

@model List<MyNamespace.Address>

@{
    //Hack to get validation on form fields
    ViewContext.FormContext = new FormContext();
}

@Html.EditorForModel()

make sure you address fields are all in one container and then you can just overwrite the existing ones with the returned data and your new address fields will be appended at the bottom. Once you have updated your container you can do something like this to rewire the validation:

       var data = $("form").serialize(); 

       $.post("/Customer/AddAddress", data, function (data) {

            $("#address-container").html(data);

            $("form").removeData("validator");
            $("form").removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse("form");

        });

NB. I know some people with have an issue with doing it this way as it requires a server side hit to add fields to a page that could easily just be added client side (I always used to do it all client side but tried it once with this method and have never gone back). The reason I do it this way is because it’s the easiest way to keep the indexes on the list items correct especially if you have inserts as well as add and your objects have a lot of properties. Also, by using the partial view to render the data you can ensure that the validation is generated on the new fields for you out of the box instead of having to hand carve the validation for the newly added client side fields. The trade off is in most cases a minor amount of data being transferred during the ajax request.

You may also choose to be more refined with the fields you send to the AddAddress controller, as you can see I just post the entire form to the controller and ignore everything but the Address fields, I am using fast servers and the additional (minor) overhead of the unwanted form fields is negligible compared to the time I could waste coding this type of functionality in a more bandwidth efficient manner.