Render Tampilan Parsial Menggunakan jQuery di ASP.NET MVC

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 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 telah menggunakan beban ajax untuk melakukan ini:

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

@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);
}

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

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.

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);
        }

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");
        }

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);
    }