c# - Razor/Javascript, best practice -

im pretty new mvc-razor , left code thats abit confusing me.

i have model in view , model create list.

      @for each item in model                   @<li><a href="#" data-id="itemone">click me</a></li>                 

i have javascript makes bindning;

$("a[data-id]").click(function(e) {     $( "#popup" ).dialog({resizable: false, width:800, height: 400, title: ""  }); });  

and populate static window;

<div id="popup" title="popup">   <h1>mypopup<h1>  </div> 

all code in 1 view

i want populate window of models-item-data (ie, item click on gives me popup items data) , have come locked mindset, idea have kind of open razor variable model data, loop through items create equal amounts of pop-up-window given identifier, when javascript called use variable there. feel stupid. there easy (better looking)way solve problem?

you use ajax. have real anchor controller action return partial view. , when anchor clicked send ajax request action , update dom.

i guess example might worth it:

@for each item in model     @<li>@html.actionlink("click me", "someaction", "somecontrollername", new { key .id = item.id }, new { key .class = "popup" })</li>   

and unobtrusively ajaxify anchor:

$('a.popup').click(function(e) {     $.ajax({         url: this.href,          type: 'get',         cache: false,         success: function(result) {             $('#popup').html(result).dialog({                 resizable: false,                  width: 800,                  height: 400,                  title: ''             });         }     });      return false; }); 

and of course have corresponding controller action render partial:

function someaction(byval id integer)     dim model = ... model somewhere using id     return partialview(model) end function