DM Library

 

22-11-2019

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

Tab Index: The tabindex attribute specifies the tab order of an element(When the tab button is used for navigation)

Eg:

Output:

Form submit Methods: The method attribute specifies how to send form data(the form data is sent to the page specified in action attribute field)

There are two methods are present to send the form data to the server.

GET Method: 

  • Appends form data into the url in name/value pairs

  • The length of a URL is limited about 3000 characters

  • Never use GET method to send sensitive data

Code:

Output:

POST Method:

  • Appends form data inside the body of the HTTP request

  • Data is not shown in the url

  • No size limitations


Code:

Output:


Browser Default Actions:

  • A click on a link - initiates navigation to its url.

  • A click on a form submit button - initiates its submission to the server.

  • Pressing a mouse button over a text and moving it - selects the text.

When we click on link it will redirect to that page

On submit False: Even though we have use anchor tag for link when we click on the link it does not return to href page if we use the onclick property.

Output:



Button onclick submit the page by default to same page with post back request: For this we need to use the target attribute like target=””

The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

If we use target=”-blank” it will redirect to the new tab

Form Action: The action attribute specifies where to send the form data when a form is submitted.

Output:




Creating Table in Database: First we need to create a table in database

Creating a page:

Creating Lists for facilities: For this we have added the code in vHome.aspx

vHome.aspx Code:

<%@ Register TagPrefix="DM" Namespace="LibraryDM"%>

<%@ Register TagPrefix="DM" TagName="Top" Src="../bHTMLTop.ascx" %>


<%@ Register TagPrefix="DM" TagName="Bottom" Src="../HTMLBottom.ascx" %>

<script runat="server">

Public Sub page_load()

  DMUser.CheckIn()

    End Sub

</script>

<link rel='stylesheet' type='text/css' href='../../Local/SPS_Styles_New.css'>


<style>

    .ShapeStandard

    {

width:155px;

height: 160px;

}

.row1

{

    margin-left: 300px;

}

.row2

{

    margin-left: 240px;

}


.Vehicles{

Background-image: url('../../image/Vehicle.png');

background-position:center;

 background-repeat: no-repeat;


    } 

    .Monitor{

Background-image: url('../../image/Monitor.png');

background-position:center;

 background-repeat: no-repeat;

    } 

    .Collections{

Background-image: url('../../image/Collections.png');

background-position:center;

 background-repeat: no-repeat;

    } 

    .Cpu{

Background-image: url('../../image/Cpu.png');

background-position:center;

 background-repeat: no-repeat;

    } 

    .Books{

Background-image: url('../../image/Books.png');

background-position:center;

 background-repeat: no-repeat;

    } 

</style>


<div style='width:700px; height:100%; background-color:white;'>

<DM:Top runat=server id="Top" Title="TM - Home"/>

                <div class="padBigBigLeft padBigLeft"><!--1st row home Screen Title-->

                    <div class="col-sps-24 HomeScreenTitle">

                        <h3 class='HSB'>Turbomodus <span class='HSG'>HOME</span></h3>

                    </div>

                </div>


            <table class="row1">

        <tr>

            <td class="padBigBigLeft padBigLeft row2 ShapeStandard">

            <a href='listVehicles.aspx'><div class='ShapeTop Vehicles'></div></a>

            <a href='cVehicle.aspx?tab=1'><div class='AddBtn-Standard '></div></a>

            <a href='listVehicles.aspx'><div class='Btn-Standard'><p>Vehicles</p></div></a>

            </td>

            <td class="padBigBigLeft padBigLeft ShapeStandard row1" style="padding-left:140px;">

            <a href='listMonitors.aspx'><div class='ShapeTop Monitor'></div></a>

            <a href='cMonitor.aspx?tab=1'><div class='AddBtn-Standard '></div></a>

            <a href='listMonitors.aspx'><div class='Btn-Standard'><p>Monitors</p></div></a>

            </td>

            </tr>

        <tr >

            <td colspan="2" align="center">

                <table>

                    <tr>

                        <td class="padBigBigLeft padBigLeft ShapeStandard"  >

                        <a href='listCollection.aspx'><div class='ShapeTop Collections'></div></a> 

                        <a href='cCollection.aspx?tab=1'><div class='AddBtn-Standard '></div></a> 

                        <a href='cCollection.aspx'><div class='Btn-Standard'><p>Collections</p></div></a> 

                        </td>

                    </tr>

                </table>

            <td>

        </tr>

       

        <tr>

            <td class="padBigBigLeft padBigLeft ShapeStandard" >

            <a href='ListCPU.aspx'><div class='ShapeTop Cpu'></div></a>

            <a href='cCPU.aspx'><div class='AddBtn-Standard '></div></a>

            <a href='ListCPU.aspx'><div class='Btn-Standard'><p>Cpus</p></div></a>

            </td>

            <td class="padBigBigLeft padBigLeft ShapeStandard" style="padding-left:140px;">

            <a href='ListBooks.aspx'><div class='ShapeTop Books'></div></a>

            <a href='cBooks.aspx?tab=1'><div class='AddBtn-Standard '></div></a>

            <a href='cBooks.aspx'><div class='Btn-Standard'><p>Books</p></div></a>

            </td>

        </tr>

    </table>





