Thanks to Darin Dimitrov (MVP)  for answering questions in very details!

Test Project Download ~

• git clone: git@github.com:michaelsync/Michael-Sync-s-blog-sample.git
• AjaxJsonTest

Scenario

I have the following model, view and controller.

Model

public class Person {
 public string Name;// { get; set; }
 public string Occupation { get; set; }
 public int Salary { get; set; }
 public int[] NumArr { get; set; }
}

View

<input id="Test" type="button" value="Test" />

@section Javascript{
<script type="text/javascript">// <![CDATA[
 $(function () {
 $("#Test").click(function () {
 var data = { Name: "Michael Tom", Occupation: "Programmer", Salary: 8500, NumArr: [2,6,4,9] };
 var url = "Home/GetJson";
 $.ajax({
 url: url,
 dataType: "json",
 type: "POST",
 data: data,
 traditional: true,
 success: function (result) {

}
 });

});
 });
// ]]></script>
}

Controller

public class HomeController : Controller
 {
 public ActionResult Index()
 {
 return View();
 }

public JsonResult GetJson(Person person) {

return Json(......);
 }
 }

Questions

1) Why can’t we use the public field instead of properties in Model? 

Because the model binder works only with properties. It is by design. Normally fields should be private in your classes. They are implementation detail. Use properties to expose some behavior to the outer world.

2) If I changed the type of NumArr property to List<int> then it doesn’t work. How can we use List instead of the int[]? I know I’m passing the array from JS. Can we pass List<T> from JS as well?

It should work. No matter whether you use List<int>, IEnumerable<int> or int[], it’s the same and it works. What wouldn’t work is if you wanted to use a collection of some complex object like for example List<SomeComplexType> (see my answer below for a solution to this).

3) I’m using “traditional: true” in Javascript code block of View because serialization doesn’t work with “traditional: false”. Does ASP.NET MVC’s serializer support only old version?

Yes, the traditional parameter was introduced in jQuery 1.4 when they changed the way jQuery serializes parameters. The change happened to be non-compatible with the standard convention that the model binder uses in MVC when binding to lists.

So download a javascript debugging tool such as FireBug and start playing. You will see the differences in the way jQuery sends the request when you set this parameter.

All this being said I would recommend you to send JSON encoded requests to your controller actions. This will work with any complex objects and you don’t have to ask yourself which version of jQuery you are using or whatever because JSON is a standard interoperable format. The advantage of a standard interoperable format is that no matter which system you use, you should be able to make them talk the same language (unless of course there are bugs in those systems and they do not respect the defined standard).

But now you could tell me that application/x-www-form-urlencoded is also a standard and inetroperable format. And that’s true. The problem is that the model binder uses a convention when binding the name of the input fields into properties of your models. And this convention is far from something being interoperable or industry standard.

So for example you could have an hierarchy of models:

public class Person
{
 public string Name { get; set; }
 public string Occupation { get; set; }
 public int Salary { get; set; }
 public List SubObjects { get; set; }
}

public class SubObject
{
 public int Id { get; set; }
 public string Name { get; set; }
}

You could imagine any complex hierarchy you like (at the exception of circular references which are not supported by the JSON format). and then:

var data = {
 name: "Michael Tom",
 occupation: "Programmer",
 salary: 8500,
 subObjects: [
 { id: 1, name: 'sub 1' },
 { id: 2, name: 'sub 2' },
 { id: 3, name: 'sub 3' }
 ]
};

$.ajax({
 url: "Home/GetJson",
 type: "POST",
 data: JSON.stringify({ person: data }),
 contentType: 'application/json',
 success: function (result) {

}
});

We set the Content-Type request HTTP header to application/json to indicate the built-in JSON value provider factory that the request is JSON encoded (using the JSON.stringify method) and it will parse it back to your strongly typed model. The JSON.stringify method is natively built into modern browsers but if you wanted to support legacy browsers you could include the json2.js script to your page.

Reference:

• MVC 3 – JSON serializer

Paul Betts has diagnosed this as having some auto-generated files which are currently UTF16, which Git does not support. I’m working to figure out exactly how widespread the problem is.

Seems like codeplex is having the encoding problem with UTF16 file on git repository.

Update #2: Brad Wilson said that he has fixed that file. I re-pulled the repo again and tested it.. It works!

Introduction

