Có thể khởi động chức năng javascript sau khi xem một phần hiển thị trong MVC Asp.net không?

Question

Hãy để tôi mở đầu câu hỏi này với thực tế là tôi rất mới với MVC.

Tôi có một trường hợp mà tôi đang hiển thị lưới devexpress trong chế độ xem từng phần.

@Html.Partial("MyGridPartial", Model) 

Tôi cần khởi động chức năng javascript tại thời điểm mô hình đã được điền thông qua hiển thị chế độ xem một phần này. Tôi đã cố gắng làm điều này thông qua việc này. :

settings.ClientSideEvents.EndCallback 

Tôi có thể đến thời điểm này, nhưng tại thời điểm đó tôi không có mô hình chính nó để nó không tốt. Tôi đã tự hỏi nếu có ai nhận thức được một cách chung chung của đá/gắn vào một phần xem render để nhảy vào một số mã javascript khách hàng.

Answer 1

Nếu bạn đang hiển thị phần này như là một phần của luồng thông thường của Chế độ xem đang hiển thị, câu trả lời là KHÔNG.

Lý do cho việc này là một phần được chuyển đổi thành chuỗi trước khi Chế độ xem chính được hiển thị. Tại thời điểm đó, không có trình duyệt nào của bạn đã được trình duyệt nhìn thấy, không có jscript nào được đọc.

Nếu, mặt khác, bạn trả lại các phần trong chức năng JQuery Ready của bạn:

$(document).ready(function() {

Tôi nghĩ rằng bạn sẽ cần phải sử dụng một hành động một phần (một phần đó được gọi bằng một phương pháp hành động) . Hành động Partials có thể được gọi trong phạm vi chức năng JQuery Ready của bạn bằng cách tham khảo url (restfully):

$('#divMyGridPartial').load('/Grids/MyGridPartial/{id}'); 

và bất kỳ theo dõi chức năng JScript/jquery có thể được gọi trong loạt sẵn sàng.

Lợi thế khác của một phần hành động, Mô hình được hình thành trong phương thức hành động và có thể được tạo theo ngữ cảnh cho những gì bạn cần (lý tưởng là bỏ đi một id được truyền).

Answer 2

Nếu đó là một PartialView bạn đang hiển thị trong Chế độ xem trên phương thức của máy chủ, thì Dave sẽ hoạt động tốt nhất. Chỉ cần kết nối mã của bạn với sự kiện sẵn sàng DOM.

$(document).ready(function(){ 
    //Javascript logic to fire goes here 
}); 

hoặc nếu bạn prever phiên bản tốc ký ...

$(function(){ 
    //Javascript logic to fire goes here 
}); 

Nếu bạn đang render một cái nhìn cục bộ đang được nạp thông qua Ajax sau đó cùng một phương pháp sẽ làm việc. jQuery sẽ chạy javascript trong html được truyền lại cho máy khách thông qua Ajax khi nó được gắn vào DOM nếu tôi gọi lại chính xác (cảm thấy tự do để kiểm tra điều này. Tôi chỉ nhớ về bộ nhớ khi nó được gắn vào DOM, nhưng tôi tin rằng là một tính năng của phương pháp load()), giả sử javascript bạn muốn chạy là trong phản hồi. Nếu nó nằm trong trang mẹ gửi yêu cầu Ajax thì bạn đặt cược tốt nhất là móc nó lên đến sự kiện hoàn chỉnh.(Tôi đang Populating tham số trên các mặt hàng ở đây)

$("#wrapperAwaitingContent").load("/Grids/MyGridPartial", {id: null /*parameters*/}, function(text, status, xhr){ 
    //Javascript logic to fire goes here 
}); 

Đối với tôi url sử dụng trong .load() cuộc gọi được giải quyết bằng cách sử dụng UrlHelper trên máy chủ

$("#wrapperAwaitingContent").load("@Url.Action("MyGridPartial", "Grids")", {id: null /*parameters*/}, function(text, status, xhr){ 
    //Javascript logic to fire goes here 
}); 

Bạn cũng có tùy chọn làm một cái gì đó tương tự như thế này bằng cách sử dụng Ajax không phô trương. (Tôi đang Populating các tham số về phía máy chủ ở đây)

@Ajax.ActionLink("Load Data", "MyGridPartial", "Grids", new { id = null/*parameters*/ }, new AjaxOptions() { UpdateTargetId = "wrapperAwaitingContent", OnComplete="onCompleteMethodName" }) 

Có nhiều thuộc tính bạn có thể thiết lập cho AjaxOptions khác hơn là yếu tố để nhận HTML và các phương pháp để gọi khi nó đã hoàn thành nhưng tôi tìm thấy tôi sẽ sử dụng lại các hàm được định nghĩa trong tệp javascript được chia sẻ và chỉ điền chúng nếu chúng chưa được điền từ đó, như thế này ...

$("a[data-ajax='true']").each(function() { 
    var ajaxUpdate = $(this).closest("data-ajax-container"); 
    $(this).attr("data-ajax-update", $(this).attr("data-ajax-update") ? $(this).attr("data-ajax-update") : ajaxUpdate); 
    $(this).attr("data-ajax-mode", $(this).attr("data-ajax-mode") ? $(this).attr("data-ajax-mode") : "replace"); 
    $(this).attr("data-ajax-success", $(this).attr("data-ajax-success") ? $(this).attr("data-ajax-success") : "AjaxSuccess"); 
    $(this).attr("data-ajax-complete", $(this).attr("data-ajax-complete") ? $(this).attr("data-ajax-complete") : "AjaxComplete"); 
    $(this).attr("data-ajax-failure", $(this).attr("data-ajax-error") ? $(this).attr("data-ajax-error") : "AjaxError"); 
});