Output: When we click on plus button it has to redirect to the New cpu

When we click on Image and text it has to redirect to the list cpu


 For getting tabs:For this I have made the changes in utabs.aspx which is present in G:\TMAccountingDev\Kiran - TM\Local

For page creation: for this i created a new file cCPU.aspx

<%@ Register TagPrefix="DM" Namespace="LibraryDM"%>

<%@ Register TagPrefix="DM" TagName="Top" Src="../bHTMLTop.ascx" %>

<%@ Register TagPrefix="DM" TagName="Tabs" Src="../../Local/uTabs.ascx" %>

<script runat="server">

Dim hTemp AS HashTable

Dim ID AS Integer

Public Sub page_load()

    ID = cInt("0" & Request.QueryString("ID"))

    'DM.Debug(ID)

    tabs.Page = "ListCPU"

    Top.Title="TM - New CPU"

    IF IsPostBack Then

        hTemp = Sql.ReadForm(Me)  ' Read the data from the submited form

        'DM.Debug(hTemp("dbCpuNo") &" -  dbProcessor "& hTemp("dbProcessor") &" - dbUser:"& hTemp("dbUser"))

        ID = Sql.Write(hTemp, "CPUDetails", ID)  'Write the hash table data into sql table

        DM.Redirect("vCPU.aspx?ID=" & ID, True)

    End IF

    IF ID > 0 Then

        hTemp = Sql.ReadRecord("CPUDetails", ID)

        Sql.WriteForm(Me, hTemp)       

    End IF


End Sub


</script>


<div style='width:500px; height:100%; background-color:white;'>

    <DM:Top runat=server id="Top" />

    <DM:Tabs runat=server id='tabs' tab=1/>

    <form runat="server" ID="inputFormCPU" Name='inputFormCPU' OnSubmit="return false;">   

    <table>

        <tr>

            <td  style="border:1px solid #ddd">

                <table>

                    <tr>

                        <td class='padBigBigTop padBigBigTop padBigBigLeft Left'> CPUNumber:<br><DM:Input ID="dbCPUNumber" type="text" runat="server" class="required" width="235" height="25"/></td>

                        <td class='padBigBigTop padBigBigTop padBigBigLeft Left'> Processor:<br><DM:Input ID="dbProcessor" type="text" runat="server"  width="235" height="25"/></td>

                        <td class='padBigBigTop padBigBigTop padBigBigLeft Left padBigBigRight'> UserName:<br><DM:Input ID="dbUserName" type="text" runat="server" class="required" width="235" height="25"/></td>

                    </tr>

                    <tr>

                        <td colspan='3' class="right padBigTop padBigRight pad">                             

                            <button class="btn btn-inverse" Onclick="javascript:Cancel();">Cancel </button>

                            <button class="btn btn-inverse" Onclick="javascript:SubmitForm();" id="btnSubmit">Add CPU </button>

                        </td>                       

                    </tr>

                </table>

            </td>

        </tr>

    </table>

    </form>   

</div>


<script language="javascript" >

function SubmitForm(){

    $('#btnSubmit').attr('disabled', true);

    if(ValidateForm(inputFormCPU))

    {

        document.inputFormCPU.submit();

    }

    else

    {       

        $('#btnSubmit').attr('disabled', false);

        return false;

    }

}

function Cancel(){

        document.inputFormCPU.reset();

    }

</script>


When we submit the data in the form it has to store in the database

When we click on list cpu it has to show the data which present in database

ListCPU.aspx Code:

<%@ Register TagPrefix="DM" Namespace="LibraryDM"%>

<%@ Register TagPrefix="DM" TagName="Top" Src="../bHTMLTop.ascx" %>

<%@ Register TagPrefix="DM" TagName="Tabs" Src="../../Local/uTabs.ascx" %>

<script runat="server">