Scott Guthrie announced that Microsoft is releasing the source code of ASP.NET Web API and ASP.NET Web Pages (aka Razor) under an open source license (Apache 2.0). They will be accepting the contributions from community as well. What a great news for us! I’m really happy to see more open source projects coming out from Microsoft.

Even though I’m currently occupied with my school, work and etc, I tried downloading the source code from codeplex and building it with a lot and lot of love. (If you don’t know how to install git on your machine, please follow this post “Set Up Git” from github. )

• Git: git clone https://git01.codeplex.com/aspnetwebstack.git

I got the following folders once I cloned the git repository.

The first thing that I need to do is to restore the nuget packages. Microsoft put the nuget configuration file only instead of  all those third-party assemblies that are required to build the source code. This can be achieved by running “build RestorePackages” from the root of the repository that I just cloned.

You can enable the nuget restore permanently by adding this system variable in your environment.

Otherwise, you will get this error.

Error 1 NuGet package restore is not currently enabled. For more information, please see: http://aspnetwebstack.codeplex.com/wikipage?title=NuGet+Packages System.Web.Razor

According to the official document, we need to download “SkipStorngNames” and run “skipstrongnames -e” with admin right in command prompt but I didn’t do it on one of my machines and I can still build the whole code (including test) from VS10. I’m still pretty new to the code base so I will download and run it when I need.

Errors and Warning

When I tried building the solution, I got this error below.

WebGrid\_WebGridRenderer.generated.cs(1,1): error CS0116: A namespace cannot directly contain members such as fields or methods [C:\aspnetwebstack\src\System.Web.Helpers\System.Web.Helpers.csproj]

I thought that the auto-generated code got screwed up so I deleted everything from that file and tried saving the _WebGridRenderer.cshtml again. Nothing was generated and found two warnings below.

Warning 8 C:\Michael Sync\++ Project\aspnetwebstack\aspnetwebstack\src\System.Web.Helpers\WebGrid\_WebGridRenderer.cshtml: ASP.NET runtime error: There is no build provider registered for the extension ‘.cshtml’. You can register one in the <compilation><buildProviders> section in machine.config or web.config. Make sure is has a BuildProviderAppliesToAttribute attribute which includes the value ‘Web’ or ‘All’. C:\Michael Sync\++ Project\aspnetwebstack\aspnetwebstack\src\System.Web.Helpers\WebGrid\_WebGridRenderer.cshtml 1 1 System.Web.Helpers

Warning 1 Cannot find custom tool ‘RazorHelperGenerator’ on this system. C:\Michael Sync\++ Project\aspnetwebstack\aspnetwebstack\src\System.Web.Helpers\WebGrid\_WebGridRenderer.cshtml System.Web.Helpers

(Temp?) Solution

Ok! There are a lot of doubts and questions but I will share the way that I fixed in order to build the solution without any error.

The main problem that we can’t build is that _WebGridRenderer.generated.cs file has weird non-English characters but when you look at that file in browser, you can see the English version.

The picture below shows the differences between the file that I have and the file on server.

So, I manually copied it from browser (downloading the code as zip file doesn’t work either) and override everything in _WebGridRenderer.generated.cs. After that, it works.

If you are desperately willing to build the code right now, you can follow what I did. I will keep you updated once I found something useful.

Conclusion

You are no longer need to use the temp solution that I mentioned above.. The coordinator from project has fixed the issue and you should be able to re-pull the repository and can build the project already.

Thanks!

We decided to give a try with HTML 5 + Phonegap for Windows Phone development. The first thing that we do is to create a pivot control based on that demo’s code. Of course, we can invest time to create an awesome pivot control that works on all browsers but this wasn’t our goal. We just want it fast! As I mentioned, the demo’s CSS is based on webkit so it doesn’t work on IE. IE10 supports some CSS3 with Microsoft specific tag “-ms” (just like -webkit for web kit engine, -moz for Mozilla ) but again, Windows Phone (mango) has IE Mobile version with IE9 engine (not IE 10). Then, we tried using “Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library” with Phonegap. After spending a few days, we realized that it’s not worth to make HTML 5 and CSS 3 works on IE9. We decided that we will be using Silverlight until Windows phone supports IE 10.

Does anyone use Phonegap for Windows Phone app development? How was your experience?

Introduction

