Exam Time
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 jQuery Effects Designer
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
Event Calendar in MVC application Using jMonthCalendar(JQuery)
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
Here are the screen shot of the application.
Event Calendar in MVC Application
Detail of selected Event
File upload in ASP.NET MVC
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
Convert ILIST, LIST to DataSet with child tables and relations
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
Crop Image in ASP.NET using JCrop, JQuery
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
Using JQuery UI in ASP.NET MVC
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>
<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=\"\"/>";
}
}
}
<label for="fromDate">From date:</label> <%= Html.DatePicker("FromDate")%>
Output :
JQuery UI DatePicker
Named & Optional Parameter, C# 4.0 Part 2
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;
}
}
}Dynamic Lookup & dynamic Type, C# 4.0 Part 1
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.
Microsoft Live Writer 2009
Latest version of the Microsoft Live is released on 12/Feb/2009 . It is one of the good software for blogging. It supports various blog service like wordpress, typepad, blogger etc.
As Microsoft is already know for the GUI they provide. Once again the features and GUI of the Live writer are remarkable. Editing is very easy and very useful features are there like
1. Spell Checking
2. Insertion of Pictures, Albums, Tables, Maps
3. List existing Tags from the your blog
4. Set publishing date
Interface is very remarkable.
Image Editing
Nice set of image editing tools/features which can save you time and can give you nice images for your blog.
You can set the layout of the images with there borders.
In Advance options you can resize the images as well you can crop. Even you can rotate, change contrast and add watermark to image
Image Crop
Image Cropping tool which can save your time. It is just i was looking for editing my images for blog. Now i can just work with in live writer rather using various software. You can rotate your image too
Include the map for any location which provided by Microsoft Virtual Earth
Category Selection
One can easily select the category for the post. User can even search for existing one and can create new one also.
Plug-ins
What more ? You can download hundreds of plug-ins for your live writer, Which will enhance your blog editor and solve out your various problems http://gallery.live.com/results.aspx?c=0&bt=9&pl=8&st=5
One of the plug-in “Insert Code for Windows Live Writer”. It will really help you to insert code in your blog with color, line numbering and even with line colors
