What is a .Net RIA Service

It is set of libraries and tools given, to help develop the Rich internet application in much easier fashion. When we develop silverlight application we need to interact with the server for various reasons. Now .Net RIA Service will make that much easier and better.

In our normal silverlight application we used to interact with the server from the client code to move data in async fashion and managing it. But now .NET RIA Service will just hide it all from you and handles all those stuff. You can concentrate more on what to do with data rather than how to get the data.

It is link between the presentation layer and business logic layer. You can add various kind of validation also to be performed.

you can download these services from here

Now i am developing sample application of RIA Service with silverlight and will post it with complete working details of .net RIA Service

Hi all i am back now. Sorry for so much of delay But in these days i went through various new technologies. Now i will posting on that. First i will post on .NET RIA Service and further on WCF. If anything specific leave a comment for me.

Hi everybody. Thanks for visiting the blog. I am busy with exams so i will not be able to post new articles for few days. But i will try to post various good and nice article listed as soon as possible.

I have a list of nice articles to be posted mainly on following

MVC, JQuery, RESTful Service, RIA Service, WebServices, And others

If you want me to post on some specific topics or issue please leave a comments.

Glimmer tool for creating interactive elements using JQuery

It is tool which helps to create interactive elements in the webpage. It is nice tool developed in WPF. You can insert various effects too

Check the following screen shots and visit the glimmer website and check the video. also you can download setup from here

Its a nice tool check at mix

Sample Screen shots of glimmer.

Image Sequence Wizard

A good Jquery plugin is available as Event Calendar which can be download from following location.

http://www.bytecyclist.com/projects/jmonthcalendar/
or
http://code.google.com/p/jmonthcalendar/

I used it in one sample project with MVC and loaded certain events from the controller. Which can in return load from the Model. But for the time being in this sample i returned from the controller it self.

public ActionResult Events(string date)
{
MyEvents event1 = new MyEvents            
{
EventID = 11 ,
StartDate = new DateTime(2009,04,01),
Title = "Meeting with Boss",
Description = "Meeting on product release",
CssClass = "Meeting",
URL= "/Home/EventDetails/11"            
};

MyEvents event2 = new MyEvents            
{
EventID = 12,
StartDate = new DateTime(2009, 04, 01),
Title = "Celebration",
Description = "Fathers birthday",
CssClass = "Birthday",
URL = "/Home/EventDetails/12"            
};

string[] stringlist = new string[2];
stringlist[0] = event1.GetJSONResult();
stringlist[1] = event2.GetJSONResult();

return Json(stringlist);
}

For calling the events it did getJson call from the index page where the jMonthCalendar is shown. It will call one of the function the Controller and in return will get the array of the events which will then be sent to the jMonthCalendar. It will load the events. We can add the URL also so that when user clicks the event he will get the complete detail once again with the help of the controller

<script type="text/javascript">
    $().ready(function() {
var options = {

height: 650,
width: 980,
navHeight: 25,
labelHeight: 25,

onMonthChanging: function(dateIn) {
$.getJSON("http://localhost:1511/Home/Events",
function(data) {

//Array of my events                    
var events = new Array();

//Loop and load all the events and load them into the array
                    $.each(data, function(i, item) {

var oResultData = eval('(' + item + ')');
var event = { "EventID": 5, "Date": oResultData.StartDate,
"Title": oResultData.Title, "URL": oResultData.URL,
"Description": oResultData.Description,
"CssClass": oResultData.CssClass
};

events.push(event);

});

//Load the events into the calendar
                    $.jMonthCalendar.ReplaceEventCollection(events);
$.jMonthCalendar.DrawCalendar(dateIn);
});
return true;
},
onEventBlockOver: function(event) {
return true;
},
onEventBlockOut: function(event) {
return true;
},
onDayLinkClick: function(date) {
return true;
},
onDayCellClick: function(date) {
return true;
}
};

var newevents = [];
$.jMonthCalendar.Initialize(options, newevents);
});</script>

Download the sample from following location

EventCalendar

Here are the screen shot of the application.

Event Calendar in MVC Application

Detail of selected Event

Here is a sample for handling upload of a file, In your MVC application. In this sample i used the Dialog box of JQuery, where user will select the file and will click upload

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">    

<h2>Files uploaded to server</h2>    

<div id="dialog" title="Upload files">        
    <% using (Html.BeginForm("Upload", "File", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {%><br />
        <p><input type="file" id="fileUpload" name="fileUpload" size="23"/> ;</p><br />
        <p><input type="submit" value="Upload file" /></p>        
    <% } %>    
</div>
<a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Upload File</a>
</asp:content>

Then we have to handle this request in the respective controller which is specified in BeginForm of our above code (FileContoller) and action name (Upload). Following will be our code in the FileController Controller for the Upload action

public void Upload()
{
foreach (string inputTagName in Request.Files)
{
HttpPostedFileBase file = Request.Files[inputTagName];
if (file.ContentLength > 0)
{
string filePath = Path.Combine(HttpContext.Server.MapPath("../Uploads")
, Path.GetFileName(file.FileName));
file.SaveAs(filePath);
}
}

RedirectToAction("Index", "File");
}

Download the sample code from here

File upload in MVC with JQuery Dialog

There was requirement to convert ILIST or LIST to DataSet so that it can be assigned to some of the controls like Grid or DevExpress Grid. For that i have written following class to convert from LIST or ILIST to DataSet

• Converts only ILIST and LIST
• Convert sub lists to another table which will be related to the parent list
• Creates Relation between tables
• Works only on the properties not on fields. You can easily modify it for that

using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Reflection;

namespace TowardsNext
{
public static class ListConvertor    
{
public static DataSet ConvertToDataSet<T>(IList list)
{
DataSet dataSet = new DataSet();

CreateDataSet(dataSet, typeof(T), false);
FillDataSet(typeof(T), list.ToList(), dataSet, -1);
CreateRelations(dataSet, typeof(T), null);

return dataSet;
}

/// 
/// Create the structure for all the tables in the data set        
/// 
/// Data set in which tables will be created
/// Type of which dataset has to be created
/// Whether current type is a child table        
private static void CreateDataSet(DataSet dataSet, Type type, bool isChildTable)
{
DataTable dataTable = new DataTable(type.Name);

//Create the ID columns for having relation in the tables 
            dataTable.Columns.Add(new DataColumn("ID", typeof(int)));
if (isChildTable)
{
dataTable.Columns.Add(new DataColumn("ParentID", typeof(int)));
}

// Create the structure for the data tables to be
// added in the the data set            
foreach (PropertyInfo pInfo in type.GetProperties())
{
if (pInfo.PropertyType.IsGenericType &&
(pInfo.PropertyType.GetGenericTypeDefinition() == typeof(List<>)
|| pInfo.PropertyType.GetGenericTypeDefinition() == typeof(IList<>)))
{
// If associate lists are there make then another table
                    CreateDataSet(dataSet,
pInfo.PropertyType.GetGenericArguments()[0],
true);
}
else                
{
dataTable.Columns.Add(new DataColumn(pInfo.Name, pInfo.PropertyType));
}
}

//Add the table to the dataset
            dataSet.Tables.Add(dataTable);
}

/// 
/// Fill all the tables of data set with data in the respective list        
/// 
/// Type of which datatable is to be filled
/// List of data
/// Data Set in which data tables will be filled with data
/// ID of parent record. If -1 one then no parent        
private static void FillDataSet(Type type, IList list, DataSet dataSet, int parentID)
{
PropertyInfo[] propertyInfos = type.GetProperties();
DataTable dataTable = dataSet.Tables[type.Name];
int id = dataTable.Rows.Count + 1;

foreach (object item in list)
{
DataRow row = dataTable.NewRow();

// Set new id and related parent id
                row["ID"] = id;
if (parentID != -1)
row["ParentID"] = parentID;

// Load all the data from the properties of the type
// and save them into the datatable                
foreach (PropertyInfo info in propertyInfos)
{
if (info.PropertyType.IsGenericType &&
(info.PropertyType.GetGenericTypeDefinition() == typeof(List<>)
|| info.PropertyType.GetGenericTypeDefinition() == typeof(IList<>)))
{
IList subList = (IList)info.GetValue(item, null);
if (subList != null && subList.Count > 0)
{
FillDataSet(subList[0].GetType(),
subList,
dataSet, id);
}
}
else                    
{
row[info.Name] = info.GetValue(item, null);
}
}

dataTable.Rows.Add(row);
id++;
}
}

/// 
/// Creates the relation between the tables according to the         
/// type and parent table on field ID and ParentID        
/// 
/// Data set containing parent and child table
/// Type of the list
/// Parent table to which relations has to be done        
private static void CreateRelations(DataSet dataSet, Type type, DataTable parentTable)
{
DataTable dataTable = dataSet.Tables[type.Name];

// If parent table exsits then create relation
// with child table on field Parent ID            
if (parentTable != null)
{
dataSet.Relations.Add(
new DataRelation(parentTable.TableName + "_ID_"
                        + "PARENTID_" + dataTable.TableName,
parentTable.Columns["ID"],
dataTable.Columns["ParentID"]));
}

// Check for other lists under current object
// go for another relation if exists            
foreach (PropertyInfo pInfo in type.GetProperties())
{
if (pInfo.PropertyType.IsGenericType &&
(pInfo.PropertyType.GetGenericTypeDefinition() == typeof(List<>)
|| pInfo.PropertyType.GetGenericTypeDefinition() == typeof(IList<>)))
{
// If associate lists are there make then another table
                    CreateRelations(dataSet,
pInfo.PropertyType.GetGenericArguments()[0],
dataTable);
}
}
}
}
}

Tested with following code

;public class Student    
{
public string Name { get; set; }
public string Class { get; set; }
}

public class Teacher    
{
public string Name { get; set; }
public string Address { get; set; }
public List<Student> Students { get; set; }
}

class Program    
{
static void Main(string[] args)
{
List<Student> students = new List<Student>();
students.Add(new Student { Name = "Ram Prasad", Class = "LKG" });
students.Add(new Student { Name = "Dina Nath", Class = "Prep" });

List<Teacher> teachers = new List<Teacher>();
teachers.Add(
new Teacher{
Name="Om Prakash",
Address="Mangalore",
Students = students
});
teachers.Add(new Teacher                
{
Name = "Om Prakash 2",
Address = "Gurgaon",
Students = students
});

DataSet dataSet = ListConvertor.ConvertToDataSet<Teacher>(teachers);
}
}

It is not tested in all the cases and condition only checked with few cases and requirement. If any problem do reply, i will fix it up and re-post it. After converting we assigned it to devexpress grid and get the following successful output

Grid assigned to parent data table list with all child tables

You might have seen various websites and web application giving features to Crop your image and save it. That can be done in DHTML or in Javascript. Lets see one example of doing it with the help of JCrop which can be download from here (JCrop)

How to start

1. First include the following file into your project

• jquery.Jcrop.js
• jquery.Jcrop.min.js
• jquery.min.js

or you can directly drag and drop the JCrop folder in your project

JCrop files

2. We need to write code in our page. Include the JQuery function in the page and also add one event for crop control for updation of the cordinates in the variable on selection by users. Check the head section of the page given below

<head runat="server">    
<title></title>    

<script src="js/jquery.min.js"></script>

<script src="js/jquery.Jcrop.min.js"></script>
<script src="js/jquery.Jcrop.js"></script>

<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

		<script language="Javascript">

		    jQuery(document).ready(function() {
		    jQuery('#cropbox').Jcrop({
		            onSelect: updateCoords
		        });
		    });

		    function updateCoords(c) {
		        jQuery('#X').val(c.x);
		        jQuery('#Y').val(c.y);
		        jQuery('#W').val(c.w);
		        jQuery('#H').val(c.h);
		    };

		</script>
</head>

3. In your body section add following form to your page

<div>        
<asp:Button ID="Submit" runat="server" Text="Crop Image" 
onclick="Submit_Click" />        
<br />        
<br />        
<asp:Image ID="cropedImage" runat="server" Visible="False" />        
<br />        
<br />        

<img src="Sunset.jpg" id="cropbox" />

<asp:HiddenField ID="X" runat="server" />        
<asp:HiddenField ID="Y" runat="server" />        
<asp:HiddenField ID="W" runat="server" />        
<asp:HiddenField ID="H" runat="server" />        

</div>

4. We need to handle the click event of crop button in our code and crop the image there

protected void Submit_Click(object sender, EventArgs e)
{
if (this.IsPostBack)
{
//Get the Cordinates                
int x = Convert.ToInt32(X.Value);
int y = Convert.ToInt32(Y.Value);
int w = Convert.ToInt32(W.Value);
int h = Convert.ToInt32(H.Value);

//Load the Image from the location
                System.Drawing.Image image = Bitmap.FromFile(
HttpContext.Current.Request.PhysicalApplicationPath + "Sunset.jpg");

//Create a new image from the specified location to                
//specified height and width                
Bitmap bmp = new Bitmap(w, h, image.PixelFormat);
Graphics g = Graphics.FromImage(bmp);
g.DrawImage(image, new Rectangle(0, 0, w, h), 
new Rectangle(x, y, w, h), 
GraphicsUnit.Pixel);

//Save the file and reload to the control
                bmp.Save(HttpContext.Current.Request.PhysicalApplicationPath + "Sunset2.jpg", image.RawFormat);
cropedImage.Visible = true;
cropedImage.ImageUrl = ".\\Sunset2.jpg";
}
}

Download complete code from here

Selection by user for Croping

Cropped Image

I was developing one application in ASP.NET MVC, where i was in need of displaying Date Picker to the user. But if you generate View with the help of MVC extension then it will display text box for your date field. In order to show the datepicker i used jquery datepicker.
You can download it from JQuery UI here

Step 1

• Include these files in your project. in the script folder

jquery-1.3.2.js
ui.core.js
ui.datepicker.js

Also include the theme folder in project to apply the themes for the respective controls

• Add the Script reference in your webpage, for that include the following code

<script type="text/javascript" src="/../../Scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/../../Scripts/ui.core.js"></script>
<script type="text/javascript" src="/../../Scripts/ui.datepicker.js"></script>

• Include the following script in your view page(where you want to show the date picker) giving it a ID. On that ID we will use it as a input. ID should be unique

<script type="text/javascript">
 $(document).ready(function(){
$("#FromDate").datepicker();
});
</script>

Step 2

• We need to create a Extension for HtmlHelper Class.

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

namespace System.Web.Mvc.Html
{
public static class DatePickerExtension
{
public static string DatePicker(this HtmlHelper htmlHelper, string name)
{
return "<input type=\"text\" id=\"" + name + 
"\" name=\"" + name + "\" value=\"\"/>";
}
}
}

• In your view page you have to add the following code to have that control

 <label for="fromDate">From date:</label>             
<%= Html.DatePicker("FromDate")%>

Output :

JQuery UI DatePicker

In visual basic we were having optional parameter option which can help you to send only some parameter to methods and reset will take the default values. Same feature is part of C# 4.0 where you can have default values for the parameters.

Optional Parameters & Their default values

But one more noticeable feature is “named parameter”. You might have seen in VB also that if you want to set any of the parameter no values then you have to leave all other parameters also which are defined after that variable. To sort this out you can use named parameter which specify the name of the parameter and value for it “seats:4” where seats is the parameter and 4 is the value.

Named Parameters

Both of the features are shown below in sample

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace ParameterFeatures
{
class Program    
{
static void Main(string[] args)
{
Vehicle car = new Vehicle("V6");
Vehicle van = new Vehicle(seats:4);

Console.WriteLine("Engine : " + car.Engine);
Console.WriteLine("Seats : " + van.Seats.ToString());

Console.ReadLine();
}
}

class Vehicle    
{
public string Engine { get; set; }
public int Seats { get; set; }

public Vehicle(string engine = "V8", int seats = 5)
{
Engine = engine;
Seats = seats;
}
}
}

C# 4.0 is out once again with new set of features. Now we will see one of the new feature of it, which is know as Dynamic Lookup. It is new approach for invoking thing more dynamically than before. It gives big freedom and working with various different kind of objects like COM etc will be too easy.

Big question how. I have written one sample below where i am grabbing the object of excel instance which is already running and filling data in it. In the previous version of C# we used to do it with the help of InvokeMember funtions of the object. But in C# 4.0 story is differentM

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace DynamicObjects
{
class Program    
{
static void Main(string[] args)
{
dynamic excel = System.Runtime.
InteropServices.Marshal.GetActiveObject("Excel.Application");

//Display the name of the work book            
Console.WriteLine(excel.ActiveWorkbook.Name);

//Select the range and place some data here
excel.Range("B2").Select();
excel.ActiveCell.FormulaR1C1 = "Sample Data";

//Wait for the input            
Console.ReadLine();
}
}
}

It was so simple to use the dynamic object, That i have to just type out the properties and method in the front of dynamic object. At the time of getting that object it will be handled automatically and will map the functions and methods. Its really a great feature, which can save time and give more freedom to the developer.

Difference between VAR & DYNAMIC

VAR It is also know as local type inference feature of C#. This feature will allow you to remove the data type from the left hand side and create the type on the fly. But still you have to specify the type in the right hand side and var will be replaced by the new type which will be built at compile time.

DYNAMIC it is step ahead of the VAR. It will get the information of the object not at the compile time rather at the time of creation of that object. It is done at runtime only.