jak pokazać częściowy widok na myszy nad tekstem w MVC3?

Question

Zajmuję się tworzeniem strony internetowej przy użyciu MVC3. Stworzyłem częściowy widok, który zawiera 4 obrazy umieszczone poziomo. Teraz mam inny widok, który jest widokiem szczegółów i wyświetliłem jeden tekst. Kiedy użytkownik najedzie myszą na ten tekst, chcę pokazać mój częściowy widok obrazu.

Jak to zrobić?

Przepraszam, że dołączam kolejne pytanie w tym samym pytaniu, ponieważ uważam, że jest ono istotne dla powyższego pytania. Więc mój następny problem to -

kiedy obrazy pokazywane użytkownikowi, to użytkownik wybiera jedno z obrazów z tej listy i w zależności od tego muszę wykonać jakąś operację.

Pracowałem nad podaną odpowiedzą, ale dowiedziałem się, że nie mogę wykonać innej operacji, takiej jak zaznaczenie na wyświetlonej liście obrazów.

Jak to zrobić?

Answer 1

Będziesz musiał to zrobić za pomocą JavaScriptu, prawdopodobnie łatwiej używając jQuery (biblioteki javascript).

Będziesz musiał owinąć swój Częściowy widok w ukryty element, a następnie pokazać ten element, gdy użytkownik się podniesie.

Aby uzyskać więcej informacji i przykładów, zobacz artykuł http://api.jquery.com/hover/.

patrz także tutaj na prostym przykładzie: http://jsfiddle.net/49bAz/

Answer 2

spróbować z jQuery

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

Answer 3

Można również zdecydować, aby wywołać akcję pod kursorem myszy za pomocą technologii AJAX (z parametrem, który identyfikuje obraz). Wywołanie Ajax zwróci częściowy widok, a następnie można go zawinąć w div i zaprezentować tak, jak chcesz, np. korzystania niektóre biblioteki podpowiedzi

Answer 4

Używaj jQuery aby uzyskać zawartość częściowego widoku i wyświetlać je na moveover lub hover:

Na przykład:

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

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

Gdzie #container to obszar posiadający swój tekst i #content to obszar, który będzie wyświetlany, gdy użytkownik znajdzie się nad kontenerem.

Answer 5

Jeśli chcesz załadować częściowy widok dynamicznie przy aktywowaniu, można to zrobić za pomocą połączenia jquery ajax:

$("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); 
     } 

    }); 

}); 

W kontrolerze trzeba będzie mieć działanie podobne do tego:

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); 
    } 
}