yysun's space

Sync Data between C#, JavaScript and HTML

Posted on: July 27, 2011

Recently I have made some improvements to the Rabbit Framework. I figured out how to inject a base class between WebPage and the Razor page, so that to create a Web Form or a MVC controller is just to inherit from the base classes.

@inherits Rabbit.WebForm
@functions {
         void button_click(string name)
         {
         }
}

Or

@inherits Rabbit.MvcController
@functions {  
    [Get("/")]
    void Index() {
}

Another interesting thing I did is to sync data between C#, JavaScript and HTML inputs.

1. C# fields (both public and non-public) are populated with HTML inputs.

<input type=”text” name=”txtEmail” value=”@txtEmail”/>

@functions {
    string Email = “”; // it will have the value user typed after post.
}

This is similar to the model binding concept found in ASP.NET MVC. The difference is here we bind to fields, where ASP.NET MVC binds to action parameters (actually, we do that too).

2. C# public fields are synced with JavaScript through a JavaScript object, called webForm.

@functions {
      public int count = 20;
}

<script>
alert(webForm.count); // it shows 20
<script>

And vice versa, if changed the value in JavaScript, the C# field has the new value after post.

The C# data are serialized into JSON. On the client side, it can be rendered into HTML using jQuery template or jsrender.

It also could be a solution to view state to some degree I think.

Download the sample site to see how it works.

Advertisements

1 Response to "Sync Data between C#, JavaScript and HTML"

awesome framework! thank you for your work!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


  • None
  • Pk: The horizontal view is a pleasure to use! Good thinking
  • randyburden: A valiant and commendable effort. Your use of Tuple is a little weird but it offers a feature that most other microORMs don't. Your use of a static Gu
  • reav: great work done on Rabbit Framework. just started to learning it, and by now i think it will solve all my problems and questions, that i had in webpag

Categories

%d bloggers like this: