ฉันจะแสดงมุมมองบางส่วนโดยใช้ jquery ได้อย่างไร
เราสามารถแสดงมุมมองบางส่วนเช่นนี้:
<% Html.RenderPartial("UserDetails"); %>
เราจะทำเช่นเดียวกันโดยใช้ jquery ได้อย่างไร
ฉันจะแสดงมุมมองบางส่วนโดยใช้ jquery ได้อย่างไร
เราสามารถแสดงมุมมองบางส่วนเช่นนี้:
<% Html.RenderPartial("UserDetails"); %>
เราจะทำเช่นเดียวกันโดยใช้ jquery ได้อย่างไร
คำตอบ:
คุณไม่สามารถแสดงมุมมองบางส่วนได้โดยใช้ 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>
ฉันใช้ ajax load เพื่อทำสิ่งนี้:
$('#user_content').load('@Url.Action("UserDetails","User")');
UserDetails
นี้ชื่อของการกระทำไม่ใช่มุมมองบางส่วนใช่ไหม
@Url.Action("ActionName","ControllerName", new { area = "AreaName" } )
แทนการทำHandcoding
@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);
}
อีกสิ่งที่คุณสามารถลอง (ตามคำตอบของ 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 :-)
<div class="renderaction fade-in" ...></div>
องค์ประกอบหลายอย่าง
คุณจะต้องสร้างแอคชั่นบนคอนโทรลเลอร์ที่ส่งคืนผลลัพธ์ที่แสดงผลของมุมมองหรือการควบคุม "UserDetails" บางส่วน จากนั้นใช้ Http Get หรือ Post จาก jQuery เพื่อเรียกใช้ Action เพื่อให้ html ที่เรนเดอร์แสดงขึ้นมา
การใช้การเรียก 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);
}
ฉันทำอย่างนี้
$(document).ready(function(){
$("#yourid").click(function(){
$(this).load('@Url.Action("Details")');
});
});
วิธีการรายละเอียด:
public IActionResult Details()
{
return PartialView("Your Partial View");
}
หากคุณต้องการอ้างอิงค่าที่สร้างขึ้นแบบไดนามิกคุณสามารถผนวกพารามิเตอร์สตริงข้อความค้นหาต่อท้าย @ 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);
}