Bagaimana untuk Memberikan Paparan Separa Menggunakan jQuery dalam ASP.NET MVC?

Memberikan Paparan Separa Menggunakan jQuery dalam ASP.NET MVC

Dalam ASP.NET MVC, paparan separa biasanya diberikan menggunakan kaedah Html.RenderPartial(). Walau bagaimanapun, mungkin terdapat senario di mana anda perlu memaparkan paparan separa menggunakan jQuery sebaliknya.

Pendekatan Menggunakan jQuery dan Ajax

Untuk memberikan paparan separa menggunakan jQuery, anda boleh melakukan perkara berikut:

1. Buat Kaedah Tindakan: Tentukan kaedah tindakan dalam pengawal anda untuk mengembalikan pandangan separa.
2. Ikat Pengendali Acara jQuery: Ikat pengendali acara klik pada butang atau pautan pada halaman anda.
3. Panggil Kaedah Tindakan: Di dalam pengendali acara, gunakan $.get() atau $.post() untuk menghantar permintaan Ajax kepada kaedah tindakan.
4. Ganti Div Paparan Separa: Apabila kaedah tindakan mengembalikan paparan separa, gunakan $.replaceWith() atau $.html() untuk menggantikan yang sedia ada kandungan div paparan separa pada halaman.

Contoh:

<code class="javascript">$('.js-reload-details').on('click', function(evt) {
    evt.preventDefault();
    evt.stopPropagation();

    var $detailDiv = $('#detailsDiv'),
        url = $(this).data('url');

    $.get(url, function(data) {
        $detailDiv.replaceWith(data);         
    });
});</code>

Dalam contoh ini, butang dengan kelas js-reload-details mencetuskan pengendali acara klik. Pengendali acara memuatkan paparan separa menggunakan $.get() dan menggantikan kandungan div dengan butiran idDiv dengan HTML yang dikembalikan.

Tindakan Pengawal:

<code class="csharp">public ActionResult Details( int id )
{
    var model = ...get user from db using id...

    return PartialView( "UserDetails", model );
}</code>

Butang Paparan Ibu Bapa:

<code class="html"><button data-url='@Url.Action("details","user", new { id = Model.ID } )'
         class="js-reload-details">Reload</button></code>

Paparan Separa Butiran Pengguna:

<code class="html"><div id="detailsDiv">
    <!-- ...content... -->
</div></code>

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