làm thế nào để hiển thị một phần xem trên chuột trên văn bản trong MVC3?

Question

Tôi đang phát triển trang web bằng MVC3. Tôi tạo ra một phần xem trong đó có 4 hình ảnh được đặt theo chiều ngang. Bây giờ tôi có một cái nhìn đó là xem chi tiết và tôi hiển thị một văn bản. Khi người dùng di chuột qua trên văn bản đó, tôi muốn hiển thị một phần hình ảnh của tôi.

Cách thực hiện việc này?

Rất tiếc, tôi đang đưa câu hỏi khác vào cùng một câu hỏi vì tôi cho rằng câu hỏi đó có liên quan đến câu hỏi trên. Vì vậy, vấn đề tiếp theo của tôi là -

khi hình ảnh đó được hiển thị cho người dùng thì người dùng chọn một trong những hình ảnh từ danh sách đó và tùy thuộc vào điều này tôi phải thực hiện một số thao tác.

Tôi đã làm việc trên câu trả lời cho trước nhưng tôi biết rằng tôi không thể thực hiện thao tác khác như lựa chọn trên danh sách hình ảnh được hiển thị.

Làm cách nào để thực hiện việc này?

Answer 1

Bạn sẽ cần thực hiện việc này bằng JavaScript, có thể dễ dàng hơn bằng cách sử dụng jQuery (thư viện javascript).

Bạn sẽ cần phải xem một phần được bao bọc trong phần tử bị ẩn và sau đó hiển thị phần tử này khi người dùng di chuột qua.

Xem http://api.jquery.com/hover/ để biết thêm thông tin và ví dụ.

Cũng thấy ở đây cho một ví dụ cơ bản: http://jsfiddle.net/49bAz/

Answer 2

thử với jquery

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

Answer 3

Bạn cũng có thể quyết định gọi hành động trên di chuột sử dụng ajax (với một tham số nhận dạng hình ảnh). Cuộc gọi Ajax sẽ trả lại một phần lượt xem và sau đó bạn có thể bọc nó trong div và trình bày theo cách bạn muốn, ví dụ: sử dụng một số thư viện tooltip

Answer 4

Sử dụng jQuery để có được nội dung của quan điểm từng phần và hiển thị chúng trên moveover hoặc một hover:

Ví dụ:

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

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

đâu #container là khu vực tổ chức văn bản của bạn và #content là khu vực sẽ được hiển thị khi người dùng di chuột qua vùng chứa.

Answer 5

Nếu bạn muốn tải xem một phần động trên di chuột, bạn có thể làm điều đó bằng cuộc gọi 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); 
     } 

    }); 

}); 

Trong điều khiển của bạn, bạn sẽ cần phải có hành động tương tự như sau:

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