Добавление представления (VB)

Статья
11/08/2024

В этом руководстве описаны основы создания веб-приложения MVC ASP.NET MVC с помощью Microsoft Visual Web Developer 2010 Express с пакетом обновления 1 (SP1), который является бесплатной версией Microsoft Visual Studio. Перед началом работы убедитесь, что вы установили необходимые компоненты, перечисленные ниже. Все их можно установить, щелкнув следующую ссылку: установщик веб-платформы. Кроме того, можно установить предварительные требования по отдельности, используя следующие ссылки:

Предварительные требования для Visual Studio Web Developer Express с пакетом обновления 1 (SP1)

обновление средств MVC 3 ASP.NET

SQL Server Compact 4.0(среда выполнения и средства поддержки)

Если вы используете Visual Studio 2010 вместо Visual Web Developer 2010, установите необходимые компоненты, щелкнув следующую ссылку: предварительные требования Visual Studio 2010.

Проект Visual Web Developer с VB.NET исходный код доступен для сопровождения этого раздела. Скачайте версию VB.NET. Если вы предпочитаете C#, перейдите к версии C# этого руководства.

В этом разделе мы изменим HelloWorldController класс, чтобы использовать файл шаблона представления, чтобы чисто инкапсулировать процесс создания HTML-ответов клиенту.

Начнем с использования шаблона представления с Index методом в HelloWorldController классе. Index В настоящее время метод возвращает строку с сообщением, которое жестко закодировано в классе контроллера. Измените метод для Index возврата View объекта, как показано в следующем примере:

Public Function Index() As ActionResult
            Return View()
        End Function

Теперь добавим шаблон представления в проект, который можно вызвать с помощью Index метода. Для этого щелкните правой кнопкой мыши в методе Index и нажмите кнопку "Добавить представление".

Откроется диалоговое окно "Добавить представление ". Оставьте записи по умолчанию и нажмите кнопку "Добавить ".

Создается папка MvcMovie\Views\HelloWorld и файл MvcMovie\Views\HelloWorld\Index.vbhtml . Их можно увидеть в Обозреватель решений:

Добавьте html-код под тегом <h2> . Измененный файл MvcMovie\Views\HelloWorld\Index.vbhtml показан ниже.

@Code
    ViewData("Title") = "Index"
End Code

<h2>Index</h2>

<b>Hello</b> World!

Запустите приложение и перейдите к контроллеру hello world (http://localhost:xxxx/HelloWorld). Метод в контроллере не работал. Он Index просто выполнил инструкцию return View(), которая указала, что мы хотели использовать файл шаблона представления для отображения ответа клиенту. Так как имя используемого файла шаблона представления явно не указано, ASP.NET MVC по умолчанию используется файл представления Index.vbhtml в папке \Views\HelloWorld . На рисунке ниже показана строка, закодированная в представлении.

Выглядит довольно хорошо. Однако обратите внимание, что в строке заголовка браузера указано "Индекс" и большой заголовок на странице "My MVC Application". Давайте изменим их.

Изменение представлений и страниц макета

Сначала давайте изменим текст "Мое приложение MVC". Этот текст является общим и отображается на каждой странице. Он на самом деле отображается только в одном месте в нашем проекте, несмотря на то, что он находится на каждой странице в нашем приложении. Перейдите в папку /Views/Shared в Обозреватель решений и откройте файл _Layout.vbhtml. Этот файл называется страницей макета, и это общая "оболочка", которую используют все остальные страницы.

Обратите внимание на @RenderBody() строку кода в нижней части файла. RenderBody — это заполнитель, в котором на странице макета отображаются все создаваемые страницы. Измените <h1> заголовок с " My MVC Application" на "MVC Movie App".

<div id="title">
        <h1>MVC Movie App</h1>
  </div>

Запустите приложение и запишите его теперь с надписью "Приложение MVC Movie". Щелкните ссылку "О программе" и на этой странице также отображается приложение MVC Movie App.

Ниже показан полный файл _Layout.vbhtml :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewData("Title")</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>MVC Movie App</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "HelloWorld")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

Теперь давайте изменим заголовок страницы индекса (представление).

@Code
    ViewData("Title") = "Movie List"
End Code

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

Откройте MvcMovie\Views\HelloWorld\Index.vbhtml. Есть два места для внесения изменений: сначала текст, который отображается в заголовке браузера, а затем в дополнительном заголовке ( <h2> элемент). Мы сделаем их немного разными, чтобы увидеть, какой бит кода изменяется, какая часть приложения.

Запустите приложение и перейдите к нейhttp://localhost:xx/HelloWorld. Обратите внимание, что основной и дополнительный заголовки браузера изменились. Это легко сделать большие изменения в приложении с небольшими изменениями в представлении. (Если вы не видите изменения в браузере, возможно, вы просматриваете кэшированное содержимое. Нажмите клавиши CTRL+F5 в браузере, чтобы принудительно загрузить ответ с сервера.)

Хотя наш маленький фрагмент данных (в данном случае сообщение Hello World!" жестко закодировано. Наше приложение MVC имеет V (представления), и у нас есть C (контроллеры), но еще нет M (модель). Вскоре мы рассмотрим, как создать базу данных и получить из нее данные модели.

Передача данных из контроллера в представление

Прежде чем перейти к базе данных и рассказать о моделях, давайте сначала поговорим о передаче информации от контроллера в представление. Мы хотим передать, какой шаблон представления требуется для отрисовки HTML-ответа клиенту. Эти объекты обычно создаются и передаются классом контроллера в шаблон представления, и они должны содержать только данные, необходимые шаблону представления, и больше нет.

Ранее с HelloWorldController классом Welcome метод действия принял name и numTimes параметр, а затем выводит значения параметров в браузер. Вместо того чтобы контроллер продолжал отображать этот ответ напрямую, давайте поместим эти данные в контейнер для представления. Контроллеры и представления могут использовать ViewBag объект для хранения данных. Это будет автоматически передано шаблону представления и используется для отрисовки HTML-ответа с помощью содержимого контейнера в виде данных. Таким образом контроллер связан с одной вещью и шаблоном представления с другим — что позволяет нам поддерживать чистое "разделение проблем" в приложении.

Кроме того, можно определить пользовательский класс, а затем создать экземпляр этого объекта самостоятельно, заполнить его данными и передать его в Представление. Это часто называется ViewModel, так как это настраиваемая модель для представления. Однако для небольших объемов данных ViewBag работает отлично.

Вернитесь к файлу HelloWorldController.vb измените Welcome метод внутри контроллера, чтобы поместить сообщение и NumTimes в ViewBag. ViewBag — это динамический объект. Это означает, что вы можете поместить в него все, что вы хотите. ViewBag не имеет определенных свойств, пока не помещаете в него что-то.

Полное выполнение HelloWorldController.vb нового класса в том же файле.

Namespace MvcMovie
    Public Class HelloWorldController
        Inherits System.Web.Mvc.Controller
        '
        ' GET: /HelloWorld

        Function Index() As ActionResult
            Return View()
        End Function

        Public Function Welcome(ByVal name As String, Optional ByVal numTimes As Integer = 1) As ActionResult
            ViewBag.Message = "Hello " & name
            ViewBag.NumTimes = numTimes
            Return View()
        End Function

    End Class
End Namespace

Теперь наш ViewBag содержит данные, которые будут передаваться в представление автоматически. Опять же, мы могли бы передать в нашем собственном объекте, как это, если мы хотели:

return View(myCustomObject)

Теперь нам нужен WelcomeView шаблон! Запустите приложение, чтобы скомпилировать новый код. Закройте браузер, щелкните правой кнопкой мыши в методе Welcome и нажмите кнопку "Добавить представление".

Вот как выглядит диалоговое окно "Добавить представление ".

Добавьте следующий код в <h2> элемент в новом приветственном приложении.Vbhtml-файл. Мы будем делать цикл и говорю "Hello" столько раз, сколько пользователь говорит, что мы должны!

@Code 
    For i As Integer = 0 To ViewBag.NumTimes
@<h3> @ViewBag.Message @i.ToString </h3>
     Next i
 End Code

Запустите приложение и перейдите к http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

Теперь данные принимаются из URL-адреса и передаются контроллеру автоматически. Контроллер упаковает данные в Model объект и передает этот объект в представление. Представление, чем отображает данные в формате HTML для пользователя.

Этот подход характерен для модели, а не для базы данных. Итак, обобщим все полученные данные и попробуем создать базу данных фильмов.

Назад Далее

Поделиться через

Добавление представления (VB)

Изменение представлений и страниц макета

Передача данных из контроллера в представление

Обратная связь

Дополнительные ресурсы