Bagaimana untuk Memberikan Pandangan Separa Secara Dinamik pada Klik Butang dalam ASP.NET MVC?

Memberikan Pandangan Separa pada Klik Butang dalam ASP.NET MVC

Pengenalan

Tugas untuk memaparkan paparan separa secara dinamik pada klik butang adalah keperluan biasa dalam pembangunan ASP.NET MVC. Artikel ini menyelidiki penyelesaian kepada masalah ini, menunjukkan cara untuk mencapai fungsi ini menggunakan jQuery dan kaedah pengawal yang betul.

Tinjauan Keseluruhan Masalah

Dalam ASP.NET MVC, paparan separa biasanya dipaparkan sebagai pengganti untuk keseluruhan halaman. Walau bagaimanapun, dalam senario tertentu, adalah wajar untuk memaparkan paparan separa dalam kawasan tertentu halaman sahaja. Sebagai contoh, apabila pengguna mengklik butang, anda mungkin ingin memuatkan dan memaparkan paparan separa yang mengandungi hasil carian dalam bahagian halaman yang ditetapkan.

Penyelesaian

Untuk mencapainya, ikuti langkah yang digariskan di bawah:

1. Ubah suai Butang: Gantikan butang sebelah pelayan dengan HTML elemen butang (cth., ).
2. Laksanakan Pengendali Acara jQuery: Gunakan pengendali acara .click() jQuery pada butang untuk memulakan panggilan AJAX.
3. Pass Data Model: Hantar data model yang diperlukan kepada pengawal menggunakan jQuery's Kaedah .load() semasa panggilan AJAX.
4. Terima Data dalam Pengawal: Tentukan kaedah pengawal untuk menerima data model dan mengembalikan paparan separa yang sesuai.
5. Memberikan Paparan Separa: Kemas kini rantau halaman yang ditetapkan dengan paparan separa menggunakan .load() jQuery kaedah.

Contoh Kod

Di bawah ialah contoh pelaksanaan kod untuk memberikan paparan separa pada klik butang:

Paparan Cukur (Index.cshtml)

<button></button>

JavaScript

var url = '@Url.Action("DisplaySearchResults", "Search")';
$('#search').click(function() {
  var keyword = $('#Keyword').val();
  $('#searchResults').load(url, { searchText: keyword });
});

Pengawal (SearchController)

public ActionResult DisplaySearchResults(string searchText)
{
  var model = // Build list based on the searchText
  return PartialView("SearchResults", model);
}

Tambahan Pertimbangan

• Lumpuhkan penyerahan borang lalai untuk butang dalam borang menggunakan atribut type="button".
• Gunakan pembantu @Html.ValidationMessageFor() hanya jika model dikembalikan kepada lihat.
• Kendalikan penyerahan borang dengan acara .submit() jQuery untuk model dengan pengesahan atribut.

Atas ialah kandungan terperinci Bagaimana untuk Memberikan Pandangan Separa Secara Dinamik pada Klik Butang dalam ASP.NET MVC?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!