My Profile

Sunday, February 6, 2011

Working with multiple forms


Working with multiple forms:

          Till now we have seen how to design the form and how to add functionalities to the controls of the form. Now it is very important to us to know how the navigation taking place between 2 or more forms. This is the general and most important requirement for the website to be effective i.e., sometimes the user needs to go from one page to other page with or without carrying some values to the other page.
          Generally we build a website with one page as main page and we will provide navigation from this page to different child pages. And also the requirement may be as to navigate from one child form to another child form.
          As we all know that a web application is collection of web forms and HTML forms. Every web form is one screen or input/output for a user. Here we need to focus on the good navigation by providing different options for users so that all project content can be consumed.
          It is also important to provide communication between forms by exchanging data between their navigation.
         
From Server Side, ASP.Net provide following options for navigation
·       Response.Redirect(<Url>)
·       Server.Transfer(<pagename>)
·       Using PostBackUrl Property of PostBack Controls
·       Hyperlink Control of ASP.Net
·       HTML Hyperlink called <a> tag [anchor tag]

1.    Response.Redirect(<Url>)

This is the one of most important option provided by ASP.Net for navigation. In entire ASP.Net very few options are provided for navigation.
          Here Response is an Object (class), which provides output to the client. Redirect is the static method under the Response class which is used for navigating to other pages. It takes and string input i.e., the URL of the page to which we want to navigate.
          Using this method of navigation, we can navigate to the page which is present in our own website and also to the pages in any other websites (Cross-website).
          Redirect method simply navigates from one page to other page and it has no options or properties to carry values from on form/page to other form/page.
          If we want still to pass values then we use HTTP “Query String” concept. According to this we have to append values along with the pagename/sitename that we are specifying. It has a format which we must follow to pass values

Query String
Pagename?name=values&name=value……(upto 255 characters[standard])

Example:             
Search.aspx?a=10&b=20
Here passing values means, sometimes we may have some requirement like when a user enters some details in the form and clicks on submit button then these values should come in other form in another page so that he can fill out remaining form. Here our main intention is to transfer values from one page to another page.

We can understand clearly with the following example.

Step 1:  Goto File à New à Website à Select “Visual C#” as language on left side and “ASP.NET Empty Website” template on right side à name it as “NavigDemo” and click on “ok” button.
Step 2:  Open Solution Explorer à right click on NavigDemo Project à Add New item à Selecte “Web Form” template à name it as “ResponseNavig.aspx” à click on “OK” button.
Step 3:  Goto to “Design” view of the ResponseNavig.aspx and design the form as follows.


Controls Used
       Images, Payments, Search using Google à LinkButton
       To Accept keywords                                    à TextBox
       Search Button                                              à Button
       To select Language                                      à DropDownList

Step 4:   Coding
·       Under Images(LinkButton) Click Event [double click on Images and write following code in it]
                              Response.Redirect(“ViewImages.aspx”);
                    //create one page with name ViewImages.aspx and place some images on it before executing this example.
·       Under Payments(LinkButton) Click Event [double click on payments and write following code in it]
                   
                    Response.Redirect(“Payment.aspx”);
                   
                    //here if we create a page with payment.aspx there is no problem at all it simply navigates to that page. But if the page is not exists then we’ll get an error “Resource not found”.
                    //leave it like this and execute without creating payment.aspx page and see what happens.

Here I want to tell you that, in web development it is very important to know the negative cases also i.e., what error occurs and when.

·       Under Search Using Google(LinkButton) Click Event [double click on it and write following code in it]

                    Response.Redirect(“http://www.google.co.in”);
                   
                    //with this line of code, I want you to know that Response object have a capability of navigating even to the pages of Cross Websites. Here I’m taking Google site as example.
                    //if internet connection is available then it simply navigates to the Google home page. If internet is not available also there is no error from ASP.NET and the error will come from the browser that “cannot display the page”. But the command is correct.
·       Under Search Button(Button) Click Event [double click on it and write following code in it]

                    Response.Redirect(“search.aspx?qry=”+TxtSearch.Text+”&lang=”+DDLstLang.SelectedValue);

                    //here search.aspx is another page we want to navigate to and “?” here separates the pagename and the values we are passing from present page to search.aspx. we can pass values as Query String name-value pairs. Name can be anything and remember this name for further use and value can be appended using Control ID and its Property which gives the value.
Here we are passing two values one is from textbox which is named as “qry” and another one is from dropdownlist which is named as “lang”.

Here our intention is that, whenever a user enters some keyword(s) and select the language from dropdownlist and press submit button the user should navigate to search.aspx page with these two values.

Now it’s our turn to create “Search.aspx” page and read these values and display in that page.

Step 5:  right click on the project in solution explorer à Add New Item à select “Web Form” template à name it as “search.aspx” [name should be same as what we given in the query string of Redirect method]
Step 6: Design the page as following


Controls Used
2 labels with green and red colors
Green colored label is for displaying what we entered in the textbox in previous page i.e., keywords.
Red colored label is for displaying what we selected in the dropdownlist box i.e., language.

Step 7: Coding
·       Under Form_Load event of search.aspx [double click on the form and write the following code in it]

                              Label1.Text = Request[“qry”];
                              Label2.Text = Request[“lang”];
//Here another new property i.e., “Request”. It is responsible for taking input from the client (browser). In our case we used this property for reading the values from the query string. Here we need to specify the names of the values same as what we mentioned in the query string of Redirect method.

//Save all the project and run it and see the result.


Friendzz…I hope u understand the 1st method of navigating from one page to other page.
Try yourself whether you understood or not by doing the following requirement I’m giving to you.

“Create a Payment form with Account no, name, Amount as textbox fields and mode of payment as radibutton group with Credit card, debit Card, Online Banking and Cash as four radiobuttons. Whenever the user selects mode of cash immediately display some bank names to the right of it by taking listbox or something else and allow him to select one bank and click on submit and then it should navigate to another page where all the user selected fields should be displayed in textboxes one in each.”

**Contact me for solution of this requirement

----------------------------------------------------------

** If you like this post please like our page in facebook

0 comments:

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More