Hijk Project -tiny WebAPI kit

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)