jquery - Ajax to refresh mutpliple parts of View -

i need advice on using ajax. designing view show tabulated data in main (upper) part. each row link select refresh / fill 2 div containers data corresponding link select clicked.

i know use $.load() or $.get() helpers of jquery $('#select') trigger async request ajax. $.get() has overloaded version send object routesvlue controller. think need javascript function this. there's 1 thing don't know how sort out, easy do. need somehow distinguish between select links can execute same javascript function requesting different data. hope makes sense. value provide distinction id.

so have 20 select links , each of them should execute function, send request based on different id, data html, json etc. , refresh div containers corresponding data.

i don't know if should use partialviews or json or partialviews in 1 partialview!

how can sort it.

ps> think can use @html.actionlink(0 avoid hardcoded strings in ajax.

---

edit: let's have data:

number  start       end         target          usage        a0000   24/11/2014  27/11/2014  non-commercial  null            select a0000   02/05/2013  29/05/2013  academic        student00       select a0000   28/12/2013  17/02/2014  non-commercial  student00       select a0000   16/04/2014  27/01/2014  non-commercial  null            select a0000   15/02/2014  14/01/2014  academic        student00       select a0000   06/08/2014  14/02/2014  academic        null            select a0000   08/11/2014  04/03/2014  non-commercial  null            select a0000   26/05/2014  13/04/2014  academic        student00       select 

the last column contains links populate 2 other div containers. when click on select want details of studentxx in 1 container, let's div1 , modules assigned in div2. if had 1 partial view fill, i'd use @ajax.actionlink("select", "details", "students", <ajax options>, new { studentid = m.id }) etc. because want ajax 2 operations simultaneously, afraid need make own function in javascript:

function populatedivs(studentid) {    $('#select').click(function(e) {       e.preventdefault();       var url1 = ('/students/details?id=').concat(studentid);       var url2 = ('/modulejunction/list?id=').concat(studentid);       $.get(url1, function(data) {          $('#div1').html(data);       });       $.get(url2, function(data) {          $('#div2').html(data);       });    }); } 

i can't make work. how set selects invoke populatedivs(studentid) different parameters. on other hand, jquery unobtrusive prefer use. name each select link corresponding studentid, 'student1','student5', etc. in jquery, $('#student1').click() handle click event if have 20 links, need make 20 functions. there must solve it.

---

edit2:

<tr>     <th>app. no.</th>     <th>start</th>     <th>end</th>     <th>target</th>     <th>usage</th>     <th>link paper version</th>     <th>info</th>     <th colspan="3"></th> </tr> <tr>     <td>app0001</td>     <td>01/06/2014</td>     <td>08/06/2014</td>     <td>non-commercial</td>     <td>null</td>     <td></td>     <td></td>     <td><span class="link-to-details" data-id="1">select</span></td>     <td><a href="/applications/edit?applicationid=1">edit</a></td>     <td><a href="/applications/delete?applicationid=1">delete</a></td> </tr> 

you can use jquery .data() store , retrieve arbitrary data element. assuming model ienumerable<student> , student has property studentid, in view

<table>   ....   <tbody>     @foreach(var item in model)     {       <tr>         // other table cells         <td><button type="button" class="details" data-id="@item.studentid">select</button><td>         ...       <tr>     }   </tbody> </table> <div id="studentdetails"></div> <div id="studentmodules"></div> 

and in script

$('.details').click(function() {   var studentid = $(this).data('id'); // student id associated element   $('#studentdetails').load('@url.action("details", "student")', { id: studentid });   $('#studentmodules').load('@url.action("modules", "student")', { id: studentid }); }); 

where controller methods are

public partialviewresult details(int id) {   var model = // student details based on id   return partialview(model);  }  public partialviewresult modules(int id) {   var model = // student modules based on id   return partialview(model);  } 

note have used button rather a element (your not navigating), can styled link if want. using jquery .load() rather @ajax.actionlink() means can delete jquery.unobtrusive-ajax.js file.