Multiple drop down box values send to controller

Question

I have to create an above kind of dynamic UI with drop down boxes.The values of drop down boxes are fixed as shown above.

My question is I need to send payment type drop down box values to mvc controller.I need to send value of selected drop down against the service key.I don't have any idea how to do that. Any idea?

UPDATE

Payment types can be like enum. It's look like below.

public enum PaymentOption
    {
        [Display(Name = "Select Payment Type")]
        None = 1,

        [Display(Name = "Service Hourly")]
        ServiceHourly = 2,

        [Display(Name = "Salary Flat Rate")]
        SalaryFlatRate = 3,

        [Display(Name = "% of Appointment")]
        PercentOfAppointment = 4,

        [Display(Name = "Per Appointment")]
        PerAppointment = 5,

    }

Answer 1

try this example code code

var url = '@Url.Action("Youractionname")';

        $.ajax({
            type: "POST",
            url: url,
            data: '{ddl1: "' + ddl1value+ '",ddl2: "' + ddl2value+ '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        });


    [HttpPost]
    public ActionResult Youractionname(int ddl1, int ddl2)
    {
        //do work
    }

Answer 2

You need to create a list for "services" and bind list items to your model.

public class Service {
  string Name { get;set;}
  int PaymentType { get;set;}
  float HourlyRate { get;set;}
}

public class MyModel { 
  ICollection<Service> services { get;set;}
  [...]
}

Then, follow this article to create your view and bind your services list correctly:

http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx