Bagikan melalui


Cari

Catatan

Versi terbaru dari tutorial ini tersedia di sini menggunakan versi terbaru Visual Studio. Tutorial baru menggunakan ASP.NET Core MVC, yang memberikan banyak peningkatan atas tutorial ini.

Tutorial ini mengajarkan ASP.NET Core MVC dengan pengontrol dan tampilan. Razor Pages adalah alternatif baru dalam ASP.NET Core, model pemrograman berbasis halaman yang membuat membangun UI web lebih mudah dan lebih produktif. Kami sarankan Anda mencoba tutorial Razor Pages sebelum versi MVC. Tutorial Halaman Razor:

  • Lebih mudah diikuti.
  • Mencakup lebih banyak fitur.
  • Adalah pendekatan yang disukai untuk pengembangan aplikasi baru.

Menambahkan Metode Pencarian dan Tampilan Pencarian

Di bagian ini Anda akan menambahkan kemampuan pencarian ke Index metode tindakan yang memungkinkan Anda mencari film berdasarkan genre atau nama.

Prasyarat

Untuk mencocokkan cuplikan layar bagian ini, Anda perlu menjalankan aplikasi (F5) dan menambahkan film berikut ke database.

Judul Tanggal Rilis Genre Harga
Ghostbusters 6/8/1984 Komedi 6,99
Ghostbusters II 6/16/1989 Komedi 6,99
Planet Kera 3/27/1986 Tindakan 5,99

Memperbarui Formulir Indeks

Mulailah dengan memperbarui Index metode tindakan ke kelas yang ada MoviesController . Berikut kodenya:

public ActionResult Index(string searchString) 
{           
    var movies = from m in db.Movies 
                 select m; 
 
    if (!String.IsNullOrEmpty(searchString)) 
    { 
        movies = movies.Where(s => s.Title.Contains(searchString)); 
    } 
 
    return View(movies); 
}

Baris Index pertama metode membuat kueri LINQ berikut untuk memilih film:

var movies = from m in db.Movies 
                 select m;

Kueri didefinisikan pada saat ini, tetapi belum dijalankan terhadap database.

searchString Jika parameter berisi string, kueri film dimodifikasi untuk memfilter nilai string pencarian, menggunakan kode berikut:

if (!String.IsNullOrEmpty(searchString)) 
{ 
    movies = movies.Where(s => s.Title.Contains(searchString)); 
}

Kode s => s.Title di atas adalah Lambda Expression. Lambda digunakan dalam kueri LINQ berbasis metode sebagai argumen ke metode operator kueri standar seperti metode Where yang digunakan dalam kode di atas. Kueri LINQ tidak dijalankan ketika didefinisikan atau ketika dimodifikasi dengan memanggil metode seperti Where atau OrderBy. Sebaliknya, eksekusi kueri ditangguhkan, yang berarti bahwa evaluasi ekspresi tertunda sampai nilai yang direalisasikan benar-benar diulang atau ToList metode dipanggil. Search Dalam sampel, kueri dijalankan dalam tampilan Index.cshtml. Untuk informasi selengkapnya tentang eksekusi kueri yang ditangguhkan, lihat Eksekusi Kueri.

Catatan

Metode Contains dijalankan pada database, bukan kode c# di atas. Pada database, Berisi peta ke SQL LIKE, yang tidak peka huruf besar/kecil.

Sekarang Anda dapat memperbarui Index tampilan yang akan menampilkan formulir kepada pengguna.

Jalankan aplikasi dan navigasi ke /Movies/Index. Tambahkan string kueri seperti ?searchString=ghost ke URL. Film yang difilter ditampilkan.

SearchQryStr

Jika Anda mengubah tanda tangan Index metode agar memiliki parameter bernama id, id parameter akan cocok dengan {id} tempat penampung untuk rute default yang diatur dalam file App_Start\RouteConfig.cs .

{controller}/{action}/{id}

Metode aslinya Index terlihat seperti ini::

public ActionResult Index(string searchString) 
{           
    var movies = from m in db.Movies 
                 select m; 
 
    if (!String.IsNullOrEmpty(searchString)) 
    { 
        movies = movies.Where(s => s.Title.Contains(searchString)); 
    } 
 
    return View(movies); 
}

Metode yang dimodifikasi Index akan terlihat sebagai berikut:

public ActionResult Index(string id) 
{ 
    string searchString = id; 
    var movies = from m in db.Movies 
                 select m; 
 
    if (!String.IsNullOrEmpty(searchString)) 
    { 
        movies = movies.Where(s => s.Title.Contains(searchString)); 
    } 
 
    return View(movies); 
}

Sekarang Anda dapat meneruskan judul pencarian sebagai data rute (segmen URL) alih-alih sebagai nilai string kueri.

Cuplikan layar yang memperlihatkan halaman Indeks Film M V C. Host lokal titik dua 1 2 3 4 maju garis miring Film maju garis miring indeks garis miring hantu berada di bidang U R L dan dilingkari dengan warna merah.

Namun, Anda tidak dapat mengharapkan pengguna untuk memodifikasi URL setiap kali mereka ingin mencari film. Jadi sekarang Anda akan menambahkan UI untuk membantu mereka memfilter film. Jika Anda mengubah tanda tangan Index metode untuk menguji cara meneruskan parameter ID yang terikat rute, ubah kembali sehingga metode Anda Index mengambil parameter string bernama searchString:

public ActionResult Index(string searchString) 
{           
    var movies = from m in db.Movies 
                 select m; 
 
    if (!String.IsNullOrEmpty(searchString)) 
    { 
        movies = movies.Where(s => s.Title.Contains(searchString)); 
    } 
 
    return View(movies); 
}

Buka file Views\Movies\Index.cshtml , dan tepat setelah @Html.ActionLink("Create New", "Create"), tambahkan markup formulir yang disorot di bawah ini:

@model IEnumerable<MvcMovie.Models.Movie> 
 
@{ 
    ViewBag.Title = "Index"; 
} 
 
<h2>Index</h2> 
 
<p> 
    @Html.ActionLink("Create New", "Create") 
     
     @using (Html.BeginForm()){    
         <p> Title: @Html.TextBox("SearchString") <br />   
         <input type="submit" value="Filter" /></p> 
        } 
</p>

Pembantu Html.BeginForm membuat tag pembuka <form> . Pembantu Html.BeginForm menyebabkan formulir diposting ke dirinya sendiri ketika pengguna mengirimkan formulir dengan mengklik tombol Filter .

Visual Studio 2013 memiliki peningkatan yang bagus saat menampilkan dan mengedit file Tampilan. Saat Anda menjalankan aplikasi dengan file tampilan terbuka, Visual Studio 2013 memanggil metode tindakan pengontrol yang benar untuk menampilkan tampilan.

Cuplikan layar yang memperlihatkan tab Indeks dot c s h t m l dan Penjelajah Solusi terbuka. Di Penjelajah Solusi, subfolder Film terbuka dan Indeks titik c s h t m l dipilih.

Dengan tampilan Indeks terbuka di Visual Studio (seperti yang ditunjukkan pada gambar di atas), ketuk Ctr F5 atau F5 untuk menjalankan aplikasi lalu coba cari film.

Cuplikan layar yang memperlihatkan halaman Indeks dengan judul yang dimasukkan ke dalam bidang Judul.

Tidak ada HttpPost kelebihan Index metode. Anda tidak memerlukannya, karena metode tidak mengubah status aplikasi, hanya memfilter data.

Anda dapat menambahkan metode berikut HttpPost Index . Dalam hal ini, pemanggil tindakan akan cocok dengan HttpPost Index metode , dan HttpPost Index metode akan berjalan seperti yang ditunjukkan pada gambar di bawah ini.

[HttpPost] 
public string Index(FormCollection fc, string searchString) 
{ 
    return "<h3> From [HttpPost]Index: " + searchString + "</h3>"; 
}

SearchPostGhost

Namun, bahkan jika Anda menambahkan versi Index metode iniHttpPost, ada batasan dalam bagaimana semua ini telah diimplementasikan. Bayangkan Anda ingin menandai pencarian tertentu atau Anda ingin mengirim tautan ke teman yang dapat mereka klik untuk melihat daftar film yang difilter yang sama. Perhatikan bahwa URL untuk permintaan HTTP POST sama dengan URL untuk permintaan GET (localhost:xxxxx/Movies/Index) -- tidak ada informasi pencarian di URL itu sendiri. Saat ini, informasi string pencarian dikirim ke server sebagai nilai bidang formulir. Ini berarti Anda tidak dapat mengambil informasi pencarian tersebut untuk menandai atau mengirim ke teman di URL.

Solusinya adalah menggunakan kelebihan beban BeginForm yang menentukan bahwa permintaan POST harus menambahkan informasi pencarian ke URL dan bahwa itu harus dirutekan ke HttpGet versi Index metode . Ganti metode tanpa BeginForm parameter yang ada dengan markup berikut:

@using (Html.BeginForm("Index","Movies",FormMethod.Get))

BeginFormPost_SM

Sekarang saat Anda mengirimkan pencarian, URL berisi string kueri pencarian. Pencarian juga akan masuk ke HttpGet Index metode tindakan, bahkan jika Anda memiliki HttpPost Index metode .

IndexWithGetURL

Menambahkan Pencarian menurut Genre

Jika Anda menambahkan HttpPost versi Index metode , hapus sekarang.

Selanjutnya, Anda akan menambahkan fitur untuk memungkinkan pengguna mencari film berdasarkan genre. Ganti metode Index dengan kode berikut:

