Bagaimana untuk Memberikan Paparan Separa dalam ASP.NET MVC pada Klik Butang tanpa Muat Semula Halaman?

Memberikan Paparan Separa pada Klik Butang dalam ASP.NET MVC

Dalam ASP.NET MVC, memberikan paparan separa sebagai tindak balas kepada klik butang adalah tugas biasa. Ini membolehkan anda mengemas kini bahagian tertentu halaman secara dinamik tanpa memuatkan semula keseluruhan halaman.

Penerangan Masalah:

Kod yang disediakan cuba memaparkan paparan separa dalam div khusus pada halaman selepas butang klik. Walau bagaimanapun, butang itu menavigasi ke URL lain, menyebabkan keseluruhan halaman dimuatkan semula. Matlamatnya adalah untuk memberikan paparan separa dalam div pada bahagian klien.

Penyelesaian:

Untuk mencapai ini, perlu mengendalikan klik butang menggunakan JavaScript dan lakukan permintaan AJAX kepada pelayan. Langkah berikut menerangkan cara untuk mencapai ini:

1. Tukar Jenis Butang: Tukar butang HTML untuk menggunakan elemen butang dan bukannya tag anchor.

<button></button>

2. Tambah Kod JavaScript: Tambahkan kod JavaScript berikut pada anda halaman:

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

3. Ubah suai Kaedah Pengawal: Dalam pengawal, ubah suai tindakan DisplaySearchResults untuk menerima teks carian sebagai parameter.

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

Kod JavaScript mengendalikan klik butang, mendapatkan semula teks carian dari halaman dan menggunakan jQuery's Kaedah .load untuk membuat permintaan AJAX kepada tindakan DisplaySearchResults. Pelayan menjana paparan separa dan menghantarnya kepada pelanggan, yang kemudiannya mengemas kini kandungan div #searchResults.

Nota:

Jika model untuk Indeks view mengandungi sifat dengan atribut pengesahan, adalah disyorkan untuk menambah butang hantar dan bukannya butang. Kod JavaScript harus mengendalikan acara .submit borang dan melakukan pengesahan sebelum membuat permintaan AJAX.

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