Sử dụng các phần trong Chế độ xem một phần trong MVC 4.0

Question

Tôi muốn bao gồm tập lệnh trong các giao diện một phần của mình khi tôi có trường hợp cần khởi tạo jQuery ui trên các phần tử cụ thể. Nó thực sự thuộc về một phần và không phải là trang chứa hoặc bố cục.

Giả sử có cách để làm điều đó trong MVC 4, nhưng tôi dường như không thể tìm thấy bất kỳ thông tin nào về nó.

Answer 1

Tôi cũng gặp sự cố tương tự. Hi vọng điêu nay co ich. Chúng tôi muốn có chế độ xem chứa phần tiêu đề phổ biến hiển thị một số dữ liệu và một phần khác sẽ tự động thay đổi khi chúng tôi nhấp vào liên kết trong trang của chúng tôi. (một cái gì đó tương tự như một tab) Vì chúng tôi không muốn tải lại phần tiêu đề nhiều lần, chúng tôi quyết định có chế độ xem vùng chứa và div giữ chỗ sẽ được sử dụng để tải một phần xem động khi chúng tôi nhấp vào ajax liên kết. Tuy nhiên, một phần lượt xem đã được tải vào trình giữ chỗ có nhiều mã javascript và chúng tôi không thể bao gồm tất cả mã được sử dụng bởi các chế độ xem một phần khác nhau vào một tệp javascript duy nhất và tham chiếu nó từ chế độ xem vùng chứa. chức năng. Giới thiệu các không gian tên để khắc phục vấn đề đó cũng không phải là cách tiếp cận rất hiệu quả vì tất cả logic javascript vẫn sẽ được tải không cần thiết. Làm một chút googling làm cho tôi nhận ra rằng có một phần kịch bản trong một phần xem sẽ không hoạt động. Tôi đã cố gắng để xác định một phần trong quan điểm của tôi bằng cách sử dụng @RenderSection ("partialScripts", bắt buộc: false) không thành công khi RenderSection chỉ hoạt động trong chế độ xem bố cục. Sau đây là cách tiếp cận tôi đã thực hiện để khắc phục vấn đề này. phần tập lệnh được xác định trong giao diện bố cục có thể chứa bất kỳ đánh dấu hợp lệ nào. vì vậy tôi quyết định có một div sẽ giúp tôi tải các kịch bản động trong phần kịch bản của khung nhìn vùng chứa của tôi. Xử lý sự kiện OnSuccess của liên kết hành động được sử dụng để đính kèm các tập lệnh động. Đây là mã cho chế độ xem vùng chứa của tôi.

<ul> 
    <li> 
     @Ajax.ActionLink("Partial One", "PartialOne", ajaxOptions: new AjaxOptions 
        { 
         HttpMethod = "Get", 
         InsertionMode = InsertionMode.Replace, 
         UpdateTargetId = "container", 
         OnSuccess = "loadScriptsDynamically('PartialOne')" 
        }) 
    </li> 
    <li> 
     @Ajax.ActionLink("Partial Two", "PartialTwo", ajaxOptions: new AjaxOptions 
        { 
         HttpMethod = "Get", 
         InsertionMode = InsertionMode.Replace, 
         UpdateTargetId = "container", 
         OnSuccess = "loadScriptsDynamically('PartialTwo')" 
        }) 
    </li> 
</ul> 

<div id="container"> 
</div> 

@section scripts 
{ 
    <script src="@Url.Content("~/Scripts/app/Container.js")"></script> 
    <div id="dynamicScripts" 
     data-partial-one="@Url.Content("~/Scripts/App/PartialOne.js")" 
     data-partial-two="@Url.Content("~/Scripts/App/PartialTwo.js")"> 
    </div> 
} 

Mã từ lớp điều khiển

public PartialViewResult PartialOne() 
    { 
     return PartialView("_PartialOne"); 
    } 

    public PartialViewResult PartialTwo() 
    { 
     return PartialView("_PartialTwo"); 
    } 

Container.js tập tin chứa logic rằng động sẽ được tải các kịch bản cần thiết cho quang cảnh một phần khác nhau.

function loadScriptsDynamically(name) { 
    var script = document.createElement('script'); 
    var dynamicScriptsDiv = document.getElementById('dynamicScripts'); 
    var dynamicScriptDivJQuery = $('#dynamicScripts'); 
    dynamicScriptDivJQuery.empty(); 
    if (name === 'PartialOne') { 
     script.src = dynamicScriptDivJQuery.data('partial-one'); 
     dynamicScriptsDiv.appendChild(script); 
    } else if (name === 'PartialTwo'){ 
     script.src = dynamicScriptDivJQuery.data('partial-two'); 
     dynamicScriptsDiv.appendChild(script); 
    } 
} 

Chúng tôi không thể sử dụng jQuery để nối thêm phần tử tập lệnh vào div do một số hạn chế. Nhưng chúng ta có thể sử dụng một số mã javascript cũ thời để tạo ra một phần tử kịch bản và gắn nó vào dynamicScriptsDiv. Xin lưu ý rằng tôi đang truy cập vào đường dẫn kịch bản mà trước đây tôi đã đính kèm vào dynamicScriptsDivusing bằng cách sử dụng một số thuộc tính data như ứng dụng MVC của chúng tôi chạy trong máy chủ IIS và chúng tôi không muốn mã hóa chúng.

Việc đính kèm sự kiện sau khi tập lệnh được tải động là thử thách tiếp theo của chúng tôi. Bằng cách sử dụng một hàm gọi ngay lập tức tôi đã có thể đăng ký tất cả các mã ràng buộc sự kiện của tôi và bất kỳ logic khởi tạo nào tôi phải thực hiện bằng cách sử dụng mã sau đây.

(function initPartialOne() { 
    $('#myButton').click(function() { 
     setLabelText(); 
    }); 
})(); 

function setLabelText() { 
    $('#myLabel').text('One was clicked'); 
} 

Và cuối cùng là mã cho một trong các chế độ xem một phần của tôi.

<label id="myLabel">[Message]</label> 
<input type="button" id="myButton" value="Click me partial one"/> 

Answer 2

Điều này không thể thực hiện được trong ASP.NET MVC (See second comment in this post). Các phần chỉ có thể được sử dụng trong các khung nhìn (chính), không được sử dụng trong các khung nhìn từng phần.

Tôi hiện không thể tìm thấy bất kỳ tài nguyên nào theo MVC phiên bản 4 nhưng một thử nghiệm ngắn trong Visual Studio cũng không thành công cho MVC 4 trừ khi bạn hiển thị toàn bộ phần xem bên trong phần.

Tuy nhiên, tôi không khuyên bạn nên làm những việc như thế này. Tôi đã gặp vấn đề bộ nhớ đệm trong quá khứ với xem một phần bộ nhớ đệm-bộ nhớ đệm ví dụ. Caching các khung nhìn một phần dẫn đến mã không được thực hiện và gây ra mã javascript cần thiết chưa được trả lại. Vì vậy, tôi khuyên bạn nên đặt mọi thứ bạn cần cho chế độ xem một phần trong chế độ xem từng phần hoặc (thậm chí tốt hơn) nghĩ về thiết kế rõ ràng và đặt tất cả mã javascript của bạn vào một tệp javascript được rút gọn một lần cho toàn bộ trang (và sau đó được lưu trữ trong bộ nhớ cache của trình duyệt).