Click here to Skip to main content
Click here to Skip to main content

Hijk Project -tiny WebAPI kit

By , 20 Feb 2013
Rate this:
Please Sign up or sign in to vote.

Download Hijk-full.zip 163K

Download Hijk-nodll.zip 85K

Introduction   

Hijk is an acronym for HTML + iBoxDB + jQuery kit. It's a tiny kit, help you easily make a Prototype of Rich UI. Zero configuration and compatible with any asp.net frameworks.  

Background     

When we are doing Object-Oriented Programming , a relationship dominates the mind is "Class-Instance",many years people tried to separate or improve this relationship, introduced CORBA , SOAP etc. Although we have many suppliers, less consumers, the most important client's platforms of web are browsers, these are lack of corresponding component. Fortunately, we have javascript, and we can make a bridge between C#-Class and JavaScript-Object. Usually, we want to share data, so we need a database running on server side.  At UI level, HTML designers are around the world, it is easy to learn and easy to use.    

Because this requirements mentioned above, if we have a kit that includes database engine and 'C#-javascript' binder that can easily manipulates HTML, it will be helpful, so I collected resources, added glue codes, and made a tiny kit.   

HelloWorld      

Let's straight to topic,  creating a javascript object from a C# class  

[Server Side] a HelloWorld class  

   public class HelloWorld
    {
        public static string Say()
        {
            return "Hello World" ;
        }
    } 

 [Client Side] initializing a javascript object by using new.aspx 

<script type="text/javascript" src="new.aspx?c=HelloWorld"></script> 

Using javascript object to call C# code. "_alertResult" and "_onerror" are callback functions 

HelloWorld.Say()(_alertResult,_onerror)    

Is that all? yes, let's see the result.

 

How about the configuration? this follow is all my setting  

<?xml version="1.0"?>
<configuration>
  <system.web>    
     <compilation debug="true"  targetFramework="4.0"/>
     <customErrors mode="Off"/>
  </system.web>
</configuration> 

Model 

 

 

More Methods  

At the above, it called a parameterless method, of course you can pass arguments 

 [Server Side]  

  public  static string HappyBirthday( string name , long age)
        {
            return "HappyBirthday " + name + " " + age;
        }

 [Client Side] 

HelloWorld.HappyBirthday('Andy', 99)(_alertResult,_onerror ) 

 Someone maybe like object-oriented style, it takes more codes, but will get benefits at the following section.

 [Server Side] 

        public class UserRequest
        {
            public string Name { get; set; }
            public long Age;
 
            public string Name2;
            public long Age2 { get; set; }
        }
        public class UserResponse
        {
            public string Message;
            public long TotalAge { get; set; }
        }
        public static UserResponse HappyBirthday2( UserRequest user )
        {
            return new UserResponse
            {
                Message = "HappyBirthday2 " + user.Name + " " + user.Age + " and " + user.Name2 + " " + user.Age2,
                TotalAge = user.Age + user.Age2
            };
        } 

  [Client Side] 

HelloWorld.HappyBirthday2( {Name:'N1',Age:12,Name2:'N2',Age2:21} )(_callback2,_onerror);
      function _callback2(r) { 
          var o = $.parseJSON(r);
          alert( o.Message + ' \r\n TotalAge is ' + o.TotalAge);
      } 

 

Open Postcard System 

Sharing data is important for a website. This section we will implement a prototype of postcard system, you may have seem many postcard applications, but this has a slimsy difference, it is OpenSystem. If you want to send a pastcard to Andy, just do it,  anyone is named "Andy" can read this card. It maybe can help people make friends.  

