hello friends i want to use Bootstrap like icons with button but when i try using it in my asp.net project the image doesnt shows can you please tell me how to use bootstrap icon with buttons i have tried this code
<i class="icon icon-ok"><asp:Button ID="SubmitBtn" runat="server" OnClick="SubmitBtn_Click" Text="Submit"
CssClass="btn btn-small btn-primary" /></i>
and this one too
<asp:Button ID="SubmitBtn" runat="server" OnClick="SubmitBtn_Click" Text="Submit"
CssClass="btn btn-small btn-primary" ><i class="icon icon-ok"></i> </asp:Button>
also i tried using this <asp:Button ID="SubmitBtn" runat="server" OnClick="SubmitBtn_Click" Text="Submit <i aria-hidden=true class=icon-ok icon-white></i>" CssClass="btn btn-small btn-primary" />
but it dont work please someone post a solution how to make it work ???
LinkButton, like this...
<asp:LinkButton ID="SubmitBtn" runat="server" OnClick="SubmitBtn_Click" CssClass="btn btn-small btn-primary"><i class="icon icon-ok"></i> Submit</asp:LinkButton>
https://stackoverflow.com/a/11373500/1315626
<button type="button" onserverclick="Unnamed_ServerClick" class="btn btn-default " runat="server" > <span class="glyphicon glyphicon-search"></span></button>
Related
I try to delete data that display in GridView after confirm it using twitter bootstrap. my gridview with modal-dialog as follow
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title clearfix ">
<div>
<b>Name</b>
<div style="float: left;">
</div>
</div>
</h2>
</div>
<div class="panel-body">
<div>
<asp:GridView ID="gridView" DataKeyNames="Id" runat="server"
CssClass="table table-striped table-bordered table-hove"
AutoGenerateColumns="False" HeaderStyle-Font-Bold="true"
OnRowEditing="gridView_RowEditing"
OnRowCancelingEdit="gridView_RowCancelingEdit"
OnRowUpdating="gridView_RowUpdating"
OnRowDeleting="gridView_RowDeleting"
OnRowCommand="gridView_RowCommand">
<Columns>
<asp:TemplateField HeaderText="ID" ControlStyle-Width="0px">
<ItemTemplate>
<asp:Label ID="txtid" runat="server" Text='<%#Eval("Id") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblid" runat="server" Width="40px" Text='<%#Eval("Id") %>' />
</EditItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblLName" runat="server" Text='<%#Eval("Location_name") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtLName" CssClass="form-control" runat="server" Text='<%#Eval("Location_name") %>' />
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="LocName" AutoCompleteType="Disabled" runat="server" />
<asp:RequiredFieldValidator ID="ReqBrName" runat="server" ControlToValidate="BrName" Display="Dynamic" CssClass="valid" ErrorMessage="?" ValidationGroup="validaiton" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Options">
<ItemTemplate>
<asp:LinkButton ID="lbEdit" CssClass="btn btn-default btn-sm " runat="server" CommandName="Edit">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit</asp:LinkButton>
<asp:LinkButton ID="lbDelete" CssClass="btn btn-default btn-sm " runat="server" CommandArgument='<%#Eval("Id")%>' OnClientClick="return ConfirmDelete()">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete</asp:LinkButton>
<%-- Delete Form --%>
<div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="delete" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close glyphicon glyphicon-remove" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title" id="">Delete the data</h4>
</div>
<div class="modal-body">
Are You sure?
<asp:Label ID="lblLName1" runat="server" Text='<%#Eval("id") %>' />
<br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default glyphicon glyphicon-remove" data-dismiss="modal">Cancel</button>
<asp:LinkButton ID="lbde" CssClass="btn btn-default btn-sm " runat="server" CommandName="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete
</asp:LinkButton>
</div>
</div>
</div>
</div>
<%-- Delete Form --%>
</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="lbUpdate" CssClass="btn btn-default btn-sm " runat="server" CommandName="Update">
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Update
</asp:LinkButton>
<asp:LinkButton ID="lbCancel" CssClass="btn btn-default btn-sm " runat="server" CommandName="Cancel">
<span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span> Cancel
</asp:LinkButton>
</EditItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle Font-Bold="True"></HeaderStyle>
</asp:GridView>
</div>
</div>
</div>
and my JavaScript function is
<script>
function ConfirmDelete() {
$('#DeleteModal').modal()
return false;
}
</script>
so when I try to delete the record by using the popup model it's not working, the model will work fine but the data in lblLName1 allows will be the first record ID so when I confirm the first record will be deleted
could anyone helps me in that??
Thanks everyone
after trying several ways I found the solution.
first, change the calling button from
<asp:LinkButton ID="lbDelete" CssClass="btn btn-default btn-sm " runat="server" CommandArgument='<%#Eval("Id")%>' OnClientClick="return ConfirmDelete()"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete</asp:LinkButton>
to
<asp:LinkButton ID="lbDelete" CssClass="btn btn-default btn-sm" runat="server" CommandArgument='<%#Eval("Id")%>'
OnCommand="lbDelete_Command" CommandName='<%#Eval("Location_name")%>'>
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> حذف</asp:LinkButton>
and in c# call function under lbDelete_Command
protected void lbDelete_Command(object sender, CommandEventArgs e)
{
foreach (GridViewRow row in gridView.Rows)
{
HiddenField hf_id = row.FindControl("hf_Del_ID") as HiddenField;
Label l_name = row.FindControl("lb_Del_Name") as Label;
l_name.Text = e.CommandName.ToString();
hf_id.Value = e.CommandArgument.ToString();
}
ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { ConfirmDelete(); });", true);
}
and I edit the fields under modal-body division like follow
<div class="modal-body">
<asp:HiddenField ID="hf_Del_ID" runat="server" />
Are You sure?
<h4><asp:Label ID="lb_Del_Name" runat="server"/></h4>
</div>
I use the hidden field hf_Del_ID for delete purpose
and the label lb_Del_Name for display only
and also the deleting SQL in C# as follow
try
{
HiddenField hf_id = (HiddenField)gridView.Rows[e.RowIndex].FindControl("hf_Del_ID");
con.Open();
SqlCommand cmd = new SqlCommand("delete from TABLE_NAME where Id=" + hf_id.Value, con);
int result = cmd.ExecuteNonQuery();
con.Close();
if (result == 1)
{
loadData();
lbl_msgDet.ForeColor = Color.Red;
lbl_msgDet.Text = " delete done";
}
}
catch (SqlException ex)
{
lbl_msgDet.ForeColor = Color.Red;
lbl_msgDet.Text = (String)GetGlobalResourceObject("Err_msg", "MsgDeleteErr") + "<br/>" + ex.Message;
}
ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { CallMsg(); });", true);
I hope the solution helps
Thanks
this works for me... very easy
<asp:DataGrid runat="server" ID="dgMyGrid" ValidationGroup="grdMyGrid" OnDeleteCommand="dgRel_DeleteCommand" AutoGenerateColumns="false">
<Columns>
<asp:TemplateColumn HeaderText="FirstColumn">
<ItemTemplate>
<asp:Label runat="server" ID="FirstColumnID" Text='<%# getFirstColumnName(Eval("FirstColumn").ToString())%>'></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<ItemTemplate>
<div class="modal" id="myModal<%#Eval("MyIDToBound").ToString()%>">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirm</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p id="modal-help-text">Are you sure to remove item?</p>
</div>
<div class="modal-footer">
<asp:Button runat="server" ID="btnDelete" CssClass="btn btn-secondary" CommandName="Delete" Text="Yes"/>
<button type="button" class="btn btn-secondary cancel" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<button type="button" data-toggle="modal" data-target="#myModal<%#Eval("MyIDToBound").ToString()%>">
<asp:Label runat="server" ID="lblDeleteButton" Text="Delete"></asp:Label>
</button>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
I'm trying to insert the icon trash from Bootstrap but I can't, so I don't know if that is possible.
The only thing that I can insert was the class of the Button
<asp:buttonfield buttontype="button" ControlStyle-CssClass="btn btn-danger" Text="Details" commandname="Delete" />
So, does someone knows how can I put the Glyphicon of trash? I'm using the Button into a GridView
How my button looks like
How I want
<asp:GridView runat="server" ID="gridTest">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-trash"></span>Trash
</button>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
In my asp.net webform project I'm trying to add asp:panel for search field. I need to use defaultbutton attribute.
<div class="input-group">
<asp:Panel ID="pnlSearch" runat="server" DefaultButton="btnSearch">
<input class="form-control" placeholder="Search" autocomplete="off" runat="server" onkeypress="searchclick('btnSearch',event);" id="txtSearch" />
<div class="input-group-btn">
<button class="btn btn-default" id="btnSearch" itemid="btnSeach" onserverclick="btnSearch_ServerClick" runat="server" type="submit"><i
class="glyphicon glyphicon-search"></i></button>
</div>
</asp:Panel>
</div>
When I try to do this I took error like.
error screen
If I just remove defaultbutton attribute the error is gone.
I'm using master page for my web application there is a content page we can call it Banks data has a GridView displays all banks and has an Edit,Add,Delete buttons
I wand display a bootstrap modal with input data to edit or add new bank and to validate using asp RequiredFieldValidator
this is the ASPX Code
<Columns>
<asp:BoundField DataField="bankCode" HeaderText="Bank Code" />
<asp:BoundField DataField="bankName" HeaderText="Bank Name" />
<asp:TemplateField >
<ItemTemplate >
<asp:LinkButton ID="lb_Edit" runat="server" CssClass="btn btn-sm btn-default" data-toggle="modal" data-target="#AddBankModal" CommandName="BankEdit" CommandArgument='<%#Eval("bankCode") %>' OnClick="lb_Edit_Click"><strong>Edit</strong></asp:LinkButton>
<asp:LinkButton ID="LB_Delete" runat="server" CssClass="btn btn-sm btn-danger" CommandName="BankDelete" CommandArgument='<%#Eval("bankCode") %>'><strong>Delete</strong></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle Height="15px" HorizontalAlign="Right" VerticalAlign="Middle" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnStringDb1 %>" SelectCommand="SELECT [bankCode], [bankNameAr], [bankNameEng] FROM [Bank]"></asp:SqlDataSource>
<!-- Modal -->
<div id="AddBankModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="text-align:right">Bank Data </h4>
</div>
<div class="modal-body">
<asp:Label ID="lblBankCode" runat="server" Text="Bank Code" CssClass="label" style="text-align:right;font-weight:bold"></asp:Label>
<asp:TextBox ID="txtBankCode" runat="server" CssClass="form-control"></asp:TextBox>
<asp:Label ID="lblBankNameAr" runat="server" Text="Bank Name" CssClass="label" style="text-align:right;font-weight:bold"></asp:Label>
<asp:TextBox ID="txtBankNameAr" runat="server" CssClass="form-control"></asp:TextBox>
<div class="row" >
<div class="col-lg-12">
<asp:Button ID="btnUpdateBank" runat="server" Text="Save Data" CssClass="btn btn-outline btn-primary" style="width:100px" OnClick="btnUpdateBank_Click" />
<button type="button" class="btn btn-outline btn-primary" data-dismiss="modal" style="width:100px">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
Does any one have any Ideas to do this using ASP code behind without using Jquery
May be you need some thing like this.Remember two things
1.Dont forget to add ClientIDMode="Static" to asp.net control
2.Postback is prevented by e.preventDefault() to add jQuery functionality in click event
<asp:GridView ID="GridView1" runat="server" ClientIDMode="Static">
<Columns>
<asp:TemplateField >
<ItemTemplate >
<asp:LinkButton ID="lb_Edit" runat="server" CssClass="btn btn-sm btn-default" data-toggle="modal" data-target="#AddBankModal" ClientIDMode="Static"><strong>Edit</strong>
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="AddBankModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title" style="text-align: right">
Bank Data
</h4>
</div>
<div class="modal-body">
<asp:Label ID="lblBankCode" runat="server" Text="Bank Code" CssClass="label" Style="text-align: right;
font-weight: bold"></asp:Label>
<asp:TextBox ID="txtBankCode" runat="server" CssClass="form-control"></asp:TextBox>
<asp:Label ID="lblBankNameAr" runat="server" Text="Bank Name" CssClass="label" Style="text-align: right;
font-weight: bold"></asp:Label>
<asp:TextBox ID="txtBankNameAr" runat="server" CssClass="form-control"></asp:TextBox>
<div class="row">
<div class="col-lg-12">
<asp:Button ID="btnUpdateBank" runat="server" Text="Save Data" ClientIDMode="Static" CssClass="btn btn-outline btn-primary"
Style="width: 100px" />
<button type="button" class="btn btn-outline btn-primary" data-dismiss="modal" style="width: 100px">
Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('.btn').on('click', function (e) {
e.preventDefault();
var buttonid = $(this).attr('id');
console.log(buttonid);
if (buttonid == "lb_Edit") {
$('#AddBankModal').modal({
show: true,
backdrop: 'static'
});
}
if (buttonid == "btnUpdateBank") {
//
alert('Do some ajax to send data to Backend');
}
//currentRow.remove();
});
})
</script>
I am trying to hide a Panel in Gridview but I get
Object reference not set to an instance of an object.
Here is the code I am using:
Protected Sub gvTally_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvTally.RowDataBound
If e.Row.Cells(2).Text = "Incomplete" Then
Dim Panelhide As Panel = CType(e.Row.FindControl("Panel1"), Panel)
Panelhide.Visible = False
Else
Dim Panelhide As Panel = CType(e.Row.FindControl("Panel1"), Panel)
Panelhide.Visible = True
End If
End Sub
And here is my Gridview:
<asp:GridView ID="gvTally" runat="server" EnableModelValidation="True"
AllowSorting="True" OnRowDataBound="gvTally_RowDataBound" class="table table-condensed table-striped table-bordered table-hover no-margin" AutoGenerateColumns="False" Font-Size="Small">
<Columns>
<asp:BoundField DataField="Company" HeaderText="Company">
<ItemStyle Width="180px" />
</asp:BoundField>
<asp:BoundField DataField="Submitted" HeaderText="Submitted" />
<asp:BoundField DataField="Variance" HeaderText="Variance" />
<asp:BoundField DataField="Accepted" HeaderText="Accepted" />
<asp:TemplateField HeaderText="Action" ShowHeader="False">
<ItemTemplate>
<asp:Button ID="Button3" runat="server" CssClass="btn btn-warning btn-small" Text="Unaccept" CommandName="Unaccept" Visible="False" />
<asp:Button ID="Button2" runat="server" CssClass="btn btn-success btn-small hidden-phone" Text="Accept" CommandName="Accept" />
<asp:Panel ID="Panel1" runat="server">
<a href="#accSettings3" role="button" class="btn btn-success btn-small hidden-phone" data-toggle="modal" data-original-title="">Accept
</a>
<div id="accSettings3" class="modal hide fade" tabindex="-3" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 id="myModalLabel3">Accept Validation
</h4>
</div>
<div class="modal-body">
<div class="row-fluid">
Are you sure you want to accept the tally with the variance off?
</div>
</div>
<div class="modal-footer">
<asp:Button ID="btnacceptchanges" class="btn btn-primary" runat="server" Text="Yes" />
<button class="btn" data-dismiss="modal" aria-hidden="true">
No
</button>
</div>
</div>
</asp:Panel>
<asp:Button ID="Button1" runat="server" CssClass="btn btn-info btn-small" Text="View" CommandName="View" />
</td>
</tr>
</ItemTemplate>
<ItemStyle Width="160px" />
</asp:TemplateField>
</Columns>
</asp:GridView>
I am not sure why I cannot hide this Panel that contains other HTML and another Button Control even when I use FindControl.
I have other FindControls that work perfectly fine, but this one gives me the error that it cannot find the Panel1.
I am using the panel just to hide the code inside it.
This probably has nothing to do with the panel.
Make sure you have a data row and not a header or something.
If e.Row.RowType = DataControlRowType.DataRow Then
...
End If