jquery - ASP.Net MVC - updating areas of page based on drop down lists -

i have product page has 3 x drop down lists allow visitor select product attributes - example pair of trousers colour / waist size / leg length.

currently have drop downs hooked cascading use of jquery , json - each selection populates next drop down list down hierarchy calling jsonresult action via jquery within page.

when selections made, , visitor has decided upon product variant, need update page contents - elements such price / image / stock availability / long description , table of specifications can product variant specific. these page elements need change distributed throughout markup rather being in 1 block complicate matters little.

currently page (view) has these elements within main view - best way achieve changing page reflect visitors choice?

this webforms app made use of several updatepanels achieve same thing, relative mvc newbie i'm not sure of approach tackle kind of problem?

thanks.

basically have 3 major options:

1. display prerendered view data - on selection of third dropdown send ajax request server should return partial view. view going rendered model corresponds user selection. once can inject inside dom: $('#itemdetails').html(yourrenderedviewhtml) not familiar webforms think similar updatepanels technique used.

2. get raw data server , bind template - on selection of third dropdown send ajax request server should return json result requested data. once json arrives client need perform kind of model binding. can either manually (for each 1 of elements have $('#pricedisplayelement').text(model.price))`. or can use client side framework (for example knockout.js) make task easier.

3. there option of doing full postback server (instead of ajax call) re-render page. server side code like:

   public class itemmodel {    public int itemid{get;set;}    public string description {get;set;}    //all other props come here }  public class getitemdetailsviewmodel {    public itemmodel item{get;set;}    public int selecteditemid {get;set;}    //other properties cascading dropdowns    }   public actionresult getitemdetails(int? itemid) {     var model = new getitemdetailsviewmodel();    if(itemid.hasvalue)    {        model.item = //get item details db    }    return view(model); } 

inside view can check whether item property not null , render data correspondingly. if item property null display dropdowns.