public ActionResult Index(string movieGenre, string searchString)
{
    var GenreLst = new List<string>();

    var GenreQry = from d in db.Movies
                   orderby d.Genre
                   select d.Genre;

    GenreLst.AddRange(GenreQry.Distinct());
    ViewBag.movieGenre = new SelectList(GenreLst);

    var movies = from m in db.Movies
                 select m;

    if (!String.IsNullOrEmpty(searchString))
    {
        movies = movies.Where(s => s.Title.Contains(searchString));
    }

    if (!string.IsNullOrEmpty(movieGenre))
    {
        movies = movies.Where(x => x.Genre == movieGenre);
    }

    return View(movies);
}

Versi Index metode ini mengambil parameter tambahan, yaitu movieGenre. Beberapa baris kode pertama membuat List objek untuk menahan genre film dari database.

Kode berikut adalah kueri LINQ yang mengambil semua genre dari database.

var GenreQry = from d in db.Movies 
                   orderby d.Genre 
                   select d.Genre;

Kode ini menggunakan AddRange metode koleksi generik List untuk menambahkan semua genre yang berbeda ke daftar. (Tanpa pengubah Distinct , genre duplikat akan ditambahkan — misalnya, komedi akan ditambahkan dua kali dalam sampel kami). Kode kemudian menyimpan daftar genre dalam ViewBag.MovieGenre objek . Menyimpan data kategori (seperti genre film) sebagai objek SelectList dalam ViewBag, maka mengakses data kategori dalam kotak daftar dropdown adalah pendekatan umum untuk aplikasi MVC.

Kode berikut menunjukkan cara memeriksa movieGenre parameter . Jika tidak kosong, kode selanjutnya membatasi kueri film untuk membatasi film yang dipilih ke genre yang ditentukan.

if (!string.IsNullOrEmpty(movieGenre))
{
    movies = movies.Where(x => x.Genre == movieGenre);
}

Seperti yang dinyatakan sebelumnya, kueri tidak dijalankan pada database sampai daftar film diulang (yang terjadi dalam Tampilan, setelah Index metode tindakan kembali).

Menambahkan Markup ke Tampilan Indeks untuk Mendukung Pencarian menurut Genre

Tambahkan pembantu Html.DropDownList ke file Views\Movies\Index.cshtml , tepat sebelum pembantu TextBox . Markup yang telah selesai ditunjukkan di bawah ini:

@model IEnumerable<MvcMovie.Models.Movie>
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
    @using (Html.BeginForm("Index", "Movies", FormMethod.Get))
    {
    <p>
        Genre: @Html.DropDownList("movieGenre", "All")
        Title: @Html.TextBox("SearchString")
        <input type="submit" value="Filter" />
    </p>
    }
</p>
<table class="table">

Dalam kode berikut:

@Html.DropDownList("movieGenre", "All")

Parameter "MovieGenre" menyediakan kunci bagi pembantu DropDownList untuk menemukan IEnumerable<SelectListItem> di ViewBag. ViewBag diisi dalam metode tindakan:

public ActionResult Index(string movieGenre, string searchString)
{
    var GenreLst = new List<string>();

    var GenreQry = from d in db.Movies
                   orderby d.Genre
                   select d.Genre;

    GenreLst.AddRange(GenreQry.Distinct());
    ViewBag.movieGenre = new SelectList(GenreLst);

    var movies = from m in db.Movies
                 select m;

    if (!String.IsNullOrEmpty(searchString))
    {
        movies = movies.Where(s => s.Title.Contains(searchString));
    }

    if (!string.IsNullOrEmpty(movieGenre))
    {
        movies = movies.Where(x => x.Genre == movieGenre);
    }

    return View(movies);
}

Parameter "Semua" menyediakan label opsi. Jika Anda memeriksa pilihan tersebut di browser, Anda akan melihat bahwa atribut "nilai" kosong. Karena pengontrol kami hanya memfilter if string tidak null atau kosong, mengirimkan nilai kosong untuk movieGenre menampilkan semua genre.

Anda juga dapat mengatur opsi untuk dipilih secara default. Jika Anda menginginkan "Comedy" sebagai opsi default Anda, Anda akan mengubah kode di Pengontrol seperti itu:

ViewBag.movieGenre = new SelectList(GenreLst, "Comedy");

Jalankan aplikasi dan telusuri ke /Movies/Index. Coba cari berdasarkan genre, berdasarkan nama film, dan menurut kedua kriteria.

Cuplikan layar yang memperlihatkan halaman Indeks. Jenis genre dipilih.

Di bagian ini Anda membuat metode tindakan pencarian dan tampilan yang memungkinkan pengguna mencari berdasarkan judul film dan genre. Di bagian berikutnya, Anda akan melihat cara menambahkan properti ke Movie model dan cara menambahkan penginisialisasi yang akan secara otomatis membuat database pengujian.