I have the following code:
<asp:Button ID="btnDelete" runat="server" Text="Delete Report" OnClientClick="return confirm ('This will delete the report. Continue?');" />
Once the user clicks on OK how do I get the server side script to fire that actually deletes.
I had
OnClick="btnDelete_Click"
on the above code but nothing
happened.
Open your code behind and add
public void btnDelete_Click(object sender, EventArgs e)
{
//Your logic here
}
You can use bootstrap's modal.
<asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="showDialog_Event" />
Page:
<div class="container">
<div id="modalDialog" class="modal" role="dialog">
<div class="modal-dialog modal-sm" data-backdrop="static">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title text-center">
<h4>Message</h4>
</div>
</div>
<div id="modalBodyDialog" class="modal-body">
</div>
<div class="modal-footer">
<asp:Button runat="server" ID="btnOkDialog" CssClass="btn btn-default" Text="Ok" OnClick="btnOkDialog_Click" />
<input type="button" value="Cancel" data-dismiss="modal" />
</div>
</div>
</div>
</div>
Code:
public void showDialog_Event(object sender, EventArgs e) {
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(#"<script type='text/javascript'>");
sb.Append("$('#modalDialog').modal({'backdrop': 'static', 'keyboard': 'static', 'show': true});");
sb.Append("$('#modalBodyDialog').html('<ul><li>");
sb.Append(message);
sb.Append("</li></ul>')");
sb.Append(#"</script>");
Page.ClientScript.RegisterStartupScript(this.GetType(), "ModalScript", sb.ToString(), false);
}
Get event confirm (btn OK)
public void btnOkDialog(object sender, EventArgs e) {
// your code for delete
}
This example need bootstrap and jquery.
Related
I use boostrap modals for saving data on an ASP.NET Web page and I'm having an issue when users by mistake clicks more than once the "Save" button on the modal. The event fires the number of times the user presses the click. This happens because the modal doesn't closes immediatly. It takes about 1 second to close, enough for the user to click more than once the button.
My database is validated (I'm using Entity Framework) so, there's no duplicate values inserted. But if the user clicks two times, it tries to insert the record two times, and the error message is displayed.
How can I prevent this?
This is the modal code:
<asp:Panel runat="server" ID="pnlBank" DefaultButton="btnSaveBank">
<div class="modal fade" id="modBank" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4 class="modal-title">Banco</h4>
</div>
<div class="modal-body">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div class="form-group">
<div class="row">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<asp:TextBox ID="txtBankName" CssClass="form-control" runat="server" MaxLength="150"></asp:TextBox>
</div>
</div>
<label class="col-md-2 control-label">Address</label>
<div class="col-md-10">
<asp:TextBox ID="txtBankAddress" CssClass="form-control" runat="server" MaxLength="150"></asp:TextBox>
</div>
</div>
<div class="row">
<label class="col-md-2 control-label">Phone</label>
<div class="col-md-10">
<asp:TextBox ID="txtBankPhone" CssClass="form-control" runat="server" MaxLength="15"></asp:TextBox>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
Cerrar
<asp:Button ID="btnSaveBank" runat="server" Text="Save" CssClass="btn btn-primary" OnClick="btnSaveBank_Click" />
</div>
</div>
</div>
</div>
</asp:Panel>
And this is the code behind:
protected void btnSaveBank_Click(object sender, EventArgs e)
{
Bank newBank = new Bank();
newBank.Name = txtBankName.Text;
newBank.Address = txtBankAddress.Text;
newBank.Phone = txtBankPhone.Text;
using (bankEntity)
{
try
{
bankEntity.Bank.Add(newBank);
bankEntity.SaveChanges();
lblResult.Text = "Bank successfully saved";
ObtenerBancos();
}
catch (Exception ex)
{
lblResult.Text = "Error when saving bank: " + ex.Message;
}
}
}
You can try disabling the save button and closing the modal via jQuery and once the modal is closed you can re-enable the save button again using jQuery. Just make sure that the jQuery event handlers are defined after btnSaveBank_Click so that btnSaveBank_Click takes precedence over the close/hide trickery:
$(document).ready(function () {
$("#btnSaveBank").click(function() {
$(this).prop("disabled", true);
$("#modBank").modal("hide");
});
$("#modBank").on("hidden.bs.modal", function() {
$("#btnSaveBank").prop("disabled", false);
});
});
I'm using a bootstrap modal to save and update some sort of events. My asp code is:
<asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="myModal" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Add event:</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<h4>Date:</h4>
</div>
<div class="col-md-12">
<asp:TextBox ID="TextBoxDate" runat="server" Width="100" CssClass="rbl"></asp:TextBox>
<asp:ImageButton ID="ImageButton2" ImageUrl="~/calendar.png" CssClass="rbl" runat="server" Height="20" Width="20" />
<ajaxToolkit:CalendarExtender ID="CalendarExtender2" TargetControlID="TextBoxDate" runat="server" PopupButtonID="ImageButton2" Format="dd/MM/yyyy" />
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<h4>List</h4>
</div>
<div class="col-md-12">
<asp:ListBox ID="ListBoxEgk" runat="server"></asp:ListBox>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<h4>info from:</h4>
</div>
<div class="col-md-12">
<asp:TextBox ID="name" runat="server"></asp:TextBox>
</div>
<div class="col-md-12">
<h4>to:</h4>
</div>
<div class="col-md-12">
<asp:ListBox ID="ListBoxEpik" runat="server"></asp:ListBox>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<h4>Kind of event:</h4>
</div>
<div class="col-md-12">
<asp:ListBox ID="ListBoxEidosSum" runat="server"></asp:ListBox>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="col-md-12">
<h4>Event desc:</h4>
</div>
<div class="col-md-12">
<asp:TextBox ID="TextBoxSumvan" runat="server" Height="210px" MaxLength="500" Rows="12" Width="380px" TextMode="MultiLine"></asp:TextBox>
</div>
</div>
<div class="col-md-5">
<div class="col-md-12">
<h4>Actions:</h4>
</div>
<div class="col-md-12">
<asp:TextBox ID="TextBoxE" runat="server" Height="210px" MaxLength="500" Rows="12" Width="380px" TextMode="MultiLine"></asp:TextBox>
</div>
</div>
<div class="col-md-2">
<div class="col-md-12">
<h4>Given to:</h4>
</div>
<div class="col-md-12">
<asp:ListBox ID="ListBoxUsers" runat="server"></asp:ListBox>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="cancelBtn" CssClass="btn btn-default" runat="server" data-dismiss="modal" Text="Ακύρωση" OnClick="cancelBtn_Click" />
<asp:Button ID="saveBtn" runat="server" Text="Αποθήκευση" CssClass="btn btn-primary" OnClick="Btn_save_Click" />
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I'm "calling" this modal by:
img ID="addEvent" src="/very-basic-plus-icon.png" data-toggle="modal" data-target=".bs-example-modal-lg" Height="20" Width="20" />
and it works. The modal is showing up and before I used <asp:Updatepanel> it was working perfect but I want to be able to pick events from a grid and show the this modal, update them if i have to etc. The image button bellow is calling a method from behind
<asp:ImageButton ID="imgEdit" ImageUrl="~/edit.png" runat="server" OnClick="imgEdit_Click" />
and what's running from behind is:
static Boolean indexY = false;
static newEvent event4Update = new newEvent();
protected void imgEdit_Click(object sender, ImageClickEventArgs e)
{
GridViewRow gvRow = (GridViewRow)(sender as Control).Parent.Parent;
int index = gvRow.RowIndex;
var item = searchEvents.ElementAt(index);
CMMS_IServiceClient client = new CMMS_IServiceClient();
event4Update = client.returnRowForUpdate(item.RowId);
client.Close();
TextBoxDate.Text = Convert.ToString(event4Update.ImerominiaSumvantos);
name.Text = event4Update.Name;
ListBoxEgk.SelectedValue = event4Update.From;
ListBoxEpik.SelectedValue = event4Update.TroposEpikoinwnias;
UserListBox.SelectedValue = event4Update.AssignmentTo;
TextBoxSumvan.Text = event4Update.Sumvan;
ListBoxEidosSum.SelectedValue = event4Update.TypeOfEvent;
TextBoxEnergeies.Text = event4Update.Actions;
ListBoxUsers.SelectedValue = event4Update.To;
indexY = true;
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal();", true);
upModal.Update();
}
Atm my modal is working perfect. Everything is loaded and I can edit but when I press save which is inside my modal there are problems.
protected void Btn_save_Click(object sender, EventArgs e)
{
CMMS_IServiceClient client = new CMMS_IServiceClient();
if (ListBoxEgk.SelectedValue.ToString() == "" ||
ListBoxEpik.SelectedValue.ToString() == "" ||
TextBoxSumvan.Text == "" ||
ListBoxEidosSum.SelectedValue.ToString() == "")
{
Page.ClientScript.RegisterStartupScript(GetType(), "Scripts", "<script>alert('Some field is empty.');</script>");
}
else
{
if (indexY == true)
{
IFormatProvider culture = new System.Globalization.CultureInfo("fr-FR", true);
newEvent updateEvent = new newEvent();
updateEvent.RowId = event4Update.RowId;
updateEvent.ImerominiaSumvantos = DateTime.Parse(TextBoxDate.Text, culture, System.Globalization.DateTimeStyles.AssumeLocal);
updateEvent.Name = name.Text;
updateEvent.From = ListBoxEgk.SelectedValue.ToString();
updateEvent.TroposEpikoinwnias = ListBoxEpik.SelectedValue.ToString();
updateEvent.To = UserListBox.SelectedValue.ToString();
updateEvent.Sumvan = TextBoxSumvan.Text;
updateEvent.TypeOfEvent = ListBoxEidosSum.SelectedValue.ToString();
updateEvent.Actions = TextBoxEnergeies.Text;
updateEvent.AssignmentTo = ListBoxUsers.SelectedValue.ToString();
updateEvent.EventState = (TextBoxEnergeies.Text != "") ? true : false;
client.updateRow(updateEvent);
indexY = false;
event4Update = null;
}
else
{
IFormatProvider culture = new System.Globalization.CultureInfo("fr-FR", true);
newEvent addEvent = new newEvent();
addEvent.ImerominiaSumvantos = DateTime.Parse(TextBoxDate.Text, culture, System.Globalization.DateTimeStyles.AssumeLocal);
addEvent.Name = name.Text;
addEvent.From = ListBoxEgk.SelectedValue.ToString();
addEvent.TroposEpikoinwnias = ListBoxEpik.SelectedValue.ToString();
addEvent.To = UserListBox.SelectedValue.ToString();
addEvent.Sumvan = TextBoxSumvan.Text;
addEvent.TypeOfEvent = ListBoxEidosSum.SelectedValue.ToString();
addEvent.Actions = TextBoxEnergeies.Text;
addEvent.AssignmentTo = ListBoxUsers.SelectedValue.ToString();
addEvent.EventState = (TextBoxEnergeies.Text != "") ? true : false;
client.write(addEvent);
}
client.Close();
ListBoxEgk.ClearSelection();
ListBoxEidosSum.ClearSelection();
ListBoxEpik.ClearSelection();
name.Text = "";
TextBoxEnergeies.Text = "";
TextBoxSumvan.Text = "";
TextBoxDate.Text = "";
ListBoxUsers.ClearSelection();
searchBtn_Click(sender, e);
//ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal();", true);
//upModal.Update();
}
}
The code is also a huge mess, if anyone can suggest better ways to work with the monster i made please let me know.
Your save button has nothing to dismiss the modal. And I suspect your cancel button's data-dismiss attribute may be interering with the postback mechanism.
Try this:
<asp:Button ID="cancelBtn" CssClass="btn btn-default" runat="server" Text="Ακύρωση" OnClientClick="dismissModal();" OnClick="cancelBtn_Click" />
<asp:Button ID="saveBtn" runat="server" Text="Αποθήκευση" CssClass="btn btn-primary" OnClick="Btn_save_Click" OnClientClick="dismissModal();" />
function dismissModal() {
$('#myModal').modal('hide');
}
The OnClientClick client side method will run, then a postback will occur and your OnClick server side functions will run.
Net webform application implementing Bootstrap. Currently I have a label and a text box displayed in Bootstrap - Modal to which Im trying to send the data from the server c# file. For some reason the Modal disappears and doesnt show anything on the UI.
ASPx file
<!-- Button to trigger modal -->
Launch demo modal
<%--<asp:Button ID="Button1" role="button" type="button" runat="server" Text="Modal" class="btn btn-lg btn-success" data-toggle="modal" data-target="#myModal"/>--%>
<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
C# file
protected void Click_Me(object sender, EventArgs e)
{
Label1.Text = "test label";
TextBox1.Text = "text box text";
modal_Img.Src = "test path";
}
Please advice
ps : do i need to use an Update panel ?
An Update Panel would likely not be the best solution for this because only a partial amount of the html is updated and the Javascript/Jquery for the modal is not being called again after the partial postback.
You need some way of invoking the Javascript again after the postback. You could invoke the Javascript needed to open the modal on your Click_Me event.
protected void Click_Me(object sender, EventArgs e)
{
// do stuff
Label1.Text = "test label";
TextBox1.Text = "text box text";
modal_Img.Src = "test path";
// make sure the modal opens
ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "script", "<script type='text/javascript'>$( document ).ready(function() { $('#MyModal').modal('show')});</script>", false);
}
I have a file upload located in div element. The form element is located in master file. HasFile property always returns false on first postback.
Asp.net Code
<div class="form-horizontal center-block" role="form" id="uploadFilesForm">
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="fileUpload" CssClass="col-md-4 control-label">Select Files</asp:Label>
<div class="col-md-8">
<asp:FileUpload runat="server" ID="fileUpload" AllowMultiple="True" />
</div>
</div>
<div class="form-group">
<asp:Label runat="server" CssClass="col-md-4 control-label"></asp:Label>
<div class="col-md-8">
<asp:Button runat="server" id="uploadButton" text="Upload" CssClass="btn btn-primary" OnClick="uploadButton_Click"/>
</div>
</div>
</div>
C# Code:
protected void Page_Load(object sender, EventArgs e)
{
Page.Form.Enctype = "multipart/form-data";
}
protected void uploadButton_Click(object sender, EventArgs e)
{
if (fileUpload.HasFile) // this returns false on first postback
{
//more code
}
}
Add the following code in your OnInit() method:
Page.Form.Attributes.Add("enctype", "multipart/form-data");
How to display data in Bootstrap Modal when link button click in ASP.NET. In my code
When i click on link button Modal is opening, but assign values are not displaying. Please tell me how to display modal with assigned values.
Thanks.
.aspx Code:
<asp:LinkButton ID="linkButton8" runat="server" data-toggle="modal" data-target="#myModal" OnClick="linkButton_Click">CIS Information</asp:LinkButton>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel" align="center">Candidate Information Sheet</h4>
</div>
<div class="modal-body">
<table class="table table-bordered" align="center">
<tr>
<td>Name</td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
<td>Email</td>
<td>
<asp:TextBox ID="txtEnail" runat="server"></asp:TextBox></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-primary" data-ismiss="modal">Close</button>
</div>
</div>
</div>
</div>
C# Code:
protected void linkButton_Click(object sender, EventArgs e)
{
txtName.Text = "Name";
txtEnail.Text = "Mail#gmail.com";
}
Remove the data-toggle and update the code behind to be like this:
protected void linkButton_Click(object sender, EventArgs e)
{
txtName.Text = "Name";
txtEnail.Text = "Mail#gmail.com";
Page.ClientScript.RegisterStartupScript(GetType(), "modelBox", "$("#myModal").modal('show');", true);
}
It is better though to make the link button has a client side click event that gets the data through ajax, set the textboxs values and use the same modal('show') JavaScript function to display the modal box, this will be more efficient and user friendly.
Try adding UseSubmitBehavior="false" and using an asp:button instead.
<asp:Button ID="btnModal" runat="server" data-toggle="modal" data-target="#myModal" OnClick="linkButton_Click" UseSubmitBehavior="false">CIS Information</asp:Button>
The UseSubmitBehavior attribute determines whether the Button uses the browsers submit functionality or ASP.NET postback. By default it is set to true.
Edit
Due to linkButton not having the "UseSubmitBehavior" property.