Showing posts with label DotNet Developer Agra. Show all posts
Showing posts with label DotNet Developer Agra. Show all posts

Tuesday, June 23, 2015

Events in ASP.NET Program

Events

ASP.NET is an event-driven way of making web applications. With PHP and Classic ASP, you have one file, which is executed line after line, from start to end. However, ASP.NET is very different. Here we have events, which are either activated by the user in one way or another. In the previous example, we used the Page_Load method. Actually, this is an event, which the Page class calls when the page is loaded. We will use the same technique in the next example, where we will add a couple of controls to our simple hello world example. To make it a bit more interesting, we will change the "world" word with something defined by the user. Have a look at this codelisting, where we add two new controls: A Button control and a TextBox control.

<form id="form1" runat="server">
<div>
    <asp:Label runat="server" id="HelloWorldLabel"></asp:Label>
    <br /><br />
    <asp:TextBox runat="server" id="TextInput" /> 
    <asp:Button runat="server" id="GreetButton" text="Say Hello!" />
</div>
</form>
As you can see, we now have the 2 new controls added, but they really can't do much at the moment. You can run the example if you wish to check this out for your self - if you click the button, the page is simply reloaded. Let's change that, and let's start by doing it the easy way. VWD comes with a WYSIWYG editor, and while I hardly ever use it my self, it does make some things easier, like creating events. So, click the Design button in the bottom of VWD. Now you will see a visual representation of our page. We wish to add a Click event to the button, and this is very simply - just doubleclick the GreetButton, and you will be taken to the CodeBehind file of our page. As you can see, a fine new method has been added, called GreetButton_Click. If you have a look at the Default.aspx file (you need to go from Design view to Source view), you will see that an attribute has been added to our Button control, telling which method to call when the button is clicked. All this work done with a simple doubleclick. 

Now lets add some code to our new event. We wish to use the text from the TextBox, on our good old Label with the "Hello, world!" text. This is also very simple, and all it requires is a single line of code:


HelloWorldLabel.Text = "Hello, " + TextInput.Text;
Run the project again (F6), and you will see the our old page with a couple of new controls. The "Hello, world!" text is still there, because we set it in the Page_Load event. Now try entering a name in the textbox, and press the button. Voila, the text is changed, and we have just used our first control event. Notice how we can add code which is not necessarily called unless the user performs a specific task. This is different from the good old Classic ASP/PHP approach, but you will soon get used to it, and you will probably also come to like it a lot! 

Sunday, June 21, 2015

Twitter Bootstrap Pages




Twitter Bootstrap 20 Static Content Pages developed for a Greenfield project



I designed 20 static pages in MVC3 using HTML, Twitter Bootstrap CSS, JQuery. The gradient color combination and the entire flow looks like the site: 

1. http://www.microsoft.com/expression

2. http://demos.kendoui.com/web/datasource/remote-data.html







Add Article
I designed this page using twitter bootstrap css.





Add Note

When the 'Add Note' button is clicked a modal dialog appears where you can add data.



Add Profile
In this page I added 3 information widgets and a ListView with gradient background.




Add Service
In this page when 'Add Service' button is clicked, a modal dialog appears where you can add data. This data will be stored in SQL Server.



Add User
This page is designed to add details of the new users. The dropdown list and textboxes are designed to give a professional look.



Blog Details
This page is designed to display the details of the article. Here rich textbox is added where you can style your text. Also I added a Info widget on this page.





Blog Main
This page is designed blog summary in a table.





Contact Us





Manger Users
Twitter Bootstrap JQuery datatable added on this page with table paging, Add User and Search buttons.





Modal Generic Document Viewer 1
This page has a button which when clicked opens a modal dialog with image slideshow





Modal Generic Document Viewer 2
Image slide show in modal dialog. There are 4 buttons at the bottom for Downloading the image, Slideshow of all the images, display next image and previous image.




My Notifications
Here twitter bootstrap jquery datatable is used with pagination.




Partner Registration
This page displays textboxes, dropdown lists with Info widgets. I designed this page keeping in mind that the look and feel and the flow of the entire project should be same.





Profile Details
In this page the critical part was to create a list view similar to http://demos.kendoui.com/web/datasource/remote-data.html
Here the ListView should be with pagination instead of scrolling. I used JQuery for pagination of ListView.




Report
This page is designed with Info widgets and alerts using twitter bootstrap css.





Search
Simple search page with professional look and feel.




Search Result
In this page ListView with gradient background color is created. This ListView is with pagination and a search button.


Service Reports
This page contains an Info widget and a simple JQuery datatable with pagination




Update Service
For the page the requirement was that the textarea for 'Peer Note' should be re-sizable with fixed width and resize height. Usually when we expand a textarea the width and height both increase/decrease. I used CSS style to fix the width and resize the height of the textarea




Add Parcel
A simple page with professional look and feel and gradient color combination look like the site http://www.microsoft.com/expression/






Edit Profile
The color combination and the flow of  the page look like the site http://www.microsoft.com/expression/