Макет MVC3 с использованием jquery и частичного просмотра

То, что я пытаюсь достичь, - это функциональность вида макета, где у меня есть вкладки в верхней части всплывающего окна, которое также является частичным представлением, и я могу щелкнуть по ним, чтобы перемещаться между разными страницами с помощью jquery и частичные представления . Практически функциональность макета.введите здесь описание изображения

Пожалуйста, дайте мне знать, если есть видеоурок или какие-либо рекомендации о том, как этого добиться. Также мне нужно будет передать идентификатор частичному представлению, чтобы получить информацию.

Спасибо!


person OBL    schedule 13.07.2012    source источник
comment
Вы искали вкладку jQuery в Google? Много..   -  person Shyju    schedule 13.07.2012
comment
Я поищу это. Спасибо! Есть ли что-то конкретное, что будет иметь дело с моей ситуацией?   -  person OBL    schedule 13.07.2012
comment
Диалог пользовательского интерфейса jQuery, вкладки jQuery, затем терпение, чтобы попробовать код самостоятельно   -  person Shyju    schedule 13.07.2012
comment
У меня сжатые сроки. Спасибо за помощь.   -  person OBL    schedule 13.07.2012
comment
Когда вы называете фреймворк ASP.NET MVC просто MVC, это все равно, что называть IE Интернетом.   -  person tereško    schedule 14.07.2012


Ответы (1)


Есть несколько способов сделать это:

1) Как и некоторые люди, упомянутые в комментариях выше, вы можете реализовать JQuery .tab(). Вот руководство, которому вы можете следовать: http://www.jacklmoore.com/notes/jquery-tabs

2) Вы можете создать частичное представление, которое будет отображаться как JQuery .dialog(). В этом частичном представлении вверху у вас могут быть три ссылки, соответствующие трем заголовкам вкладок.

Каждая ссылка будет вызывать JQuery .show() для div, который будет содержать содержимое «вкладки», которое вы хотите отобразить, и .hide() для других. Обычно я просто передаю идентификатор div (tab), который хочу отобразить примерно так:

function displaySelectedTab(selectedTab) {
    $("#tab1").hide();
    $("#tab2").hide();
    $("#tab3").hide();

    $(selectedTab).show();
}

3) Третий вариант — иметь отдельные частичные представления для каждой вкладки. Вы можете использовать метод JQuery .load() для загрузки разных вкладок в раздел Div:

var url = "/ControllerName/ActionViewThatReturnsPartialView/
$("#popup-div-placeholder").html("").load(url);

Для реализации механизма всплывающих окон вы можете воспользоваться преимуществами JQuery .dialog().

Надеюсь, поможет.

person InspiredBy    schedule 13.07.2012