Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Memberikan Pandangan Separa dengan jQuery dalam ASP.NET MVC?

Bagaimana untuk Memberikan Pandangan Separa dengan jQuery dalam ASP.NET MVC?

Barbara Streisand
Lepaskan: 2024-11-03 19:08:30
asal
721 orang telah melayarinya

How to Render Partial Views with jQuery in ASP.NET MVC?

Memuatkan Pandangan Separa dengan jQuery dalam ASP.NET MVC

Memberikan paparan separa secara langsung menggunakan jQuery tidak boleh dilaksanakan. Walau bagaimanapun, penyelesaian yang melibatkan panggilan sebelah pelayan dan manipulasi jQuery/AJAX boleh mencapai hasil yang sama.

Penyelesaian:

  1. Sediakan Butang Pengendali Klik: Lampirkan pengendali acara klik pada butang yang akan memulakan pemaparan paparan separa.
<code class="javascript">$('.js-reload-details').on('click', function(evt) {
    evt.preventDefault();
    evt.stopPropagation();</code>
Salin selepas log masuk
  1. Dapatkan URL Paparan Separa: Dapatkan URL untuk paparan separa daripada atribut data pada butang.
<code class="javascript">    var url = $(this).data('url');</code>
Salin selepas log masuk
  1. Buat Permintaan AJAX: Gunakan $.get() untuk menghantar permintaan GET ke pelayan untuk paparan separa.
<code class="javascript">    $.get(url, function(data) {
        $detailDiv.replaceWith(data);         
    });</code>
Salin selepas log masuk
  1. Render Partial View: Pada pelayan, buat tindakan dalam pengawal yang menjadikan paparan separa dan kembalikan hasilnya.
<code class="c#">public ActionResult Details( int id )
{
    var model = ...get user from db using id...

    return PartialView( "UserDetails", model );
}</code>
Salin selepas log masuk
  1. Kemas kini DOM: Gantikan bekas DIV dalam paparan separa dengan kandungan yang dikemas kini daripada respons pelayan.
<code class="javascript">var $detailDiv = $('#detailsDiv');
$detailDiv.replaceWith(data);</code>
Salin selepas log masuk

Button dan Penanda Paparan Separa:

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

<!-- UserDetails partial view -->
<div id="detailsDiv">
    <!-- ...content... -->
</div></code>
Salin selepas log masuk

Nota: Pendekatan ini bergantung pada tindakan sebelah pelayan untuk memberikan paparan separa dan permintaan AJAX untuk mengemas kini halaman menggunakan jQuery.

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan