แสดงมุมมองบางส่วนโดยใช้ jQuery ใน ASP.NET MVC


223

ฉันจะแสดงมุมมองบางส่วนโดยใช้ jquery ได้อย่างไร

เราสามารถแสดงมุมมองบางส่วนเช่นนี้:

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

เราจะทำเช่นเดียวกันโดยใช้ jquery ได้อย่างไร


คุณสามารถดูบทความด้านล่างได้เช่นกัน tugberkugurlu.com/archive/ ......มันทำตามแนวทางที่แตกต่างและปรับปรุงวิธีการ
tugberk

คำถามโง่ ๆ. UserDetails เป็นมุมมองบางส่วนเป็นหน้า cshtml: UserDetails.cshtml หรือไม่ ฉันพยายามโหลดมุมมองบางส่วน และโดยปกติฉันจะใช้: @ Html.Partial ("~ / Views / PartialViews / FirstPartialViewTwo.cshtml")
George Geschwend

1
@ GeorgeGeschwend ไม่มีอะไรโง่ที่นี่จนกว่าจะมีคนสามารถตอบสนองได้ UserDetails (UserDetails.cshtml) เป็นมุมมองบางส่วนภายในตัวควบคุมผู้ใช้ เช่นเดียวกับในความคิดเห็นของคำตอบที่ทำเครื่องหมายไว้ดีกว่าที่จะใช้ Url.Action แทนที่จะเข้ารหัสอย่างหนักในเส้นทางแบบเต็มของมุมมอง
Prasad

คำตอบ:


286

คุณไม่สามารถแสดงมุมมองบางส่วนได้โดยใช้ jQuery เท่านั้น อย่างไรก็ตามคุณสามารถเรียกใช้เมธอด (การกระทำ) ที่จะแสดงมุมมองบางส่วนสำหรับคุณและเพิ่มไปยังหน้าโดยใช้ jQuery / AJAX ในด้านล่างเรามีตัวจัดการการคลิกปุ่มที่โหลด URL สำหรับการดำเนินการจากแอตทริบิวต์ของข้อมูลบนปุ่มและตัดการร้องขอ GET เพื่อแทนที่ DIV ที่มีอยู่ในมุมมองบางส่วนด้วยเนื้อหาที่อัปเดต

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

ตำแหน่งที่คอนโทรลเลอร์ของผู้ใช้มีการดำเนินการที่มีรายละเอียดซึ่งมีชื่อ:

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

    return PartialView( "UserDetails", model );
}

นี่คือการสันนิษฐานว่ามุมมองบางส่วนของคุณเป็นคอนเทนเนอร์ที่มี ID detailsDivเพื่อให้คุณแทนที่สิ่งทั้งหมดด้วยเนื้อหาของผลลัพธ์ของการโทร

ปุ่มมุมมองผู้ปกครอง

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

Userเป็นชื่อตัวควบคุมและเป็นชื่อในการดำเนินการdetails @Url.Action()UserDetails มุมมองบางส่วน

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

ฉันได้รับคำขอที่ไม่ดีด้วยรหัสตัวอย่างนี้ที่คุณให้ ฉันคัดลอกตามที่เป็นอยู่และเพิ่งเปลี่ยนการกระทำของคอนโทรลเลอร์ที่ควรไป ฉันไม่แน่ใจว่า "ผู้ใช้" มีไว้เพื่ออะไร
chobo2

1
ฉันเพิ่งใช้ชื่อคอนโทรลเลอร์และชื่อการกระทำ "ที่น่าจะเป็น" เพราะคุณไม่ได้ใส่รหัสใด ๆ เพียงแค่แทนที่ "รายละเอียด" ด้วยการกระทำของคุณและ "ผู้ใช้" ด้วยชื่อคอนโทรลเลอร์ของคุณ
tvanfosson

1
ขอบคุณอีกครั้งสำหรับคำตอบที่ดี tvanfosson

ความคิดใด ๆ วิธีนี้จะทำงานกับมีดโกน? ลอง $ .get ("@ Url.Action (\" Manifest \ ", \" อัพโหลด \ ", ใหม่ {id =" + key + "})", ฟังก์ชัน (ข้อมูล) {$ ("<div />") .replaceWith (data);});
Patrick Lee Scott

1
@Zapnologica - หากคุณโหลดทั้งตารางใหม่อีกครั้งคุณอาจต้องนำปลั๊กอินไปใช้ใหม่เนื่องจากองค์ประกอบ DOM ที่เชื่อมต่อเดิมถูกแทนที่แล้ว อาจเป็นการดีกว่าถ้าจะเชื่อมต่อกับวิธีที่ส่งคืนข้อมูลเป็น JSON, datatables.net/examples/data_sources/server_side.html
tvanfosson

152

ฉันใช้ ajax load เพื่อทำสิ่งนี้:

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

46
โดยทั่วไปฉันคิดว่าคุณควรไปกับผู้ช่วย Url.Action แทนที่จะใช้วิธีเข้ารหัสอย่างหนัก สิ่งนี้จะพังถ้าเว็บไซต์ของคุณอยู่ในไดเรกทอรีย่อยแทนที่จะเป็นรูท การใช้ตัวช่วยช่วยแก้ไขปัญหานั้นและให้คุณเพิ่มพารามิเตอร์ด้วยค่าที่ตั้งไว้แบบไดนามิก
tvanfosson

18
คุณสามารถทำ $ ('# user_content'). โหลด ('@ Url.Content ("~ / ผู้ใช้ / UserDetails")') เพื่อหลีกเลี่ยงปัญหานั้น - ฉันมักจะใช้วิธีนี้ถ้าฉันต้องการจาวาสคริปต์เพื่อตบที่ querystring ในตอนท้ายของ URL
Shawson

ในคำตอบUserDetailsนี้ชื่อของการกระทำไม่ใช่มุมมองบางส่วนใช่ไหม
Maxim V. Pavlov

4
@Prasad: URL ที่ควรได้รับการประเมินโดยใช้@Url.Action("ActionName","ControllerName", new { area = "AreaName" } )แทนการทำHandcoding
Imad Alazani

3
@PKKG @ Url.Action () ประเมินเฉพาะในมีดโกน สิ่งนี้ใช้ไม่ได้หาก OP ต้องการใส่รหัสในไฟล์ js แยกต่างหากและอ้างอิง
Michael

60

@tvanfosson ตอบด้วยหินของเขา

อย่างไรก็ตามฉันขอแนะนำให้ปรับปรุงภายใน js และตรวจสอบคอนโทรลเลอร์ขนาดเล็ก

เมื่อเราใช้ตัว@Urlช่วยเพื่อเรียกการกระทำเราจะได้รับรูปแบบ html มันจะเป็นการดีกว่าที่จะปรับปรุงเนื้อหา ( .html) ไม่ใช่องค์ประกอบจริง ( .replaceWith)

เพิ่มเติมเกี่ยวกับที่: อะไรคือความแตกต่างระหว่าง jQuery ของ replaceWith () และ html ()

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

สิ่งนี้มีประโยชน์เป็นพิเศษในต้นไม้ซึ่งเนื้อหาสามารถเปลี่ยนแปลงได้หลายครั้ง

ที่คอนโทรลเลอร์เราสามารถนำการดำเนินการกลับมาใช้ใหม่ได้โดยขึ้นอยู่กับผู้ร้องขอ:

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

11

อีกสิ่งที่คุณสามารถลอง (ตามคำตอบของ tvanfosson) คือ:

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

จากนั้นในส่วนสคริปต์ของหน้าของคุณ:

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

สิ่งนี้ทำให้ @ Html.RenderAction ของคุณใช้ ajax

และเพื่อให้มันเป็น sjmansy ที่มีแฟน ๆ ทุกคนคุณสามารถเพิ่มเอฟเฟ็กต์สีซีดจางโดยใช้ CSS นี้:

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

ผู้ชายฉันรัก mvc :-)


ทำไมคุณถึงทำหน้าที่แต่ละอย่าง? มันทำงานอย่างไร? คุณทำอะไรเช่น: data-actionurl = "@ Url.Action (" รายละเอียด "," ผู้ใช้ ", ใหม่ {id = Model.ID} data-actionurl =" การกระทำอื่น "
user3818229

ไม่แต่ละฟังก์ชั่นจะวนซ้ำไปตามองค์ประกอบ html ทั้งหมดที่มีแอ็ตทริบิวต์ data-actionurl และเติมมันโดยเรียกใช้คำร้องขอ ajax สำหรับวิธีการดำเนินการ <div class="renderaction fade-in" ...></div>องค์ประกอบหลายอย่าง
ปีเตอร์

9

คุณจะต้องสร้างแอคชั่นบนคอนโทรลเลอร์ที่ส่งคืนผลลัพธ์ที่แสดงผลของมุมมองหรือการควบคุม "UserDetails" บางส่วน จากนั้นใช้ Http Get หรือ Post จาก jQuery เพื่อเรียกใช้ Action เพื่อให้ html ที่เรนเดอร์แสดงขึ้นมา


วิธีการตั้งค่าช่วงเวลาเพื่อรีเฟรชข้อมูลที่ปรับปรุงแล้วในฟังก์ชั่น jQuery นี้
Neeraj Mehta

5

การใช้การเรียก Ajax มาตรฐานเพื่อให้ได้ผลลัพธ์เดียวกัน

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

ฉันทำอย่างนี้

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

วิธีการรายละเอียด:

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }

0

หากคุณต้องการอ้างอิงค่าที่สร้างขึ้นแบบไดนามิกคุณสามารถผนวกพารามิเตอร์สตริงข้อความค้นหาต่อท้าย @ URL.Action ดังนี้:

    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);
    }
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.