Cascading dropdown changing view and model ASP.NET and Razor

Question

I am newbie in ASP.NET MVC 3 and Razor. I want to make multiple forms in one view. All forms (in red rectangle) will show depend on what I choose in "Jenis Registrasi" dropdown (red arrow). Sometimes few forms need different model to load.

How the good implementation for this?

Sorry for unrepresentative title and question. Thanks for guiding me. :D

Answer 1

I kinda threw this together, but its similar to what I do in a lot of ajax situations. I'd certainly re factor out some of the logic. Maybe add blockUi into the JavaScript.

In your client you will have something like

$('RegistrasiDropDown').change(function () {
    $.get('@Url.Action("GetExtraFormFields")', { id: $('#RegistrasiDropDown').val() }, function (data)        {
        if (data.success == false) {
            //Handle Error
            });
        } else {
            $('#ExtraFormSection').html(data);
        }
    })
});

In Your controller you will have something like (in c#), but the concept will be the same in VB

public ActionResult GetExtraFormFields(string id)
    {
        try
        {
             var registrationItem= GetRegistrationItemById(id);
             if (condition1 == true) //Replace your own logic here.
             {
                 var model = new ModelType1 {
                     Prop1 = "foo";
                 }
                  return PartialView("_PartialView1", model)
             }
             else if ()//// and so on

        }                
        catch (Exception exception)
        {
            return  return Json(new { success = false, message = exception.msg }, JsonRequestBehavior.AllowGet);
        }
    }