c# - MVC Hover Over Item in View to render View -

i have fiddle here. demonstrates hover on , box appearing info in it.

what i'm trying achieve is, when "view details" hovered over, triggers mvc action details(guid id) , result of action rendered in box.

i'm not entirely sure how this. assume ajax form submitted on hover, need done js (i don't know how ajax js). div displayed newly rendered @html.action("detail", "stuff", new { id = @item.model.id })

am close?

the view this

<table>    <thead>       <tr>          <td>name</td>          <td>e-mail</td>       </tr>    </thead>    <tbody>    @foreach (var item in model.itemlist)    {       <tr>          <td>@html.displayfor(model => item.name)</td>          <td>@html.displayfor(model => item.email)</td>          <td>@using(ajax.beginform(ajaxopts))              {                 <span>hover details</span>                 @html.hiddenfor(model => item.id)              }          </td>       </tr>    }    </tbody> </table> 

the action purely be:

[childactiononly] public actionresult detail(guid id) {     var item = _repository.stuff.firstordefualt(x => x.id.equals(id));      return view(item); } 

so specification is:

• when "hover details" has been hovered show box cursor displaying got details database

i've wrote off top of head, don't scrutinise accuracy, purely demonstrate idea, i'm not looking errors in code. i'm looking ideas valid working examples. thanks.

1) submit ajax on hover.

2) follow example here render view string render view html string within server.

3) use $("#showme").html(returnedhtmldata); place returned html dom object.

i.e. server side

public jsonresult getdetail(guid id) {  return json(viewtostringmethod(viewname, id), "rest of json allowget stuff"); } 

i.e. client side

$("#domelement").on("hover", function(){  $.getjson("getdetail", {id: $('this').attr("id"), function(returneddata){   $("#showme").html(returnedhtmldata);  } });