Console application-Using Razor Engine to fill template

Now a days we all are hearing about Razor Engine in MVC ,People are using the Razor syntax to build there Web Application.

We are going to use a template engine built upon Microsoft's Razor parsing technology.you can download it form  http://razorengine.codeplex.com/#

Here we will see how we can fill the predefined template values,using the model .

One scenario where it is useful is say you have a multiple template that needs to be filled on the basis of the model supplied and then we need to send a email.

Lets see how to use the Razor Engine to fill the given template that will be displayed on the Window.Here i am using the console application.

Create the following model

 namespace RazorEngine_Implementation  
 {  
   public class Employee  
   {  
     public int Id { get; set; }  
     public string Name { get; set; }  
     public string Address1 { get; set; }  
     public string Address2 { get; set; }  
     public int PinCode { get; set; }  
     public int Mobile { get; set; }  
   }  
 }  

Now will Create Couple of Interfaces and Classes to Render The Initialization of Template and Initialization of model

 namespace RazorEngine_Implementation  
 {  
   public interface ITemplate  
   {  
     string GetTemplate(TemplateType template);  
   }  
 }  

 namespace RazorEngine_Implementation  
 {  
   internal interface IRendorTemplate  
   {  
     /// <summary>  
     /// Employee template  
     /// </summary>  
     /// <returns></returns>  
     string CreateTemplate(TemplateType type);  
   }  
 }  

 namespace RazorEngine_Implementation  
 {  
   public class Template : ITemplate  
   {  
     public string GetTemplate(TemplateType template)  
     {  
       switch (template)  
       {  
         case TemplateType.Employee:  
           {  
             return "Employee Details Id=@Model.Id,Name=@Model.Name,Address1=@Model.Address1," +  
                 "Address2=@Model.Address2,Pin=@Model.PinCode,Mobile=@Model.Mobile";  
           }  
       }  
       return string.Empty;  
     }  
   }  
 }  

 namespace RazorEngine_Implementation  
 {  
   public enum TemplateType  
   {  
     Employee  
   }  
 }  

 namespace RazorEngine_Implementation  
 {  
   public class RendorEmployeeTemplate : IRendorTemplate  
   {  
     public string Template { get; set; }  
     public Employee Employee { get; set; }  
     public RendorEmployeeTemplate()  
     {  
       Template = CreateTemplate(TemplateType.Employee);  
     }  
     public string CreateTemplate(TemplateType type)  
     {  
       Employee= InitializeEmployee();  
       var template = new Template();  
       return template.GetTemplate(type);  
     }  
     public Employee InitializeEmployee()  
     {  
       return new Employee()  
               {  
                 Id = 1,  
                 Name = "David",  
                 Address1 = "North Hill",  
                 Address2 = "DC",  
                 Mobile = 7651132,  
                 PinCode = 87658  
               };  
     }  
   }  
 }  

Next we will Create a Console application and in the Main() will will put the following code and we will add the Reference of the RazorEngine and if you have created the Separate DLL for the above code add its reference.

  var template = new RendorEmployeeTemplate();  
       Console.WriteLine(Razor.Parse(template.Template, template.Employee));  
       Console.ReadLine();  

In the above code we you can see Razor.Parse(Template,Model). this is the function that has been exposed by razor DLL.

Happy Coding

MVC -SelectedList

Today we will see a small example of how to use SelectedList. It comes under the namespace System.Web.Mvc.

This list basically helps you to represent a list that let user to select item.

To start with we will create a Model say SelectListExampleModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace SubmitTest.Models
{
    public class SelectListExampleModel
    {
        public SelectListExampleModel()
        {
            if (Items == null)
            {
                Items = new List<Item>();
            }
        }
        public SelectList ItemList { get; set; }
        public List<Item> Items { get; set; }
        public int ItemList1 { get; set; }
    }
    public class Item
    {
        public int ItemId { get; set; }
        public string ItemName { get; set; }
    }
}

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SubmitTest.Models;

namespace SubmitTest.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            //Lets create a list of items here
            

            var selectedList = new SelectListExampleModel();
            Item item = new Item();
            item.ItemId = 1;
            item.ItemName = "Bread";
            selectedList.Items.Add(item);
            Item item1 = new Item();
            item1.ItemId = 2;
            item1.ItemName = "Butter";
            selectedList.Items.Add(item1);
            selectedList.ItemList = new SelectList(selectedList.Items, "ItemId", "ItemName");

            return View(selectedList);
        }
        [HttpPost]
        public ActionResult Index(SelectListExampleModel model)
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

          

           var selected= model.ItemList1.ToString();


           return View(model);
        }

        public ActionResult About()
        {
            return View();
        }
    }
}

Lets have a view Named Index.cshtml

@model SubmitTest.Models.SelectListExampleModel

