Từ 1 tới 5 trên tổng số 5 kết quả

Đề tài: Tích hợp nicEditor vào MVC3 (chạy được cả trên Partialview)

  1. #1
    Ngày gia nhập
    11 2011
    Bài viết
    13

    Mặc định Tích hợp nicEditor vào MVC3 (chạy được cả trên Partialview)

    Việc tích hợp Editor vào MVC3 không có gì là mới. Tuy nhiên Editor chỉ chạy được trên view mà thui, còn partialview thì không chạy được (do partialview khi load lần đầu sẽ không chạy được script).

    Để khắc phục nhược điểm này, cũng đã có nhiều cách đưa ra (đơn giản nhất là chuyển từ partialview sang view => cách này thì ko còn gì để nói), hoặc là "ép buộc" partialview phải chạy script ngay lần load đầu tiên (cách này hơi phức tạp).

    Một cách khác là mình sẽ "lợi dụng" sự kiện của javascript để partialview hiển thị Editor.
    Ở đây mình sẽ sử dụng nicEditor (dù nicEditor không hỗ trợ tốt bằng CKEditor)

    Trước tiên bạn cần chèn script nicEditor vào Views mà bạn sẽ sử dụng Editor

    Code:
    <script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script> 
     <script>
         var area2;
         function add() { //Thêm Editor vào thẻ textare
             area2 = new nicEditor({ fullPanel: true }).panelInstance('mota');
         }
         function removeArea() { //Gỡ bỏ Editor
             area2.removeInstance('mota');
         }
     </script>
    Sau đó các bạn sử dụng Html Helper để hiển thị Editor hoặc sử dụng thẻ <textarea>
    Ở đây mình sử dụng Html Helper để hiển thị
    Code:
    <%=Html.TextAreaFor(model => model.MOTA, new { id = "mota", style = "width:500px; height:200px", onclick = "add();", onfocus = "add();" })%>
    Lưu ý: các bạn phải khai báo ID của textarea trùng với ID mà bạn khai báo trên đoạn script. Ví dụ: đoạn script trên sẽ thêm editor vào những textare có ID là "mota". Do vậy bạn phải thêm id = "mota" vào textarea
    Đặc biệt là Editor này có thể sử dụng cho cả các partialview. Đối với những bạn đã từng lập trình Editor sẽ "hiểu" nỗi khổ khi mà editor không hiển thị được trong partialview.
    Với cách sử dụng script trên thì việc sử dụng editor trong partialview hoàn toàn đơn giản !

    Chúc các bạn thành công !

  2. #2
    Ngày gia nhập
    04 2012
    Nơi ở
    Ha Noi
    Bài viết
    149

    Mặc định trả lời

    Trích dẫn Nguyên bản được gửi bởi cutuan527 Xem bài viết
    Việc tích hợp Editor vào MVC3 không có gì là mới. Tuy nhiên Editor chỉ chạy được trên view mà thui, còn partialview thì không chạy được (do partialview khi load lần đầu sẽ không chạy được script).

    Để khắc phục nhược điểm này, cũng đã có nhiều cách đưa ra (đơn giản nhất là chuyển từ partialview sang view => cách này thì ko còn gì để nói), hoặc là "ép buộc" partialview phải chạy script ngay lần load đầu tiên (cách này hơi phức tạp).

    Một cách khác là mình sẽ "lợi dụng" sự kiện của javascript để partialview hiển thị Editor.
    Ở đây mình sẽ sử dụng nicEditor (dù nicEditor không hỗ trợ tốt bằng CKEditor)

    Trước tiên bạn cần chèn script nicEditor vào Views mà bạn sẽ sử dụng Editor

    Code:
    <script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script> 
     <script>
         var area2;
         function add() { //Thêm Editor vào thẻ textare
             area2 = new nicEditor({ fullPanel: true }).panelInstance('mota');
         }
         function removeArea() { //Gỡ bỏ Editor
             area2.removeInstance('mota');
         }
     </script>
    Sau đó các bạn sử dụng Html Helper để hiển thị Editor hoặc sử dụng thẻ <textarea>
    Ở đây mình sử dụng Html Helper để hiển thị
    Code:
    <%=Html.TextAreaFor(model => model.MOTA, new { id = "mota", style = "width:500px; height:200px", onclick = "add();", onfocus = "add();" })%>


    Đặc biệt là Editor này có thể sử dụng cho cả các partialview. Đối với những bạn đã từng lập trình Editor sẽ "hiểu" nỗi khổ khi mà editor không hiển thị được trong partialview.
    Với cách sử dụng script trên thì việc sử dụng editor trong partialview hoàn toàn đơn giản !

    Chúc các bạn thành công !
    mình nhớ là mình làm cái này trên mvc3 không vấn đề gì mà.mình thường làm cái popup edit có cả cái ckediter vẫn ngon mà.

  3. #3
    Ngày gia nhập
    11 2011
    Bài viết
    13

    hj, popup của bạn dùng view hay partialview ?

  4. #4
    Ngày gia nhập
    11 2011
    Bài viết
    13

    Mình nhớ không nhầm thì CKEditor được thực thi bằng một đoạn script phải ko ta

  5. #5
    Ngày gia nhập
    04 2012
    Nơi ở
    Ha Noi
    Bài viết
    149

    Mặc định trả lời

    Trích dẫn Nguyên bản được gửi bởi cutuan527 Xem bài viết
    hj, popup của bạn dùng view hay partialview ?
    đương nhiên là paritalview rồi bạn.mình làm dialog động mà.khi nào mở dialog đó nó mới load cái dialog(paritalview) thôi.mình làm cho cái quản lý dữ liệu bảng thêm sửa xóa.

Các đề tài tương tự

  1. Cơ chế truyền dữ liệu giữa Controller và View trong ASP.NET MVC3?
    Gửi bởi canloimat87 trong diễn đàn Thắc mắc lập trình ASP.NET
    Trả lời: 8
    Bài viết cuối: 08-05-2013, 10:59 AM
  2. Cách dùng ActionLink gọi PartialView trong Folder bất kỳ trong MVC3
    Gửi bởi billsang trong diễn đàn Thắc mắc lập trình ASP.NET
    Trả lời: 1
    Bài viết cuối: 15-04-2013, 11:20 AM
  3. ADO.NET Có Virtual localhost nào chạy MVC3 project online như WAMP k?
    Gửi bởi lampv270189 trong diễn đàn Thắc mắc lập trình C#
    Trả lời: 0
    Bài viết cuối: 01-03-2013, 10:50 AM
  4. Thêm, xóa csdl MVC3 và giới thiệu các hoạt động của mô hình mvc3,(videos)
    Gửi bởi ducnv_b01048 trong diễn đàn Tutorials và Thủ thuật lập trình C#, ASP.NET
    Trả lời: 7
    Bài viết cuối: 10-10-2012, 04:12 PM
  5. Kiểm tra input bằng models (Post,Get) MVC3 - Required,RegularExpression MVC3
    Gửi bởi ducnv_b01048 trong diễn đàn Tutorials và Thủ thuật lập trình C#, ASP.NET
    Trả lời: 6
    Bài viết cuối: 09-05-2012, 02:39 PM

Tags của đề tài này

Quyền hạn của bạn

  • Bạn không thể gửi đề tài mới
  • Bạn không thể gửi bài trả lời
  • Bạn không thể gửi các đính kèm
  • Bạn không thể chỉnh sửa bài viết của bạn