jQuery Series 2

Assalamualaykum Wr Br..Today we deal with Selector of jQuery..
What is Selectors in jQuery?
Selectors can be attribute or entity which selects entire content(s) it belongs and perform the required action.
The syntax of selectors in jQuery is as follows:
$(“”).;
Now lets us start with an example whose html code can be coded as shown below:
series2
and its associated jQuery code is shown as:
seriesjs
Lets traverse the code of jquery which is shown above:
The first line is the entry point of jquery execution as stated in Series1 post..
The next line is Selector which selects the id of control followed by “#”, here please refer the html code where button has id as followed by “#”. Continuing after selector action is specified here is click then again 3 line starts with Selector which selects all “div” tagged lines and then followed action to change its background color change to red. The next lines are specifies the syntax of closing.When you execute such code the output can as shown after clicking Test buttonoutputseries2.
Now we observe that only first two lines which are under div tag gets background color change on button test click…Here we add some more selectors to our jquery file as shown below:
$(“div,#testbutton,p”).css(“background-color”,”red”);//which results change in background color of button,all tagged entites..
$(“strong”).css(“background-color”,”red”);//changes background color for strong tagged entities
$(“div > p:first-child”).css(“background-color”,”red”);//changes background color for first div tagged entity.similarly $(“div > p:last-child”).css(“background-color”,”red”);
Now selecting Descending elements as: $(“div strong”).css(“background-color”,”red”);//here single space after div specifies that the descend strong tagged in parent div tagged entities.Now the selector for selecting even and odd tagged elements can be shown as “$(“p:even”).css(“background-color”,”red”);” note that the line index starts with 0.

Some more interesting stuff…. to the html page for third <p> tag, I gonna edit it as <p id=”third”>………save it and to the jquery file change the selector field as:

$(“#third”).css(“background-color”,”red”);

I hope you are enjoying…Now awesome feature of jQuery is here..Selecting based on “id” of an element is represented by “#” and for classes it is represented by “.”(dot symbol)..lets look our selector statement would be:

$(“.multiple”).css(“background-color”,”red”);

here multiple is the class name which we specify in html page as shown:
class

Advertisements

Microsoft’s Powerful Service: WCF Walk through

Hi Everyone!!!
Today we are going to build a new WCF Service named WCF_Calculator in part 1 and in later sessions we consume this service in console application, Windows Application.

To create a new WCF Service, Start your visual studio 2010, Click on New Project–>Window gets populated..Select C# language and WCF from left most pane–>Select WCF Service Library and give name to your service(here I gave name as WCF_Calculator) as shown below:Untitled
Now Click on OK. The solution looks like as:

solution

IService1.cs and Service1.cs are auto-generated files. As we are building Service from scratch hence we delete IService1.cs and Service1.cs files in order to know the behavior of service very well. Select these two files from the solution then right click of mouse and select Delete.
Now add new item by right click solution then add interface named “ICalculator.cs” then code as shown:
Interfaace
We are very to near to pack up..have little patience please….As we have interface ready with us…
Every interface need to be implemented, so now right click your solution and a new item select class name it as “Calculator.cs”. Code the class as shown below:

Calculator
Now the very last step to fly is open App.Config file and change the interface name which was IService1 to ICalculator in endpoint tag Contract value and also change service tag attribute name=Calculator which is our class name which is implementing our interface. Here our App.Config should look as:

Appfile
Now Press F5 and your service is in the air…Microsoft Built in WCF Service Host Tool is available which runs our service shown as:
output1
To the left most pane we find our OperationContracts named Add,Sub,Mul and Div…Click on Add then supply values to arguments which is shown in below image as 234 and 432 and click Invoke Button which displays result as:
output2
similarly click each of the OperationContract and supply values and click Invoke button to retrieve result…
We are done in Creation of the Service…In next part WCF 2 we look at how to consume this Calculator service in Console and Windows Service…Thanks…Enjoy…

My Simple App MVC1

Assalamualikum Here we gonna explore first simple app of MVC(Model View Controller).
MVC stands for Model-View-Controller, a design pattern that’s very popular in the web development space. As an alternative to Web Forms, ASP.NET MVCtakes a different approach when it comes to structuring web applications. This means you won’t be dealing with ASPX pages and controls, postbacks or view state, or complicated event lifecycles. Instead, you’ll be defining controllers, actions, and views. The underlying ASP.NETplatform is
the same, however, so things like HTTPhandlers and HTTPmodules still apply, and you can mix MVCand Web Forms pages in the same application. Both ASP.NETWeb Forms and ASP.NET MVCsit alongside each other on top of the core ASP.NETplatform.
The model—The domain that your software is built around.
The view—The visual representation of a model, given some context. It’s usually the resulting markup that the framework renders to the browser.
The controller—The coordinator that provides the link between the view and the model. The controller is responsible for processing input, acting upon the model, and deciding on what action should be performed, such as rendering a view or redirecting to another page.
Now lets start our new project named “MY MVC1” and select C# language then select ASP.NET MVC project then a window gets populated select Empty project.
2. Observe that we find additional directories in solution as “Controller,Model,View and Content” which represents our ASP.NET MVC solution. Right Click on Controller then select New Controller and Give name as MYMVC1Cotroller…
3. A New class gets created inside Controller directory with a default method named as “Index” whose return type is ACTIONRESULT which is View.
4. Right click your Action Result method and select to create new view then a new window populates which asks to use razor view engine(CSHTML) or asp c#(ASPX) then select ASPX.So your controller should be like as shown below:
controller1
now lets work with view and should be like as below:
view1
Now when you execute error is encountered because the controller is need to be set which is shown as in the url..
mvc1output
Thats all for the day…We shall continue it at some other time till then good Bye..

Sample Crystal Report in VS2010

Hi We explore sample crystal report creation in visual studio 2010 using C# asp.net.We start first from database. I create a sample database by name Department and a table named Clg.In this table i have tuples as ID, Dept_name and HOD with 4 records.We display the entire table data as a report.
1. Now create an empty new web-project with name as Sample_crystal.
2. Add a webform named as webform1.aspx and add crystalreport which populates a wizard select Standard report and blank report then click ok.
3. Drag-drop the dataset1.xsd from toolbox and on which drop clg table from server explorer.
4. Drag-drop the crystalreportviewer on to the webform and in page_load event add the code as::
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection(“Data Source=.\\sqlexpress;Initial Catalog=departmetn;Integrated Security=True;Pooling=False”);
SqlDataAdapter da=new SqlDataAdapter(“select * from clg”,con);
DataSet ds=new DataSet();
da.Fill(ds,”clg”);
CrystalReport1 o = new CrystalReport1();
o.Load(Server.MapPath(“CrystalReport1.rpt”));
o.SetDataSource(ds.Tables[“clg”]);
CrystalReportViewer1.ReportSource=o;
CrystalReportViewer1.DataBind();
}
5. click the field explorer (just as toolbox,server explorer) @ crystalreport.rpt screen select Database fields–>database expert then select our dataset.
6. Expand the database Fields and drag-drop the columns of table on the crystal report Section 3(Details).
Run the application which yields the exact report from database.