What is Bootstrap Modal: 2015

How to implement Paging in GridView (ASP.NET C# Example)

Coding in the Example.aspx file is given in Red

<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" ID="ScriptManager1" />
<asp:Panel ID="MainPanel" runat="server" ScrollBars="Both" Height="500" Width="99%">

<asp:UpdatePanel ID="upCrudGrid" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server"
Width="95%" HorizontalAlign="Center"
OnRowCommand="GridView1_RowCommand"
OnRowDataBound="GridView1_RowDataBound"
AutoGenerateColumns="false"
AllowPaging="true"
OnPageIndexChanging="GridView1_PageIndexChanging"
DataKeyNames="PoId"
CssClass="table ">
<Columns>
<asp:TemplateField HeaderText="SNo." HeaderStyle-Width="20px">
<ItemTemplate>
<asp:Label ID="lblSerial" runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>

<asp:ButtonField CommandName="detail"
ControlStyle-CssClass="btn btn-info btn-mini"

.................

</body>
</html>
======================================
Coding in the Example.aspx.cs file is given in Red

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
if (Session["SortedView"] != null)
{
GridView1.DataSource = Session["SortedView"];
GridView1.DataBind();
}
else
{
GridView1.DataSource = GetDataSource(sPublicSql);
GridView1.DataBind();
}
}

The GetDatasource function can be created as shown below:

public DataTable GetDataSource(string query)
{
SqlDataAdapter da = new SqlDataAdapter(query, conn);
DataTable dt1 = new DataTable();
da.Fill(dt1);
return dt1;
}

What is Bootstrap Modal?

It is a kind of Popup used by Website Designers.

The modal will be looking like this:

example of how a bootstrap modal will look like

The popup you see is called as Modal

The gray color background is called as Overlay

Behind the gray color background is the Main Page

Inside the modal, there are three sections:

In the above image,the area which contains "Edit Record" is called as HEADER, the middle portion is called as BODY. The bottom portion which contains two buttons is called as FOOTER.

======================================

A smallest and complete code for bootstrap modal is given below. copy and past it in a text file and save it as test.html and open it.

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<button type="button" class="btn" data-toggle="modal" data-target="#myModal">Open Modal</button>

CONTENTS GOES HERE

</div>

</body>

</html>

Following is the output for the above code:

===================================================================================

Why it is called as BOOTSTRAP?

To create the above modal design, you need lot of javascript and css. But a group of people took pain and created a framework with complicated javascript and css. This framework is called as Bootstrap.

Finally the webdesigner need not know or understand this complicated javascript. With few lines of code, he can create such popup.

Bootstrap was mainly designed for RESPONSIVE WEBSITE.

What is the meaning of "Responsive"?. A website whose designs automatically changes its look and feel depending on whether you view on a pc or mobile phone.

===============================

A modal code will be like this:

<h4 class="modal-title" id="myModalLabel">This is My Title</h4>

</div>

<h3>Here goes the contents of the modal</h3>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

========================================================================

The above image is the modal created by the above source code.

For creation and testing of your own modal, please visit this site: http://www.bootply.com/88364

In the above code, the id of the modal is "myModal".

It is normally not visible (see the code class="modal fade")

To bring this modal to life, the link will be like this:

<a href="#" class="btn" data-toggle="modal"

data-target="#myModal">Click Here</a>

When you click the link, the target ie the modal with id "myModal" will be displayed.

The display command is data-toggle="modal"

Code definitions:

× = this is the html code to show "x" symbol, which is shown at the right top of the modal.

data-dismiss="modal" :::: This attribute closes the modal

==================================

Code for putting a form inside the bootstrap modal popup:

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<button type="button" class="btn" data-toggle="modal" data-target="#myModal">Open Modal</button>

<tr><td>Designation</td>

</tr></table>

</form>

</div>

</body>

</html>

============================================
<div class="modal-dialog modal-sm"> makes the modal small
<div class="modal-dialog modal-lg"> makes the modal larger
data-toggle="modal" opens the modal window

data-target="#myModal" tell which modal is to be opened
<div id="myModal" class="modal fade" role="dialog"> in this line, if you remove "fade", the modal will be shown but will not be showing the sliding effect or slowly fadding effect.

What is Bootstrap Modal

Thursday, July 2, 2015

ASP.NET C# Code for PAGING in GridView

Wednesday, July 1, 2015

How to Make Bootstrap Modal Draggable?

Monday, June 22, 2015

What is Bootstrap Modal