asp.net mvc - Understanding how DropDownListFor is working in MVC3 -

i'm new mvc3 , have been working on small site using ef , 'code first'. i'm trying few things in view dealing drop down list , wondering best way go them is. want user able select rule dropdownlist, , depending upon rule selected, label on page show rule name (without posting). need able send selected rule onto next page. haven't added of necessary fields view yet because i'm @ loss on how should work. how should go trying this?

i've got model:

public class d1k2n3carule {     public int id { get; set; }     [required]     public int name { get; set; }     [required]     public string rule { get; set; }      public d1k2n3carule(int name, string rule)     {         name = name;         rule = rule;     }     public d1k2n3carule()     {         name = 0;         rule = "";     } } 

my viewmodel:

public class d1k2n3caruleviewmodel {     public string selectedd1k2n3caruleid { get; set; }     public ienumerable<d1k2n3carule> d1k2n3carules { get; set; } } 

my controller:

    public actionresult index()     {         var model = new d1k2n3caruleviewmodel         {             d1k2n3carules = db.d1k2n3darules         };          return view(model);     } 

and view:

'@model cellularautomata.models.d1k2n3caruleviewmodel  @{     viewbag.title = "index"; } <asp:content id="head" contentplaceholderid="head" runat="server"> <script type="text/javascript"> </script> </asp:content> <h2>index</h2>  <table>     <tr>         <td>             @html.dropdownlistfor(                 x => x.d1k2n3carules,                 new selectlist(model.d1k2n3carules, "id","rule")             )         </td>     </tr> </table>' 

i want user able select rule dropdownlist, , depending upon rule selected, label on page show rule name (without posting)

you need javascript here. jquery perfect job. start providing deterministic id dropdown because if run view inside template there prefixes added id ruin our javascript id selectors (see below):

@html.dropdownlistfor(     x => x.d1k2n3carules,     new selectlist(model.d1k2n3carules, "id", "rule"),     new { id = "ruleddl" } ) 

then provide container receive selected value:

<div id="rulevalue" /> 

and in separate javascript file subscribe change event of dropdown list , update container selected value/text:

$(function() {     // subscribe change event of dropdown     $('#ruleddl').change(function() {         // selected text dropdown         var selectedtext = $(this).find('option:selected').text();          // if wanted selected value could:         // var selectedvalue = $(this).val();          // show value inside container         $('#rulevalue').html(selectedtext);     }); }); 

i need able send selected rule onto next page.

you put dropdown inside form

@using (html.beginform("nextpage", "foo")) {     @html.dropdownlistfor(         x => x.d1k2n3carules,         new selectlist(model.d1k2n3carules, "id","rule")     )         <input type="submit" value="go next page" /> } 

and nextpage controller action receive selected value.