One of my guys was using this following code to export the excel file from ASP.NET application. The code is very simple. He created the datatable with the data that he wants to export from database. He bind that datatable with datagrid, write the HTML code to HtmlTextWriter and write those HTML code to the response with “application/vnd.ms-excel” content type.

Download

• git : https://github.com/michaelsync/Michael-Sync-s-blog-sample
• zip : Excel-Export-DateTime.zip (8KB)

protected void Button1_Click(object sender, EventArgs e) {
            var datatable = CreateDataTableWithData();

            System.IO.StringWriter stringWriter = GetHtmlTagsfromDatagrid(datatable);

            WriteResponse(stringWriter);
        }

        private void WriteResponse(System.IO.StringWriter stringWriter) {
            Response.Clear();
            Response.Charset = "UTF-8";
            Response.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8");
            Response.ContentType = "application/vnd.ms-excel";
            Response.ContentEncoding = System.Text.Encoding.Unicode;
            Response.BinaryWrite(System.Text.Encoding.Unicode.GetPreamble());
            Response.AppendHeader("Content-Disposition", "attachment;filename=myexcel.xls");
            Response.Write(stringWriter.ToString());
            Response.End();
        }

        private static System.IO.StringWriter GetHtmlTagsfromDatagrid(DataTable datatable) {
            System.IO.StringWriter stringWriter = new System.IO.StringWriter();
            HtmlTextWriter htmlWrite = new HtmlTextWriter(stringWriter);
            DataGrid dg = new DataGrid();
            dg.DataSource = datatable;
            dg.DataBind();
            dg.RenderControl(htmlWrite);
            return stringWriter;
        }

        private static DataTable CreateDataTableWithData() {
            var datatable = CreateDataTable();

            datatable.Rows.Add(CreateDataRow(datatable, 1, "Michael Sync",
                "8/31/1982 3:19:40 PM"));
            datatable.Rows.Add(CreateDataRow(datatable, 1, "Shwesin Sync",
                "9/29/1982 3:00:32 PM"));
            datatable.Rows.Add(CreateDataRow(datatable, 1, "Elena Sync",
                "1/15/2011 00:00:01 PM"));
            datatable.Rows.Add(CreateDataRow(datatable, 1, "Tiffany Sync",
                "7/6/2012 00:00:01 PM"));

            datatable.AcceptChanges();
            return datatable;
        }

        private static DataTable CreateDataTable() {
            var datatable = new DataTable();
            datatable.Columns.Add("Id");
            datatable.Columns.Add("Name");
            datatable.Columns.Add("Date of Birth");
            return datatable;
        }

        private static DataRow CreateDataRow(DataTable datatable, int id, string name, string dob) {
            DataRow dr = datatable.NewRow();
            dr[0] = id;
            dr[1] = name;
            //dr[2] = string.Format("{0:yyyy-MM-dd HH:mm:ss}", dob); //Right code
            dr[2] = dob; // Wrong code

            return dr;
        }

Problem

We are able to view the exported file in excel but the problem is that the date formats are not consistent for all rows. Take a look at Elena’s b’day and Tifa’s b’day in this screenshot below. The date formats are different, right?

Why?

This problem occurred because Excel is using the formats from regional setting. The format of short date in my system is M/d/yyyy and the long date format is dddd/MMMM dd,yyyy. All data that follows those date format will be treated as a date in excel. Otherwise, it will be treated as a string. If you look at my b’day “8/31/1982 3:19:40 PM”, it doesn’t follow dddd/MMMM dd,yyyy format so excel treat it as a string.

Solution

There are more than one solution for this problem. You can specify “vnd.ms-excel.numberformat:dd/mm/yy” style to that cell. but the easiest fix that we came up is to set the date format as below while populating the data.

dr[2] = string.Format("{0:yyyy-MM-dd HH:mm:ss}", dob); //Right code

Conclusion

It’s just a simple issue and simple solution but we did face this issue so I’m sharing it here. Hopefully, developers who are facing the same problem might find this post useful. :)

Happy Silverlighting! Oh no! Happy sharing!!

Related ~

• Styling Excel cells with mso-number-format
• HTML to Excel conversion

What do you think? :)

P.S. As I mentioned in my previous post, it’s always better to get a designer to do the UI design but when you have nothing better to do during holiday, you can still create some prototypes and let designers to publish it later.

