Wednesday 12 June 2013

Javascript, Load file (html script) into div, getting back UI reference

Load UI dynamically with jquery's .load() function
Hi, bellow is a javascript  script where loads another html into your page, into another div or whatever. As you see, creates another div with a new provided id. This script is useful because applies the "hooks" when the load is completed, so there is no case to loose the load. Also, the function that it offered to be called after the load is completed, returns a lot of args, like the "xhr" where is the real load where the jquery uses under the hood.

function LoadUIFromFile(
    HostID,            // The id of the element where the new element will be added.
    EmbeddedID,        // The id of the new embedded div element.
    FileToLoad,        // The html script where will be loaded in the new id.
    HideIt,            // (optional) Boolean, hide it or not on new div's creation.
    OnLoad,            // (optional) Function will be called on load completion. Available args: Caller, responseText, textStatus, xhr.
    CallerObject    // (optional) Which object called this function, this will be used for OnLoad
){

    //handle the undefined variables
    if (typeof HideIt == 'undefined') HideIt=true;
    if (typeof OnLoad == 'undefined') OnLoad=null;
    if (typeof CallerObject == 'undefined') CallerObject=null;
   
    //create the div, load the data of the file to it and hide it
    $("#"+HostID).append('<div id="'+EmbeddedID+'"></div>');
    $("#"+EmbeddedID).data("AnelUtils_OnLoadFunction",OnLoad);
    $("#"+EmbeddedID).data("AnelUtils_CallerObject",CallerObject);
    $("#"+EmbeddedID).load(FileToLoad, null, function(responseText, textStatus, xhr) {
        if ($(this).data("AnelUtils_OnLoadFunction")!=null)
            $(this).data("AnelUtils_OnLoadFunction")($(this).data("AnelUtils_CallerObject"), responseText, textStatus, xhr);
    });
    if (HideIt) $("#"+EmbeddedID).hide();
   
    return $("#"+EmbeddedID);

}

Tuesday 11 June 2013

real Rich Editor on .net ASP MVC applications


situation

real Rich Editor on .net ASP MVC applications
problem

ASP.net MVC - Viewer
How to embeed, the Rich Editor, JCE TinyMCE, HTML editor to your ASP AMV project
The somehow problem with this solution is that if you have more that one textarea in your page, all text areas will use the editor.
difficulty level

1/10 :))
compatibility

ASP.net MVC
solution

1. Download the editor from this page: http://www.tinymce.com/download/download.php This example is running with version TinyMCE 3.5.8 (the vesrion TinyMCE 4.0b1 found to have broken links itself!). Place this JS to Script folder of your MVC project. For instance, I placed it to ~/Scripts/JSScripts/TinyMCEEditor/. To add it in pretty nice fashion, create the tinymce directory somewhere out of the VS, and drag and drop it into Solution Explorer. The VS automatically will create folders files in both solution explorer and physical files in Solution’s directory.
2. Add this script to your viewer. This script initialize the editor. The red text should be replaced with the exact file name of the js file of the editor.
<script type="text/javascript" src="~/Scripts/JSScripts/TinyMCEEditor/tiny_mce_src.js"></script>
<script type="text/javascript">
 tinyMCE.init({
  // General options
  mode: "textareas",
  theme: "advanced",
  plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
  setup: function (ed) {
   ed.onKeyPress.add(
   function (ed, evt) {
   }
   );
  }, // Theme options
  theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
  theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
  theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
  theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
  theme_advanced_toolbar_location: "top",
  theme_advanced_toolbar_align: "left",
  theme_advanced_statusbar_location: "bottom",
  theme_advanced_resizing: true,
  // Example content CSS (should be your site CSS)
  content_css: "css/content.css",
  // Drop lists for link/image/media/template dialogs
  template_external_list_url: "lists/template_list.js",
  external_link_list_url: "lists/link_list.js",
  external_image_list_url: "lists/image_list.js",
  media_external_list_url: "lists/media_list.js",
  // Style formats
  style_formats: [
  { title: 'Bold text', inline: 'b' },
  { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
  { title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
  { title: 'Example 1', inline: 'span', classes: 'example1' },
  { title: 'Example 2', inline: 'span', classes: 'example2' },
  { title: 'Table styles' },
  { title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
  ],
  // Replace values for the template plugin
  template_replace_values: {
   username: "Some User",
   staffid: "991234"
  }
 });
</script>

3. Call the editor via textarea element. Instead of the helper, write the html code by your self ("Description" is the name of the field)
  remove this: @Html.EditorFor(model => model.Description)
  with this: @Html.TextAreaFor(model => model.Description)
  or with this: <textarea id="Description" name="Description" rows="15" cols="50" style="width: 80%" runat="server">@Html.Raw(Model.Description)</textarea>

4. Update your MVC model to allow html scripts from the Viewer. Add the attribute [AllowHtml] to your Model's attribute, to avoid validation html form error request. Use using System.Web.Mvc;
5 . To Show the value as Html rich format, use the HTML.Raw helper as above
@Html.Raw(item.Description)