Public Sub page_load()


    tabs.Page = "ListCPU"

    listCPU.Source="SELECT CPUNumber, Processor, UserName, ID FROM CPUDetails"

    listCPU.Headers ="7CPUNumber, 7Processor, 7UserName"

    listCPU.Widths="200,200,200"


End Sub


Sub ListCPUDetail(row as System.data.datarow, sort as String, Byval output AS String)   

    DM.Write("<tr>")

    DM.Write("<td>"& SPS.GotoLink(""& row("CPUNumber"), "vCPU.aspx?ID="& row("ID")) &"</td>")

        DM.Write("<td>"& row("Processor")&"</td>")   

        DM.Write("<td>"& row("UserName")&"</td>")

    DM.Write("</tr>")

End Sub

</script>

    <DM:Top runat=server id="Top" Title="TM - List CPU'S"/>

    <DM:Tabs runat=server id='tabs' tab=0/>

    <table>

        <tr>

            <td>

                <DM:List runat="server" id='listCPU'

                Label="CPU'S"               

                ShowLabel="True"

                ShowHeader="True"

                Rows="50"

                Width= "800"

                OnEachRecord="ListCPUDetail"

                ShowPrintIcon="True"

                ShowExportIcon="True"

                ShowBorderBottom = "False"

                ShowPagingBottom="False"

                ShowPagingTop="True"

                ShowAdvancedSearch="True"

                ListStyle="table table-striped "

                DefaultSort="CPUNumber"

                DefaultOrder = "DESC"

                /> 

            </td>

        </tr>


    </table>




Giving link to the cpu number to view the details of that particular number: For this i have added link to the cpunumber in ListCPU.aspx


vCPU.aspx code:



<%@ Register TagPrefix="DM" Namespace="LibraryDM"%>

<%@ Register TagPrefix="DM" TagName="Top" Src="../bHTMLTop.ascx" %>

<script runat="server">

Dim ID AS Integer

Dim hTemp AS Hashtable

Public Sub page_load()

        ID = cInt("0" & Request.QueryString("ID"))

        hTemp = Sql.ReadRecord("SELECT CPUNumber, Processor, UserName,  ID FROM CPUDetails WHERE ID = "& ID)


    'Dm.Debug(ID & "-" & hTemp("dbCPUNo"))

End Sub


</script>

<DM:Top runat=server id="Top" Title="TM - View CPU'S"/>

<table width='1050' border=0>

    <tr>

        <td class='top'>

            <table width='100%'>

            <tr class="x-panel-header x-unselectable"><td class="vP_TopBar">CPU Detail</td><td class=" x-panel-header-text" align="right"><a href="cCPU.aspx?ID=<%= ID %>"><img src="../../image/Topbar_Editbtn.png"></a>&nbsp;&nbsp;<span data-dropdown="#dropdown-4"><img src="../../image/Topbar_Actions.png" title="Actions"/></span>&nbsp;&nbsp;<span data-dropdown="#dropdown-Reports" ><img src="../../image/Topbar_Reports.png" title="Reports"/>&nbsp;&nbsp;</span>&nbsp;&nbsp;<img src="../../image/Topbar_Morebtn.png" class="hide" width="71px" height="26px"></td></tr>

            </table>

        </td>

    </tr>

    <tr>       

        <td Class='borderRight borderLight' valign='top' Width="1030">

        <table width='100%' border='0' bordercolor="red">

            <tr>

                <td width='33%'></td>

                <td width='33%'></td>

                <td width='33%'></td>

            </tr>

            <tr>

                <td colspan='3'>

                    <table width='100%' border='0'>

                        <tr>

                            <td class='padLeft padBigTop padBigBottom top' style='Padding-Bottom:0px'width='150'><%'FileID, FileType, Source, PartyID, ItemID 

                            SPS.ShowPicture("True", CDbl("01225896" & htemp("dbID")), "AssociateLogo", "AssociateDetail", ID, 0)%></td>

                            <td class='vP_H1 top' style='Padding-Top:12px'><span colspan='2'>CPUNumber:

                            <%=htemp("dbCPUNumber")%></span>

                            </td>

                            <td class='vP_H1 top' style='Padding-Top:12px'><span colspan='2'>UserName:

                            <%=htemp("dbUserName")%></span>

                            </td>

                        </tr>

                    </table>

                </td>   

            </tR>

        </table>

        </td>

    </tr>

</table>






View output:

Before edit ListCpu:


Editi option: when we click on edit it has to redirect to the new cpu tab and it has to show the previously entered data.





Comments

Post a Comment