@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
 @using (Html.BeginForm())
 {
     @Html.DropDownList("ItemList1", Model.ItemList, "- Please Select -")
     <input type="submit" value="Get Selected Value" />
     
 }
  

Happy Coding :)

IE Issue -HTML 5 Button with Jquery submit() event

If you are using the HTML 5 button tag and inside it you are calling submit() that is of Jquery, In IE browser you will notice that the event gets trigger 2 times.This seems to be issue with  browser.It works well on Firefox,chrome.

Basically do not use the following syntax inside the form tag  if you are  supporting the IE else you will have to do some trick to avoid first or second call.

@using (Html.BeginForm()){

<button onclick="submit()">"Create"</button>

}

Happy Coding :)

Difference Between Firebug and Fiddler

In this Article we will some differences between Firebug and Fiddler

Fiddler and Firebug are two different tools that we use to solve two different problems.

Firebug 

Firebug is primarily used to Inspect / Tweak the DOM, script debugging, and basic network information. It primarily deals with things inside the browser.

Some things you would use Firebug for is tweaking CSS styles, trying to figure out where some style is coming from, etc. It can also be used for breakpoints in JavaScript, and basic request / response information such as content, headers, timing, etc.

Fiddler

Fiddler goes much further underneath of it. Fiddler is useful for inspecting network / protocol level information that the browser is doing, as well has a lot of analysis helpers.We typically use this when We are trying to diagnose compression issues, see network traffic, very fine grained details for timing, or making your own requests to the server, which we do when we are tinkering with SOAP / Web Services.

MVC3- PartialViewResult as a Modal Dialog

Today we will see how we can display partial view result as a modal dialog

The partial view

 @model ReloadPartial.Models._UserModel  

 @using (Html.BeginForm("Validation","Home", FormMethod.Post, new { id = "UsrValidation" }))  

 {  

   <h3>  

     @Html.ValidationSummary()  

   </h3>  

   @Html.Raw("User Name:")  

   @Html.TextBoxFor(m => m.UserName)  

   <br />  

   @Html.Raw("Email:")  

   @Html.TextBoxFor(m => m.Email)  

   <br />  

   <input type="button" value="!!Action!!" onclick="SubmitForm();" />  

 }  

Now lets see the controller  implementation

 public PartialViewResult Validation(_UserModel model)  
     {  
       ModelState.Clear(); //important to see changes in UI  
       if (ModelState.IsValid)  
       {  
         //Can perform any action 
       }  
       return PartialView("_User",model);  
     }  

JavaScript

 <script language="javascript" type="text/javascript">  
   function SubmitForm() {  
     //select and serialize our small form  
     var frm = $("#UsrData").serialize();  
     // get form action  
     var action = $("#UsrData").attr("action");  
     $.ajax({  
       url: action, // or '@(Url.Action("Validation"))',  
       cache: false,  
       async: true,  
       type: "POST",  
       data: frm, //data to post to server  
       error: function (html) { alert(html); }, //something goes wrong...  
       success: function (data) {  
         showDialog(data);  
       }  
     });  
   }  
 function showDialog(data) {  
    $("#UsrData").html(data);  
   $("#UsrData").dialog({  
     modal: true,  
     title: "Details",  
     resizable: false,  
     open: true,  
     height: 150,  
     width: 200,  
     position: 'center',  
     buttons: [{ text: "Ok", click: function () {  
       $(this).dialog("close");  
       $(this).html('');  
     }  
     }]  
   });  
 }  
 </script  

Event Aggregation In Javascript

The Event Aggregator service is primarily a container for events that allow decoupling of publishers and subscribers so they can evolve independently. This decoupling is useful in modularized applications because new modules can be added that respond to events defined by the shell or, more likely, other modules.



Lets see the example of using Event Aggregation pattern in java script.

Suppose we have two different JavaScript pages attach with different Views/HTML page and we want to notify one if a particular event has occurred so thet on the basis of the event it can perform some action.

Here we will first create a common .js file which will have a event argument and events defined.

 var Events = {  
   OnAdded: "OnAdded",  
   OnClicked: "OnClicked",  
   OnUpdated: "OnUpdated"  
 };  
 var EventArgunments = {  
   Selectedvalue: ""  
 };  

Now on the page where we want to publish or want to subscribe the events we need to cal in the following way

 To publish event the syntax is   
  $(document).trigger(window.Events.OnClicked, window.EventArgunments);  

To Subscribe event syntax is

 To Subscribe event the syntax is   
  $(document).bind(window.Events.OnClicked, function (e, eventArgunments)  
  {  
      //code Logic goes here  
 }  

Happy Coding :)

Microsoft finally shuts Hotmail, introduces outlook.com

Microsoft moves from Hotmail to outlook.com. We have all the features integrated in this.
 Preview below.