0

I have this fiddle here. It demonstrates a hover over and a box appearing with info in it.

What I'm trying to achieve is, when the "View Details" is hovered over, it triggers the MVC action Details(guid Id) and the result of that action is rendered in the box.

I'm not entirely sure how to do this. I would assume that a AJAX form is submitted on hover, so this will need to be done by JS (I really don't know how to do AJAX with JS). Then the div would be displayed with a newly rendered @Html.Action("Detail", "Stuff", new { Id = @item.Model.Id })

Am I close?

The View would be something like 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 for Details</span>
                @Html.HiddenFor(model => item.Id)
             }
         </td>
      </tr>
   }
   </tbody>
</table>

The action would purely be:

[ChildActionOnly]
public ActionResult Detail(Guid id)
{
    var item = _repository.Stuff.FirstOrDefualt(x => x.Id.Equals(id));

    return View(item);
}

So the specification is:

  • When "Hover for Details" has been hovered to show a box where the cursor is displaying the recently got details from the database

I've wrote this all off the top of my head, so don't scrutinise it for accuracy, its purely to demonstrate an idea, i'm not looking for errors in my code. I'm looking for ideas with valid working examples. Thanks.

Callum Linington
  • 13,082
  • 10
  • 61
  • 132

1 Answers1

1

1) Submit Ajax on Hover.

2) Follow the example here Render a view as a string to render your view as a HTML string within the server.

3) Use $("#showme").html(ReturnedHTMLData); to place the returned html into the 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);
 }
});
Community
  • 1
  • 1
kenny chung
  • 76
  • 6
  • Oh, and don't forget to cache the html data that get's returned from your JSON call to make it a little bit faster in the future :) – kenny chung May 21 '13 at 10:28
  • nice I'll give it a go, quicky question, why do you use `$().on("hover", function () {})` instead of `$().hover(function(){})` any particular reason or is it just your preference? – Callum Linington May 21 '13 at 10:41
  • I think it's more a preference thing for me. ".on" is from version 1.8 (I think) and is relatively new and is used for more dynamic pages where new items with events are being added to the page all the time. – kenny chung May 21 '13 at 10:44
  • See http://stackoverflow.com/questions/209029/best-way-to-remove-an-event-handler-in-jquery for more details :) – kenny chung May 21 '13 at 10:47
  • I haven't had a chance to test it yet, I'll get on it as soon as possible :) – Callum Linington May 21 '13 at 14:03