Bagaimana untuk Memberikan Paparan Separa dalam ASP.NET MVC pada Klik Butang?

Memaparkan Pandangan Separa pada Klik Butang dalam ASP.NET MVC

Gambaran Keseluruhan

Artikel ini membincangkan pemaparan separa pada sisi klien selepas klik butang, menyelesaikan cabaran biasa dalam aplikasi ASP.NET MVC. Kami akan meneroka cara untuk:

• Merakam acara klik butang
• Menghantar data kepada pengawal
• Memberikan paparan separa di dalam div yang ditetapkan

Penerangan Masalah

Dalam aplikasi ASP.NET MVC yang dipermudahkan, kami berusaha untuk memaparkan hasil carian secara dinamik dalam div apabila klik butang. Cabarannya terletak pada mengambil data melalui akses pangkalan data dan kemudian memaparkan paparan separa menggunakan data ini, tanpa memuatkan semula keseluruhan halaman.

Penyelesaian

1. Pengendalian Acara:

Ganti butang dengan:

<button>

2. JavaScript:

Tambah skrip berikut:

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

• Skrip ini menangkap peristiwa klik dan menghantar teks carian kepada pengawal menggunakan kaedah .load() jQuery.

3. Kaedah Pengawal:

Ubah suai kaedah pengawal untuk menerima teks carian:

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

• Kaedah ini mengambil data daripada pangkalan data dan mengembalikan paparan separa.

Tambahan Pertimbangan

• Pengesahan: Jika SearchCriterionModel mengandungi berbilang sifat dengan atribut pengesahan, gunakan butang serah dan kendalikan acara .submit() borang.
• Tandatangan Kaedah Pengawal: Kemas kini kaedah pengawal untuk menerima keseluruhan SearchCriterionModel objek:

public ActionResult DisplaySearchResults(SearchCriterionModel criteria)

Petua untuk Memaparkan Pandangan Separa Di Dalam Div

• Pastikan div mempunyai ID unik, seperti "searchResults".
• Paparan separa itu sendiri harus mempunyai kelas model dan datanya sendiri.
• Kaedah .load() akan dikemas kini kandungan div dengan HTML yang dijana daripada paparan separa.

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