Geek asks and answers

How to show a partial view of the mouse over text in MVC3?

I am developing a website using MVC3. I created a partial view that contains 4 images placed horizontally. Now I have another view, which is a detailed view, and I displayed one text. When the user clicks on this text, I want to show my partial view of the image.

How to do it?

Sorry that I included another question in the same question because I think this relates to the above question. So my next problem is

when these images are displayed to the user, then the user selects one of the images from this list, and depending on this I have to perform some operation.

I worked on this answer, but I found out that I could not perform another operation, for example, selecting a list of displayed images.

How to do it?

+5
source share
5 answers

Use jQueryto get the contents of a partial view and display them on moveoveror hover:

For instance:

$("#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 #containeris the area in which your text is located, and #contentis the area that will be displayed when the user hovers over the container.

+3
source

If you want to dynamically load a partial view on hover, you can do this 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 act similarly 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);
     }
}
+2

JavaScript, , jQuery (javascript library).

, Partial View , , .

. http://api.jquery.com/hover/ .

. : http://jsfiddle.net/49bAz/

0

jquery

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

ajax ( , ). Ajax- , div , , .

0

More articles:


All Articles