Render Tampilan Parsial Menggunakan jQuery di ASP.NET MVC


223

Bagaimana cara me-render tampilan sebagian menggunakan jquery?

Kami dapat merender Tampilan parsial seperti ini:

<% Html.RenderPartial("UserDetails"); %>

Bagaimana kita bisa melakukan hal yang sama menggunakan jquery?


Anda bisa melihat artikel di bawah ini juga. tugberkugurlu.com/archive/… Ini mengikuti pendekatan yang berbeda dan meningkatkan jalannya.
tugberk

Pertanyaan bodoh. Apakah UserDetail menampilkan sebagian sebagai halaman cshtml: UserDetails.cshtml? Saya mencoba memuat sebagian pandangan. Dan biasanya saya akan menggunakan: @ Html.Partial ("~ / Views / PartialViews / FirstPartialViewTwo.cshtml")
George Geschwend

1
@ GeorgeGeschwend, Tidak ada yang bodoh di sini, sampai seseorang dapat menanggapinya. UserDetails (UserDetails.cshtml) adalah Tampilan Sebagian di dalam Pengontrol Pengguna. Seperti dalam komentar dari jawaban yang ditandai, lebih baik menggunakan Url.Action daripada mengkodekan path lengkap tampilan.
Prasad

Jawaban:


286

Anda tidak dapat membuat tampilan parsial hanya menggunakan jQuery. Namun, Anda dapat memanggil metode (tindakan) yang akan merender tampilan sebagian untuk Anda dan menambahkannya ke halaman menggunakan jQuery / AJAX. Di bawah ini, kami memiliki penangan klik tombol yang memuat url untuk tindakan dari atribut data pada tombol dan melepaskan permintaan GET untuk mengganti DIV yang terkandung dalam tampilan parsial dengan konten yang diperbarui.

$('.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);         
    });
});

di mana pengontrol pengguna memiliki detail tindakan bernama:

public ActionResult Details( int id )
{
    var model = ...get user from db using id...

    return PartialView( "UserDetails", model );
}

Ini dengan asumsi bahwa tampilan parsial Anda adalah sebuah wadah dengan id detailsDivsehingga Anda hanya mengganti semuanya dengan isi hasil panggilan.

Tombol Tampilan Induk

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

Useradalah nama pengontrol dan detailsnama tindakan di @Url.Action(). Tampilan parsial UserDetails

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

Saya terus mendapatkan permintaan buruk dengan kode contoh ini yang Anda berikan. Saya menyalin apa adanya dan baru saja mengubah tindakan Controller yang seharusnya. Saya tidak yakin untuk apa "pengguna" itu.
chobo2

1
Saya hanya menggunakan beberapa "kemungkinan" nama pengontrol dan tindakan karena Anda tidak menyertakan kode apa pun yang dapat kami gunakan. Cukup ganti "detail" dengan tindakan Anda dan "pengguna" dengan nama pengontrol Anda.
tvanfosson

1
Terima kasih lagi untuk jawaban yang bagus tvanfosson.

ada yang tahu bagaimana ini akan bekerja dengan Razor? mencoba $ .get ("@ Url.Action (\" Manifest \ ", \" Upload \ ", new {id =" + key + "})", fungsi (data) {$ ("<div />") .replaceWith (data);});
Patrick Lee Scott

1
@Zapnologica - jika Anda memuat ulang seluruh tabel, Anda mungkin perlu menerapkan kembali plugin karena elemen DOM yang semula terhubung telah diganti. Mungkin lebih baik untuk menyambungkannya ke metode yang mengembalikan data sebagai JSON, datatables.net/examples/data_sources/server_side.html
tvanfosson

152

Saya telah menggunakan beban ajax untuk melakukan ini:

$('#user_content').load('@Url.Action("UserDetails","User")');

46
Secara umum saya pikir Anda lebih baik pergi dengan pembantu Url.Action daripada pengkodean jalan. Ini akan rusak jika situs web Anda berada di subdirektori daripada di root. Menggunakan helper memperbaiki masalah itu dan memungkinkan Anda untuk menambahkan parameter dengan nilai yang ditetapkan secara dinamis.
tvanfosson

18
Anda dapat melakukan $ ('# user_content'). Load ('@ Url.Content ("~ / User / UserDetails")') untuk menyiasatinya - saya sering menggunakan metode ini jika saya memerlukan javascript untuk menampar parer querystring di akhir url
Shawson

Dalam jawaban ini, UserDetailsapakah nama tindakan, bukan tampilan sebagian, bukan?
Maxim V. Pavlov

4
@ Paras: Url harus selalu dievaluasi menggunakan @Url.Action("ActionName","ControllerName", new { area = "AreaName" } )alih-alih melakukan Handcoding .
Imad Alazani

3
@PKKG. @ Url.Action () hanya mengevaluasi dalam Razor. ini tidak berfungsi jika OP ingin meletakkan kode mereka di file js terpisah dan referensi.
Michael

60

@vanfosson batu dengan jawabannya.

Namun, saya akan menyarankan perbaikan dalam js dan kontrol kecil.

Saat kami menggunakan @Urlhelper untuk memanggil tindakan, kami akan menerima html yang diformat. Akan lebih baik untuk memperbarui konten ( .html) bukan elemen yang sebenarnya ( .replaceWith).

Lebih lanjut tentang di: Apa perbedaan antara replaceWith () dan html () jQuery?

$.get( '@Url.Action("details","user", new { id = Model.ID } )', function(data) {
    $('#detailsDiv').html(data);
}); 

Ini sangat berguna di pohon, di mana konten dapat diubah beberapa kali.

Pada controller kita dapat menggunakan kembali aksi tergantung pada pemohon:

public ActionResult Details( int id )
{
    var model = GetFooModel();
    if (Request.IsAjaxRequest())
    {
        return PartialView( "UserDetails", model );
    }
    return View(model);
}

11

Hal lain yang dapat Anda coba (berdasarkan jawaban tvanfosson) adalah ini:

<div class="renderaction fade-in" 
    data-actionurl="@Url.Action("details","user", new { id = Model.ID } )"></div>

Dan kemudian di bagian skrip halaman Anda:

<script type="text/javascript">
    $(function () {
        $(".renderaction").each(function (i, n) {
            var $n = $(n),
                url = $n.attr('data-actionurl'),
                $this = $(this);

            $.get(url, function (data) {
                $this.html(data);
            });
        });
    });

</script>

Ini merender @ Html.RenderAction Anda menggunakan ajax.

Dan untuk membuatnya semua penggemar sjmansy, Anda dapat menambahkan efek fade-in menggunakan css ini:

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity: 0; /* make things invisible upon start */
    -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation: fadeIn ease-in 1;
    -o-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

Man I love mvc :-)


Mengapa Anda masing-masing berfungsi? Bagaimana itu bekerja? Apakah Anda melakukan sesuatu seperti: data-actionurl = "@ Url.Action (" details "," user ", new {id = Model.ID} data-actionurl =" Another Action "?
user3818229

Tidak, masing-masing fungsi loop atas semua elemen html yang memiliki atribut data-actionurl dan mengisinya dengan memanggil permintaan ajax untuk metode aksi. Jadi banyak <div class="renderaction fade-in" ...></div>elemen.
Peter

9

Anda harus membuat Tindakan pada Pengontrol Anda yang mengembalikan hasil tampilan sebagian atau kontrol "UserDetails". Kemudian gunakan saja Http Get atau Post dari jQuery untuk memanggil Action agar html yang ditampilkan ditampilkan.


cara mengatur interval waktu untuk menyegarkan data yang diperbarui dalam fungsi jQuery ini
Neeraj Mehta

5

Menggunakan panggilan Ajax standar untuk mencapai hasil yang sama

        $.ajax({
            url: '@Url.Action("_SearchStudents")?NationalId=' + $('#NationalId').val(),
            type: 'GET',
            error: function (xhr) {
                alert('Error: ' + xhr.statusText);

            },
            success: function (result) {

                $('#divSearchResult').html(result);
            }
        });




public ActionResult _SearchStudents(string NationalId)
        {

           //.......

            return PartialView("_SearchStudents", model);
        }

0

Saya melakukannya seperti ini.

$(document).ready(function(){
    $("#yourid").click(function(){
        $(this).load('@Url.Action("Details")');
    });
});

Metode detail:

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }

0

Jika Anda perlu referensi nilai yang dihasilkan secara dinamis, Anda juga dapat menambahkan parameter string kueri setelah @ URL. Aksi seperti itu:

    var id = $(this).attr('id');
    var value = $(this).attr('value');
    $('#user_content').load('@Url.Action("UserDetails","User")?Param1=' + id + "&Param2=" + value);


    public ActionResult Details( int id, string value )
    {
        var model = GetFooModel();
        if (Request.IsAjaxRequest())
        {
            return PartialView( "UserDetails", model );
        }
        return View(model);
    }
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.