Skip to main content

knockoutjs with Umbraco and Umbraco base call

I was thinking how we could use knockoutjs with Umbraco, so just thought blog it.

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.
  • Features
  • Elegant dependency tracking
  • Declarative bindings
  • Flexible and sophisticated templating
  • Trivially extensible

More information reference: http://knockoutjs.com.

Well, we start with Umbraco, To know more on umbraco, Please refer below links
http://our.umbraco.org/wiki/how-tos/a-complete-newbie's-guide-to-umbraco
http://umbraco.com/help-and-support/video-tutorials/getting-started?freeVideos=1
http://our.umbraco.org/wiki/how-tos/getting-started-with-umbraco-what-is-next-after-you-install
http://our.umbraco.org/wiki/install-and-setup, 

I have created a document with document type "Announcement" with below two properties
  • announcementTitle 
  • description
My Html block is as shown below
<p>
        <h1 data-bind="text: Title">
        </h1>
    </p>
    <p>
        <span data-bind="html: Description"></span>
    </p>
    <form id="frmAnnoumcent">
    <p>
        Title:
        <input data-bind="value: Title" name="Title" style="width: 400px" /></p>
    <p>
        Annoucement:
        <textarea data-bind="value: Description" name="Description" rows="5" cols="60"> </textarea></p>
    <button data-bind="click: save">
        Save Listings</button>
    </form>

Script Block

    <script type="text/javascript">

    var announcement = {
        "Title": ko.observable("") ,
        "Description": ko.observable(""),
    };
  
   var viewModel=ko.mapping.fromJS(announcement);
     $.ajax({
        url: '/base/baseCall/GetAnnouncement.aspx',
        type: "POST",
        data: $('#frmTest').serialize(),
        dataType: 'JSON',
        success: function(result)
        {
            ko.mapping.fromJS(result,{},viewModel);
          
        },
        error:
        function(result)
        {
        alert(result.message);
        }
       
    });
  
    viewModel.save = function() {
    $.ajax({
        url: '/base/baseCall/SaveAnnouncement.aspx',
        type: "POST",
        data: $('#frmTest').serialize(),
        dataType: 'JSON',
        success: function(result)
        {

            ko.mapping.fromJS(result,{},viewModel);
             ko.applyBindings(viewModel);
          
        },
        error:
        function(result)
        {
        alert(result.message);
        }
       
    });
},
$(function() {
    ko.applyBindings(viewModel);
});
     </script>

Base Service Call

       [RestExtension("baseCall")]
    public class TestService
    {
        [RestExtensionMethod(returnXml = false)]
        public static string SaveAnnouncement()
        {
            DocumentType dt = DocumentType.GetByAlias("Announcement");
            User author = User.GetUser(0);

            string title = HttpContext.Current.Request["Title"];
            string Description = HttpContext.Current.Request["Description"];

            Document doc = Document.MakeNew(title, dt, author, 1048);
            doc.getProperty("announcementTitle").Value = title;
            doc.getProperty("description").Value = Description;
            //after creating the document, prepare it for publishing

            doc.Publish(author);

            //Tell umbraco to publish the document
            umbraco.library.UpdateDocumentCache(doc.Id);

            return GetAnnouncement();
        }
        [RestExtensionMethod(returnXml=false)]
        public static string GetAnnouncement()
        {

            List<Announcement> announcement = new List<Announcement>();
            Document root = new Document(1048);
            string sJSON="";
            if (root.HasChildren)
            {
                foreach (Document tempDocument in root.Children.OrderByDescending(res => res.CreateDateTime))
                {
                    Announcement a = new Announcement();
                    Property prop1 = tempDocument.getProperty("announcementTitle");

                    a.Title = (string)prop1.Value;
                    prop1 = tempDocument.getProperty("description");
                    a.Description = (string)prop1.Value;
                    announcement.Add(a);
                    System.Web.Script.Serialization.JavaScriptSerializer oSerializer =
        new System.Web.Script.Serialization.JavaScriptSerializer();
                    sJSON = oSerializer.Serialize(a);

                    sJSON=sJSON.Insert(sJSON.Length - 2, ",");
                    break;
                }
            }
          
            return sJSON;
        }



    }
    public class Announcement
    {
        public string Title { get; set; }
        public string Description { get; set; }
    }

Of-course the knockoutjs can be used well, and it gives an live UI. We could create an amazing user experience with it.

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Localization in Umbraco, Item Page field localization

Umbraco is one of the most deployed Web Content Management Systems on the Microsoft stack. It's in the top five most popular server applications and among the ten most popular open source tools in general. You can directly download and start using it from http://www.umbraco.com If you have not used the application yet, its always worth trying it once. I am sure you will love it. Well, for the first time users, Umbraco provide step by step instruction for initial set up, once you are done you can use some sample template or create a blank website. To know more on umbraco, Please refer below links http://our.umbraco.org/wiki/how-tos/a-complete-newbie's-guide-to-umbraco http://umbraco.com/help-and-support/video-tutorials/getting-started?freeVideos=1 http://our.umbraco.org/wiki/how-tos/getting-started-with-umbraco-what-is-next-after-you-install http://our.umbraco.org/wiki/install-and-setup ,  I have created a blank website, Now we will go step by step. Fi...
Post a Comment
Read more

Why not to have a static const in c#

This is just a thought, that I was thinking why can't we have a constant with static in C#, and the answer is 'NO'; That we cannot have a static constant; e.g: I created a class as below: public class Constants1 { public const string Const1 = "Hello"; public const string Const2 = "World"; public static string Static1 = "Hello Static"; } When we compile the program into IL, the C# compiler does a magic in IL, that the constants converts into static literals, of course it has to, that's why we are able to access the constants as Constants1.Const1
Post a Comment
Read more

DD4TFormRouteHandler (posting a form as tridion page url)

ASP.NET routing enables us to use URLs that are not physical files, In DD4T we have the default page route definition. In which all page request redirct to Page controller and process the page. DD4TFormRouteHandler is a custom route handler responsible for mapping incoming browser requests to particular MVC controller actions, this works along with  DD4TFormHelper  (that generate the route information for the form) Posting a form in DD4T is not complicated, you can create the mvc form as a normal controller and action, then post it via AJAX. But, when we need to do post the form as normal page, It would need a tweak as the controller/action is not a page existed in tridion. This can be achieved by implementing a custom Mvc RoutHandler and reroute the posted form to the encrypted action and controller. It works as below daigram. So, how to do this. to render out the form we have BeginDD4TForm html helper as below that generate the form with encrypted route values....
Post a Comment
Read more