On Website, registered users are growing everyday, but server resources are limited. Just loading data when we needed that is more efficiency.  A simple way to do that is each user has their own database, just open database when user logined.  if you're using a out-process database server, this job will cost a lot of work, instead, using embedded database server to do that as easy as "new something()". Embedded server will take care of database creation when the database is required. 

 [Server Side] creating same DatabaseConfig for each database  

 public partial class EmbeddedServer : LocalDataBaseServer{}
 public partial class EmbeddedServer 
 {
        protected override DataBaseConfig BuildDataBaseConfig(string name)
        {
            return new Postcard.DBConfig( name );   
        }            
 } 
 internal class DBConfig : BoxFileStreamConfig
 {
     public DBConfig(string name)
     {
         this.EnsureTable<Card>("Card", "ID");
     }
 }  

 [Server Side]  Postcard Services, you can read this code without interpretation 

    public class Postcard
    {      
        public static List<Card> Search( string toDatabase ,string text)
        {
            if (toDatabase == null || toDatabase.Length < 1)
            {
                return new List<Card>();
            }
            using (var box = WebApp.GetDatabase(toDatabase).Cube())
            {
                var table = box.Select<Card>("from Card", null);
                if (text == null || text.Length < 1)
                {
                    return new List<Card>(table);
                }
                else
                {
                    var r = from o in table
                            where o.Text.Contains(text)
                            select o;
                    return new List<Card>(r);
                }
            }
        }
        public static int InsertCard( Card card )
        {
            if (card.Text == null || card.To == null || card.From == null)
            {
                return -1;
            }
            if (card.Text.Length < 1 || card.To.Length < 1 || card.From.Length < 1)
            {
                return -1;
            }
            using (var box = WebApp.GetDatabase(card.To).Cube())
            {
                card.ID = box.NewIntId(0, 1);
                box.Insert("Card", card);
                if (box.Commit() == CommitResult.OK)
                {
                    return card.ID;
                }
                else
                {
                    return -1;
                }
            } 
        } 
 } 


[Client Side] Send & Search 

<script type="text/javascript" src="new.aspx?c=Postcard"></script>
<script type="text/javascript"> 
    function InsertCard() { 
        Postcard.InsertCard(  { TO: $("#to").val(), From: $("#from").val(), Text: $("#text").val() }   )
        (
          function (r) {
              $("#result").html('ID ' + r);
          },
          _onerror
        );
    }
      function Search() {
          Postcard.Search($("#to").val(), $("#text").val())
          (
             function (r) {
                 $("#result").html("");
                 var div = $("#result")[0];
                 var list = $.parseJSON(r);
                 for (var i = 0; i < list.length; i++) {
                     var o = list[i];
                     var p = document.createElement('p');
                     $(p).html( o.ID + ' To:' + o.To + '  ' + o.Text + '  From:' + o.From);
                     div.appendChild(p);
                 }
             },
             _onerror
          );
      }
</script> 

 It is done, a RichUI application with efficient resource utilization.    

Points of Interest      

You've seen a lot of  usages,  this project is readable and tiny, you can easily add your own functionality. For example, server side returns javascript codes, client side evals it.  

References     

HTML  iBoxDB  jQuery  kit

History   

V 1.0 (Current)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Bruce Yang cp
Systems Engineer
China China
Mixing technologies for fun.

Comments and Discussions

 
QuestionThanks! PinmemberAndy Bantly21-Feb-13 4:34 
Being named Andy, I thank you for your remarks about anyone named "Andy". Therefore, out of pure narcissism I am voting it 5.
AnswerRe: Thanks! PinmemberBruce-CP21-Feb-13 5:49 
QuestioniBoxD.csproj file? PinmemberMember 45586620-Feb-13 10:31 
AnswerRe: iBoxD.csproj file? PinmemberBruce-CP20-Feb-13 16:45 
GeneralRe: iBoxD.csproj file? PinmemberMember 45586621-Feb-13 6:33 
GeneralRe: iBoxD.csproj file? PinmemberBruce-CP21-Feb-13 7:22 
GeneralRe: iBoxD.csproj file? PinmemberMember 45586624-Feb-13 10:20 
GeneralRe: iBoxD.csproj file? PinmemberBruce-CP24-Feb-13 21:00 
GeneralRe: iBoxD.csproj file? PinmemberMember 45586627-Feb-13 6:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140421.2 | Last Updated 20 Feb 2013
Article Copyright 2013 by Bruce Yang cp
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid