Bagaimana untuk Memberi Paparan Separa Secara Dinamik dalam ASP.NET MVC pada Klik Butang?

Memberikan Pandangan Separa Secara Dinamik apabila Klik Butang dalam ASP.NET MVC

Penerangan Masalah:

Dalam ASP.NET MVC , anda ingin memberikan paparan separa di dalam div tertentu pada sisi klien apabila butang diklik dan paparan separa harus gunakan data yang diperoleh secara dinamik semasa acara butang.

Contoh Kod:

Pertimbangkan kod butang berikut:

<button type="button">

Butang ini cuba menavigasi ke URL berasingan apabila diklik. Sebaliknya, untuk mengendalikan acara klik dan memaparkan paparan separa secara dinamik, kita perlu mengubah suai kod seperti berikut:

<button>

Selain itu, tambahkan skrip berikut pada halaman:

var url = '@Url.Action("DisplaySearchResults", "Search")';
$('#search').click(function() {
  var keyWord = $('#Keyword').val(); // Retrieve the user-entered search text
  $('#searchResults').load(url, { searchText: keyWord });
});

Ubah suai kaedah pengawal untuk menerima teks carian sebagai hujah:

public ActionResult DisplaySearchResults(string searchText)
{
  // Build list based on the provided searchText and return the partial view
  var model = // To be implemented
  return PartialView("SearchResults", model);
}

Penjelasan:

• Kaedah jQuery .load membuat panggilan AJAX ke URL yang ditentukan, menghantar sebarang data yang disediakan dalam parameter data .
• Kaedah pengawal bertanggungjawab untuk menjana pandangan separa berdasarkan yang disediakan secara dinamik data.
• Kandungan yang dikemas kini dimuatkan ke dalam div #searchResults, memaparkan paparan separa secara dinamik.

Nota: Jika kelas model anda mengandungi berbilang sifat dengan atribut pengesahan, gantikan pengendalian onclick dengan kod berikut dan gunakan butang hantar sebaliknya:

$('form').submit(function() {
  if (!$(this).valid()) { return false; }
  var url = '@Url.Action("DisplaySearchResults", "Search")';
  var form = $(this).serialize();
  $('#searchResults').load(url, form);
  return false;

Dalam ini kes, kaedah pengawal harus mengendalikan objek SearchCriterionModel lengkap:

public ActionResult DisplaySearchResults(SearchCriterionModel criteria)
{
  var model = // Build list based on the properties of criteria and return the partial view
  return PartialView("SearchResults", model);
}

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