The moral of the story is that it’s just a waste of time if you ask developers to take care the UI design of your application. Sometimes, it’s more expensive to get the crappy design from developers than outsourcing the UI to designers.. It’s surprised to see that some developers are being asked to handle the UI part in some companies around my area. This is the reason why some products in our area got crappy design and bad usability.

But still, I still have one application that I designed when I was bored. It will be my next application. I will show you some screenshot in next post. I have developed “Metro Pomodoro” app and submitted to Marketplace. I will let you know once it’s published.

My initial design

Final design from designer

• Title: How to develop and deploy Silverlight using WCF RIA services on Windows Azure
• Synopsis: Windows Azure is a cloud based service which supports Silverlight WCF RIA services. This topic discuss about how to develop a simple application using WCF RIA service. Later the application will be deployed to the Windows Azure for accessing it over internet. We also discuss on basic featured of Azure services.
• Speaker: Senthamil Selvan
• Date and Time: 12th January, 2012 ( 7:30 PM to 9:30 PM )
• Location: Microsoft Singapore, Conf Room SINOMB 22CF-12 (60) VTC
• Admission: Free

All credits go to the original designers and people from Touchality and 99designs.

Update:

Patrick Yong shared a working copy of wordpress theme in his blog. You can download it from this link if you like the screenshot below.

Jeff Sanders (MSFT) replied ~

You are not missing anything. In the Preview, it only supports jscript/html5. If you create a new C# application in Visual Studio Express 2011 you will get a XAML editor. You can still edit XAML in Version 4 if you want to install that for now.

What is Implicit Data Template?

Implicit data template is something similar to “Implicit style” that was introduced in Silverlight 4. When you define a data template in <*.Resources> or resource dictionary, you used to define the key over there and reference it from the place where you want to use that data template. With implicit data template, you don’t need to define any key for your data template. There is a new property called “DataType” where you can define the type of data (Model) in data template that you want to use.

The code will be something like that below ~

<DataTemplate DataType="local:MyAwesomeModel">
....
</DataTemplate>

In this example, our model is called “MyAwesomeModel” and we set it to the “DataType” property of data template. Of course, you can create any template you want inside that data template as usual. After that, you can directly bind this model with UI (e.g. ContentControl or ItemControl ). The template that you created will be displayed on the UI when you run the project. How simple it is?

In order to show this feature, I created one demo with metro design in my mind (even thought I’m not professional designer. )

Download :  ImplicitDataTemplatesDemo from github

What I did in this sample is pretty simple. I created an interface called “IPerson” which has three properties such as Name, Description, ProfilePhoto. And, I created three models (MichaelSync, ElenaSync and ShwesinSync) that implement “IPerson” interface. Note that I didn’t implement INotifyPropertyChanged or the setter in any of the classes but you may want to implement them in real project.

public interface IPerson {
 string Name { get; }
 string Description { get; }
 BitmapImage ProfilePhoto { get; }
}

In MainPage, I set the DataContext in order to make the bindng work. Yap! I have to set it before initializing the components. I added new property called “People” and filled it up with the instances of models.

public partial class MainPage : UserControl
{
 public MainPage()
 {
 this.DataContext = this;
 // Required to initialize variables
 InitializeComponent();

People = new List{
new MichaelSync(),
new ElenaSync(),
new ShwesinSync(),
 };
 }

public IList People { get; set; }
}

There is only one ItemControl that bind to “People” property.

<Grid Width="640" HorizontalAlignment="Left">
 <ItemsControl ItemsSource="{Binding People}" Margin="41,84,41,0"/>
</Grid>

I created three data templates with different data type as below.

When you run it, you will see beautiful metro style application with my family photos. I’m just trying to show you one scenario that you can use but if you really want to use MVVM with implicit data template, I would recommend you to read Julian’s post.

Pros and Cons of using Implicit DataTemplate in MVVM

I would say that Julian’s approach is kinda extreme MVVM approach because it limited you from having any code behind code in View but it does help you more code cleaner (Oh no! I’m not counting code. )  and force developers to use MVVM in proper way (like creating blend bahivors or attached properties or etc). Another good thing is that you can directly bind your model with UI without explicitly calling the views.

Good

• Cleaner and encourage the proper way of doing things
• Easier binding

Bad

• sometimes, it makes developers’ life damn difficult.

That’s all from my side.

Happy Silverlighting!