ASP.NET MVC jQuery kullanarak kısmi görünümü oluşturma

JQuery kullanarak kısmi görünümü nasıl oluşturabilirim?

Kısmi Görünümü şu şekilde oluşturabiliriz:

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

Aynı şeyi jquery kullanarak nasıl yapabiliriz?

Yalnızca jQuery kullanarak kısmi görünüm oluşturamazsınız. Bununla birlikte, sizin için kısmi görünümü oluşturacak ve jQuery / AJAX kullanarak sayfaya ekleyecek bir yöntemi (eylem) çağırabilirsiniz. Aşağıda, eylemin URL'sini düğmedeki bir veri özelliğinden yükleyen ve kısmi görünümde bulunan DIV'yi güncellenen içeriklerle değiştirmek için bir GET isteğini tetikleyen bir düğme tıklama işleyicimiz var.

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

burada kullanıcı denetleyicisinin ayrıntılar adında bir eylemi vardır:

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

    return PartialView( "UserDetails", model );
}

Bu, kısmi görünümünüzün kimliğine sahip bir kapsayıcı olduğunu varsayar detailsDiv böylece her şeyi yalnızca çağrının sonucunun içeriğiyle değiştirirsiniz.

Üst Görünüm Düğmesi

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

User, denetleyici adı ve detailseylem adı @Url.Action(). UserDetails kısmi görünümü

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

Bunu yapmak için ajax yükü kullandım:

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

@ tvanfosson cevabı ile sallanıyor.

Ancak, js içinde bir iyileştirme ve küçük bir denetleyici kontrolü öneririm.

Bir @Urleylemi çağırmak için yardımcıyı kullandığımızda , biçimlendirilmiş bir html alırız. .htmlGerçek öğeyi ( .replaceWith) değil, içeriği ( ) güncellemek daha iyi olur .

At hakkında daha fazla bilgi: jQuery's replaceWith () ve html () arasındaki fark nedir?

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

Bu, içeriğin birkaç kez değiştirilebileceği ağaçlarda özellikle yararlıdır.

Denetleyicide eylemi istemciye bağlı olarak yeniden kullanabiliriz:

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

Deneyebileceğiniz başka bir şey (tvanfosson'un cevabına dayanarak) şudur:

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

Ve sonra sayfanızın komut dosyaları bölümünde:

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

Bu ajax kullanarak @ Html.RenderAction oluşturur.

Ve tüm fany sjmansy yapmak için bu css kullanarak bir solma etkisi ekleyebilirsiniz:

/* 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;
}

Adamı seviyorum mvc :-)

Denetleyicinizde "UserDetails" kısmi görünümünün veya denetiminin işlenen sonucunu döndüren bir Eylem oluşturmanız gerekir. Ardından, görüntülenen html'nin görüntülenmesini sağlamak için Eylem'i çağırmak için jQuery'den bir Http Get veya Post kullanın.

Aynı sonucu elde etmek için standart Ajax çağrısını kullanma

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

Ben böyle yaptım.

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

Ayrıntılar Yöntemi:

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }

Dinamik olarak oluşturulmuş bir değere başvurmanız gerekiyorsa, @ URL'den sonra sorgu dizesi parametreleri de ekleyebilirsiniz:

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