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
Barbara Streisandasal
2024-11-03 19:08:30704semak imbas

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>
  1. Dapatkan URL Paparan Separa: Dapatkan URL untuk paparan separa daripada atribut data pada butang.
<code class="javascript">    var url = $(this).data('url');</code>
  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>
  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>
  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>

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>

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!

Kenyataan:
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