Menambahkan Tampilan (VB)

2023-07-13

Tutorial ini akan mengajari Anda dasar-dasar membangun aplikasi Web MVC ASP.NET menggunakan Microsoft Visual Web Developer 2010 Express Service Pack 1, yang merupakan versi gratis dari Microsoft Visual Studio. Sebelum memulai, pastikan Anda telah menginstal prasyarat yang tercantum di bawah ini. Anda dapat menginstal semuanya dengan mengklik tautan berikut: Penginstal Platform Web. Atau, Anda dapat menginstal prasyarat secara individual menggunakan tautan berikut:

Prasyarat Visual Studio Web Developer Express SP1

ASP.NET Pembaruan Alat MVC 3

SQL Server Compact 4.0(runtime + dukungan alat)

Jika Anda menggunakan Visual Studio 2010 alih-alih Visual Web Developer 2010, instal prasyarat dengan mengklik tautan berikut: Prasyarat Visual Studio 2010.

Proyek Visual Web Developer dengan kode sumber VB.NET tersedia untuk menyertai topik ini. Unduh versi VB.NET. Jika Anda lebih suka C#, beralihlah ke versi C# dari tutorial ini.

Di bagian ini kita akan memodifikasi HelloWorldController kelas untuk menggunakan file templat tampilan untuk merangkum proses pembuatan respons HTML ke klien dengan bersih.

Mari kita mulai dengan menggunakan templat tampilan dengan Index metode di HelloWorldController kelas . Index Saat ini metode mengembalikan string dengan pesan yang dikodekan secara permanen dalam kelas pengontrol. Index Ubah metode untuk mengembalikan objek, seperti yang View ditunjukkan dalam hal berikut:

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

Sekarang mari kita tambahkan templat tampilan ke proyek kita yang dapat kita panggil dengan metode .Index Untuk melakukan ini, klik kanan di Index dalam metode dan klik Tambahkan Tampilan.

Kotak dialog Tambahkan Tampilan muncul. Biarkan entri default dan klik tombol Tambahkan .

Folder MvcMovie\Views\HelloWorld dan file MvcMovie\Views\HelloWorld\Index.vbhtml dibuat. Anda dapat melihatnya di Penjelajah Solusi:

Tambahkan beberapa HTML di <h2> bawah tag. File MvcMovie\Views\HelloWorld\Index.vbhtml yang dimodifikasi ditunjukkan di bawah ini.

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

<h2>Index</h2>

<b>Hello</b> World!

Jalankan aplikasi dan telusuri pengontrol "halo dunia" (http://localhost:xxxx/HelloWorld). Metode Index dalam pengontrol Anda tidak melakukan banyak pekerjaan; itu hanya menjalankan pernyataan return View(), yang menunjukkan bahwa kami ingin menggunakan file templat tampilan untuk merender respons terhadap klien. Karena kami tidak secara eksplisit menentukan nama file templat tampilan yang akan digunakan, ASP.NET MVC default menggunakan file tampilan Index.vbhtml dalam folder \Views\HelloWorld . Gambar di bawah ini menunjukkan string yang dikodekan secara permanen dalam tampilan.

Kelihatannya bagus. Namun, perhatikan bahwa bilah judul browser mengatakan "Indeks" dan judul besar di halaman mengatakan "Aplikasi MVC Saya." Ayo kita ubah.

Mengubah tampilan dan halaman tata letak

Pertama, mari kita ubah teks "Aplikasi MVC Saya." Teks tersebut dibagikan dan muncul di setiap halaman. Ini sebenarnya hanya muncul di satu tempat di proyek kami, meskipun ada di setiap halaman di aplikasi kami. Buka folder /Views/Shared di Penjelajah Solusi dan buka file _Layout.vbhtml. File ini disebut halaman tata letak dan merupakan "shell" bersama yang digunakan semua halaman lainnya.

@RenderBody() Perhatikan baris kode di dekat bagian bawah file. RenderBody adalah tempat penampung tempat semua halaman yang Anda buat muncul, "dibungkus" di halaman tata letak. <h1> Ubah judul dari "Aplikasi MVC Saya" menjadi "Aplikasi Film MVC".

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

Jalankan aplikasi dan catat sekarang tertulis "Aplikasi Film MVC". Klik tautan Tentang, dan halaman tersebut juga menampilkan "Aplikasi Film MVC".

File _Layout.vbhtml lengkap ditunjukkan di bawah ini:

<!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>

Sekarang, mari kita ubah judul halaman Indeks (tampilan).

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

<h2>My Movie List</h2>

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

Buka MvcMovie\Views\HelloWorld\Index.vbhtml. Ada dua tempat untuk membuat perubahan: pertama, teks yang muncul di judul browser, lalu di header sekunder ( <h2> elemen ). Kami akan membuatnya sedikit berbeda sehingga Anda dapat melihat sedikit perubahan kode mana yang menjadi bagian dari aplikasi.

Jalankan aplikasi dan telusurihttp://localhost:xx/HelloWorld. Perhatikan bahwa judul browser, judul utama, dan judul sekunder telah berubah. Sangat mudah untuk membuat perubahan besar dalam aplikasi Anda dengan perubahan kecil pada tampilan. (Jika Anda tidak melihat perubahan di browser, Anda mungkin melihat konten yang di-cache. Tekan Ctrl+F5 di browser Anda untuk memaksa respons dari server dimuat.)

Sedikit "data" kami (dalam hal ini pesan "Halo Dunia!") dikodekan secara permanen. Aplikasi MVC kami memiliki V (tampilan) dan kami memiliki C (pengontrol), tetapi belum ada M (model). Tak lama, kita akan membahas cara membuat database dan mengambil data model dari database tersebut.

Meneruskan Data dari Pengontrol ke Tampilan

Namun, sebelum kita membuka database dan berbicara tentang model, mari kita bicarakan terlebih dahulu tentang meneruskan informasi dari Pengontrol ke Tampilan. Kami ingin meneruskan apa yang diperlukan templat tampilan untuk merender respons HTML ke klien. Objek-objek ini biasanya dibuat dan diteruskan oleh kelas pengontrol ke templat tampilan, dan objek tersebut hanya boleh berisi data yang diperlukan templat tampilan — dan tidak lebih.

Sebelumnya dengan HelloWorldController kelas , Welcome metode tindakan mengambil name parameter dan numTimes kemudian menghasilkan nilai parameter ke browser. Daripada pengontrol terus merender respons ini secara langsung, mari kita letakkan data tersebut ke dalam tas untuk Tampilan. Pengontrol dan Tampilan dapat menggunakan ViewBag objek untuk menyimpan data tersebut. Itu akan diteruskan ke templat tampilan secara otomatis, dan digunakan untuk merender respons HTML menggunakan konten tas sebagai data. Dengan begitu pengontrol berkaitan dengan satu hal dan templat tampilan dengan yang lain - memungkinkan kita untuk mempertahankan "pemisahan kekhawatiran" yang bersih dalam aplikasi.

Atau, kita dapat menentukan kelas kustom, lalu membuat instans objek itu sendiri, mengisinya dengan data dan meneruskannya ke Tampilan. Itu sering disebut ViewModel, karena ini adalah Model kustom untuk Tampilan. Namun, untuk sejumlah kecil data, ViewBag berfungsi dengan baik.

Kembali ke file HelloWorldController.vb ubah Welcome metode di dalam pengontrol untuk memasukkan Message dan NumTimes ke dalam ViewBag. ViewBag adalah objek dinamis. Itu berarti Anda dapat menempatkan apa pun yang Anda inginkan di dalamnya. ViewBag tidak memiliki properti yang ditentukan sampai Anda meletakkan sesuatu di dalamnya.

HelloWorldController.vb Lengkap dengan kelas baru dalam file yang sama.

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

Sekarang ViewBag kami berisi data yang akan diteruskan ke Tampilan secara otomatis. Sekali lagi, atau kita bisa melewati objek kita sendiri seperti ini jika kita suka:

return View(myCustomObject)

Sekarang kita perlu WelcomeView templat! Jalankan aplikasi sehingga kode baru dikompilasi. Tutup browser, klik kanan di Welcome dalam metode, lalu klik Tambahkan Tampilan.

Berikut tampilan kotak dialog Tambahkan Tampilan Anda.

Tambahkan kode berikut di <h2> bawah elemen di Selamat Datang baru .file vbhtml. Kami akan membuat perulangan dan mengucapkan "Halo" sebanyak yang dikatakan pengguna!

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

Jalankan aplikasi dan telusuri http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

Sekarang data diambil dari URL dan diteruskan ke pengontrol secara otomatis. Pengontrol mengemas data ke dalam Model objek dan meneruskan objek tersebut ke tampilan. Tampilan daripada menampilkan data sebagai HTML kepada pengguna.

Yah, itu semacam "M" untuk model, tapi bukan jenis database. Mari kita ambil apa yang telah kita pelajari dan buat database film.

Sebelumnya Berikutnya

Bagikan melalui

Menambahkan Tampilan (VB)

Mengubah tampilan dan halaman tata letak

Meneruskan Data dari Pengontrol ke Tampilan

Saran dan Komentar

Sumber Daya Tambahan: