Как скрыть вкладки jQuery до проверки подлинности и добавить или показать их после проверки подлинности в MVC3? - PullRequest
Новая
       40

Как скрыть вкладки jQuery до проверки подлинности и добавить или показать их после проверки подлинности в MVC3?

0 голосов
/ 30 марта 2012

Сводка

В настоящее время я пытаюсь создать веб-приложение, используя архитектуру MVC 3 и элементы управления jQuery UI.До сих пор я мог отображать вкладки и перемещаться по ним.

Теперь я могу отобразить страницу входа в систему на моей первой вкладке, поскольку это первое необходимое действие для этого приложения.

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

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

Тем не менее, рабочий процесс этого приложения будет:

  1. Аутентификация при первом входе на сайт;
  2. Если пользователь еще не зарегистрирован, приложение должно позволить это оченьпользователь регистрируется раз и навсегда, используя одну и ту же вкладку пользовательского интерфейса jQuery или, возможно, показывая новую вкладку для регистрации, или же модальное диалоговое окно;
  3. После проверки подлинности с шага 1 пользователь теперь имеет доступ к различным функциямсайта.

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

Я уже смог отобразить представление LogOn, в котором я удалил исходное представление, созданное шаблоном, чтобы воссоздать его как частичное представление, чтобы иметь возможность содержать его в пользовательском интерфейсе jQuery.тело вкладки.Это работает нормально.

У меня также есть метод SelectTab в моем HomeController, который должен знать, какой частичный вид отображать в зависимости от значения идентификатора, который передается в качестве входного параметра.

Теперькогда я пытаюсь перейти из частичного представления LogOn на первой вкладке пользовательского интерфейса jQuery, это фактически единственная доступная опция, щелкнув ссылку «Регистрация», я не смогу показать частичное представление «Регистрация» на той же вкладке.

Примеры кода

Класс HomeController: 

public class HomeController : Controller {
    public ActionResult Index() { return View(); }

    public ActionResult SelectTab(int id) {
        switch (id) {
            case 0: return RedirectToAction("Register", "Account");
            default: return RedirectToAction("LogOn", "Account");
        }
    }
}

Класс AccountController: 

public class AccountController {
    public ActionResult LogOn() { return PartialView(new LogOnModel()); }
    public ActionResult Register() { return PartialView(new RegisterModel()); }
}

Обе модели(LogOnModel, RegisterModel) здесь указано, что это шаблон по умолчанию.

И мой общий вид _Layout.cshtml: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/south-street/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
    <script>
        $(window).load(function () {
            $("#tabs").tabs({ select: function (event, ui) { selectTab(getSelectedTab()); } });
            logIn();
        });

        function logIn() {
            selectTab(-1);
            selectTab(0);
        }

        function selectTab(index) {
            var url = '@Url.Content("~/Home/SelectTab/")' + index;
            var targetDiv = "#tab" + index;
            $.get(url, null, function(result) { $(targetDiv).html(result); });
        }

        function getSelectedTab() { return $("#tabs").tabs("option", "selected"); }
        function setSelectedTab(index) { $("#tabs").tabs("option", "selected", index); }
    </script>
</head>
<body>
    <div id="tabs">
        <ul id="menu">
            <li><a href="#tab0"><span>Authenticate</span></a></li>
            @if (Request.IsAuthenticated) {
                <li><a href="#tab1"><span>About</span></a></li>
            }
        </ul>
        <div id="tab0"></div><div id="tab1"></div>
    </div>
    @RenderBody()
</body>

Среда разработки

Я использую:

  1. VS2010 и .NET 4.0;
  2. jQuery UI (см. Пример кода _Layout.csthml для версии и стиляшаблон);
  3. ASP.NET MVC3.

Вопрос (ы)

* Как отобразить частичное представление «Регистр», если щелкнуть ссылку «Регистрация», содержащуюся в частичном представлении «LogOn», на той же вкладке?

Возможно, было бы проще скрыть фактическую вкладку и показать другую для регистрации?И все же, как этого добиться? *

1 Ответ

1 голос
/ 30 марта 2012

Я предлагаю загружать все остальные вкладки (кроме логина) через ajax. Вы отправляете логин с помощью ajax, и при успешном ответе вы уничтожаете вкладку входа в систему, а затем динамически добавляете новую с href, установленным для действия ajax.

Вы можете выполнить то, что хотите, но это потребует большого количества jquery и ajax (я рекомендую попробовать knockoutjs ). Серверная часть является самой легкой.

Я думаю, что также лучше вызывать действия напрямую без переключателя SelectTab.

...