Kết xuất chế độ xem một phần bằng jQuery trong ASP.NET MVC

Làm cách nào để hiển thị chế độ xem một phần bằng jquery?

Chúng ta có thể hiển thị Chế độ xem một phần như thế này:

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

Làm thế nào chúng ta có thể làm tương tự bằng cách sử dụng jquery?

Bạn không thể hiển thị chế độ xem một phần chỉ bằng jQuery. Tuy nhiên, bạn có thể gọi một phương thức (hành động) sẽ hiển thị chế độ xem một phần cho bạn và thêm nó vào trang bằng jQuery / AJAX. Ở bên dưới, chúng tôi có trình xử lý nhấp vào nút tải url cho hành động từ thuộc tính dữ liệu trên nút và thực hiện yêu cầu GET để thay thế DIV có trong chế độ xem một phần bằng nội dung được cập nhật.

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

trong đó bộ điều khiển người dùng có một hành động có tên là chi tiết:

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

    return PartialView( "UserDetails", model );
}

Điều này giả định rằng chế độ xem một phần của bạn là một thùng chứa với id detailsDivđể bạn chỉ cần thay thế toàn bộ nội dung bằng nội dung của kết quả cuộc gọi.

Nút xem phụ huynh

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

Userlà tên bộ điều khiển và detailslà tên hành động trong @Url.Action(). UserDetails xem một phần

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

Tôi đã sử dụng tải ajax để làm điều này:

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

@tvanfosson đá với câu trả lời của mình.

Tuy nhiên, tôi sẽ đề xuất một cải tiến trong js và kiểm tra bộ điều khiển nhỏ.

Khi chúng ta sử dụng @Urltrợ giúp để gọi một hành động, chúng ta sẽ nhận được một định dạng html. Sẽ tốt hơn nếu cập nhật nội dung ( .html) chứ không phải yếu tố thực tế (.replaceWith ).

Thông tin thêm về tại: Sự khác biệt giữa thay thế của jQueryWith () và html () là gì?

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

Điều này đặc biệt hữu ích trong cây, nơi nội dung có thể được thay đổi nhiều lần.

Tại bộ điều khiển, chúng ta có thể sử dụng lại hành động tùy thuộc vào người yêu cầu:

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

Một điều khác bạn có thể thử (dựa trên câu trả lời của tvanfosson) là:

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

Và sau đó trong phần tập lệnh của trang của bạn:

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

Điều này làm cho @ Html.RenderAction của bạn sử dụng ajax.

Và để làm cho tất cả sjmansy cuồng nhiệt, bạn có thể thêm hiệu ứng mờ dần bằng cách sử dụng css này:

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

Người đàn ông tôi yêu mvc :-)

Bạn sẽ cần tạo một Hành động trên Bộ điều khiển của mình để trả về kết quả được hiển thị của chế độ xem hoặc điều khiển một phần "UserDetails". Sau đó, chỉ cần sử dụng một Get Get hoặc Post từ jQuery để gọi Action để hiển thị html được hiển thị.

Sử dụng lệnh gọi Ajax tiêu chuẩn để đạt được kết quả tương tự

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

Tôi đã làm nó như thế này.

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

Phương pháp chi tiết:

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }

Nếu bạn cần tham chiếu một giá trị được tạo động, bạn cũng có thể nối các tham số chuỗi truy vấn sau @ URL.Action như vậy:

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