I'm developing web site using MVC3. I created a partial view which contains 4 images placed horizontally. Now i have another view that is detail view and i displayed one text. When user mouse over on that text i want to show my partial view of an image.

How to do this ?

Sorry that i'm including another question in same question because i think it is relevant to above question. So my next issue is -

when that images shown to the user then user select one of image from that list and depending on this i have to perform some operation.

I worked on given answer but i e to know that i can't perform other operation like selection on shown image list.

How to do this too ?

I'm developing web site using MVC3. I created a partial view which contains 4 images placed horizontally. Now i have another view that is detail view and i displayed one text. When user mouse over on that text i want to show my partial view of an image.

How to do this ?

Sorry that i'm including another question in same question because i think it is relevant to above question. So my next issue is -

when that images shown to the user then user select one of image from that list and depending on this i have to perform some operation.

I worked on given answer but i e to know that i can't perform other operation like selection on shown image list.

How to do this too ?

• javascript
• jquery
• asp-mvc
• asp-mvc-3
• partial-views

5 Answers 5

Use jQuery to get the contents of the partial view and display them on moveover or a hover:

For example:

$("#container").mouseover(function() {
   $.ajax({
    url: "@Url.Action("YourPartialView")",
    type: "GET",
    success: function(data) {
        var htmlx = data; // the View

        $("#content").append(htmlx);
        $("#content").slideDown('slow');
        }
    }); 
});

Where #container is the area holding your text and #content is the area that will be displayed when the user hovers over the container.

If you want to load the partial view dynamically on hover, you can do it using jquery ajax call:

$("img.your-class").mouseover(function () {

   // get the image ID - modify according to your markup
   var imageId = $(this).data('image-id');

   $.ajax({

       // use the imageId from above here
       url: "add-your-view-url", 

       success: function(data) {
          $("#target-div-id").html(data);
       }

    }); 

});

In your controller you will need to have action similar to this:

public ActionResult Action(int imageId)
{
     // get the model for your partial view
     var model = GetModel(imageId);

     // you can optionally return different result based on request type
     if (Request.IsAjaxRequest())
     {
          // update with actual path of your partial view
          return PartialView("path-to-your-view", model);
     }
}

try with jquery

$("#id").mouseover(function () {
   $.ajax({
       url: 'url',
       success: function (response) {
        $(response.responseText).appendTo($('body'));
    }
   });
});

You can also decide to call the action on mouse hover using ajax (with a parameter that identifies the image). Ajax call will return partial view and then you can wrap it in a div and present the way you want, e.g. using some tooltip library

You will need to do this using JavaScript, probably easier using jQuery ( a javascript library ).

You will need to have your Partial View wrapped in a hidden element, and then show this element when a user hovers over.

See http://api.jquery./hover/ for some more information and examples.

Also see here for a basic example: http://jsfiddle/49bAz/