Как мне показать MVC3 View во всплывающей подсказке Html.ActionList?

Question

Я хотел показать окно всплывающей подсказки, которое отображает представление "Подробности" внутри окна подсказки для ссылки:

@Html.ActionLink("Details", "Details", new { id=item.Id })

Как мне этого добиться?

Answer 1

Почти каждый элемент HTML может иметь атрибут title , и большинство браузеров отображают этот атрибут в качестве всплывающей подсказки.

Таким образом, вы хотите использовать одну из перегрузок ActionLink ., который позволяет устанавливать значения атрибутов, что-то вроде:

@Html.ActionLink("Details", "Details", new {id=item.Id}, new { title = "this is your tooltip" } )

Answer 2

Я обнаружил, что CSS-подход для всплывающих подсказок прост в реализации. Здесь является примером.В вашем случае вы бы определили CSS следующим образом:

.info {
    position:relative;
    z-index:24;
}

.info:hover {
    z-index:25;
}

.info span {
    display: none
}

.info:hover span {
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #000;
}

Если вы также хотите загружать всплывающие подсказки динамически, а не сразу, вам нужно использовать jQuery:

<script type="text/javascript">
    $(document).ready(function() {
        $(".tooltip").bind("mouseenter", function () {
            $(this).unbind("mouseenter");
            var param = {id: "$(this).attr('itemid')"};
            $(this).load("/Details/Details", param);
        });
    });

Наконец, вы можете использовать его следующим образом:

<span class="info">
    @Html.ActionLink("Details", "Details", new { id=item.Id })
    <span class="tooltip" itemid=item.Id></span>
</span>

Answer 3

должно быть var param = $(this).attr("param"); в фрагменте JavaScript Лестера