Client-Side Template in ASP.Net (Web Form / MVC) With Mustache.js

Let’s run the application and you will get the same result as in Figure 1.1.

The code above returns only the two person's details that have the property Registered as true. You add your condition to the template without if and else; that is why it’s called “Logic-Less”.

Mustache.js with ASP.NET MVC

In the previous article “Rendering a Partial View and JSON Data Using AJAX in ASP.Net MVC” I introduced you to the concept of rendering JSON data in ASP.NET MVC where I used the string concatenation approach but this section of article will introduce you to how to use a Mustache client template in an ASP.NET MVC application instead of string concatenation. I will explain this concept with a simple example. The example is that books are showing in a web depending on publisher. I choose a publisher from a dropdown list then the books information is shown in the web page depending on publisher. So let’s see this example in detail.

Getting Started

I add the ADO.NET Entity Model to the application to do the database operations mapped from the “Development” database. The ADO.NET Entity Model is an Object Relational Mapping (ORM) that creates a higher abstract object model over ADO.NET components. This ADO.NET Entity Model is mapped to with “Development” database so the context class is “DevelopmentEntities” that inherits the DbContext class.

This “Development” database has two tables, one is the Publisher table and the other is the BOOK table. Tables have 1-to-many relationships, in other words one publisher can publish multiple books but each book is associated with one publisher. If you want to learn more about this application database design then please check my previous article “An MVC Application with LINQ to SQL”.

The ADO.NET Entity Model is mapped to both tables. The connection string for this has the same name as the context class name and this connection string is created in the web.config file. You can change the name of the connection string. The context class name and connection string name is just a convention, not a configuration, so you can change it with a meaningful name. The following Figure 1.2 shows the ADO.NET Entity Model mapping with both tables.



Figure 1.2 The ADO.NET Entity Model mapping with Publisher and Book tables

Now the ADO.NET Entity Model is ready for the application and it's time to move on the next step of the application, the model design so let’s see the application’s model.

Model Design

Now the models are ready for use so now to move on to the controller.

Controller Design

I create two controllers, one for the publisher that shows a publisher’s list in a dropdown list and another is a book controller that shows book details depending on publisher. The publisher controller defines a single action method that is the same in both concepts; rendering a partial view and JSON data and the book controller also defines an action methods, that rendering JSON data.

Now create book a controller (BookController.cs) under the Controllers folder of the application. ASP.NET MVC offers native JSON support in the form of the JsonResult action result, that accepts a model object that it serialized into the JSON format. In order to add AJAX support to your controller actions via JSON, simply use the Controller.Json() method to create a new JsonResult containing the object to be serialized.

Let’s run the application. You will get results as in Figure 1.3.



Figure 1.3 Books detail of a publisher

Conclusion

While the client template approach may seem like a lot of work, in most cases the ease of maintenance and the lower bandwidth costs that it allows make it well worth the up-front cost. When your application relies on many AJAX interactions that results in complex client-side markup, a client template is often a great choice.