Showing posts with label asp.net web forms tutorial. Show all posts
Showing posts with label asp.net web forms tutorial. Show all posts

Stylish login page design in asp net c#

Login page design in asp net c# 

In this tutorial, I going to show you how you can create a "login page design in asp.net c#". This process is very simple. Here we need to know about some basic knowledge of CSS. The Cascading Style Sheets (CSS) will be placed in the head section of the asp.net webform.

login page design in asp net c# using bootstrap

Step to Design a login form in asp.net C#

1.Open visual studio -->File -->New --> Select ASP.NET Empty Website
2. Now add a web form.
3. Add two text boxes and two-button.
4. Place CSS in the head section.

Asp.net WebForm Source Code


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Login Form</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        form {
            border: 3px solid #f1f1f1;
        }

        input[type=text], input[type=password] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }


        button:hover {
            opacity: 0.8;
        }

        .cnbtn {
            background-color: #ec3f3f;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 49%;
        }

        .lgnbtn {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 50%;
        }

        .imgcontainer {
            text-align: center;
            margin: 24px 0 12px 0;
        }

        img.avatar {
            width: 40%;
            border-radius: 50%;
        }

        .container {
            padding: 16px;
        }

        span.psw {
            float: right;
            padding-top: 16px;
        }

        /* Change styles for span and cancel button on extra small screens */
        @media screen and (max-width: 300px) {
            span.psw {
                display: block;
                float: none;
            }

            .cnbtn {
                width: 100%;
            }
        }

        .frmalg {
            margin: auto;
            width: 40%;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server" class="frmalg">

        <div class="container">
            <center>
                <h3>Asp.net Login form </h3>
            </center>
            <label for="uname"><b>Username</b></label>
            <asp:TextBox runat="server" ID="txt_Username" placeholder="Enter Username"></asp:TextBox>
            <label for="psw"><b>Password</b></label>
            <asp:TextBox runat="server" ID="txt_password" TextMode="Password" placeholder="Enter Password"></asp:TextBox>
            <asp:Button runat="server" ID="btn_Login" CssClass="lgnbtn" Text="Login" />
            <asp:Button runat="server" ID="btn_cancel" Text="Cancel" class="cnbtn" />
        </div>
    </form>
</body>
</html>

I hope you like this post about "login page design in asp net c#", If you have any problem related to design or any other thing feel free to comment below.


Read More

How to pass query string in hyperlink in asp net

Pass query string in hyperlink in asp net

Today, I am going to show with you "how we can pass query string in the hyperlink". So let's get started step by step tutorial of passing query string in the hyperlink. Many times a situation arrives when we need to pass query string from one page another page by hyperlink. If you want to use hyperlink with query string, also this tutorial will helpful for you.


How to pass query string in hyperlink in asp net, multiple query string in gridview



Step to implement the query string with hyperlink

1. Add an asp.net server-side hyperlink control.
2. Put the value and key in herf attributes.
3. URL of the page on which you want to redirect.

Use Single Query in hyperlink

  <asp:TemplateField HeaderText="View">
    <ItemTemplate>
         <asp:HyperLink ID="HyperLink1" ForeColor="red" Text="view" Target="_blank"
       runat="server" NavigateUrl='<%#"StudentView.aspx?id="+Eval("StudentID").ToString()%>'></asp:HyperLink>
    </ItemTemplate>
    </asp:TemplateField>



How to use multiple query string in hyperlink in asp.net in grid view

    <asp:TemplateField HeaderText="View">
     <ItemTemplate>
            <asp:HyperLink runat="server" NavigateUrl='<%# string.Format("~/Details.aspx?StudentID={0}&StudentName={1}", (Eval("Empsalary").ToString()),
    (Eval("Empsalary").ToString())) %>' Text="View" Target="_blank"/>
      </ItemTemplate>
       </asp:TemplateField>

If you have any issue, please drop a comment below. We will happy to help you.
Read More