I have an issue when changing my asp.net webforms project to semantic UI. Below is one of my forms; when I click the submit button, it triggers an event handler server-side, but I get an empty string instead of what I have input to textbox.
Link that call modal:
Recover Password
Modal's HTML :
<div class="ui small modal" id="recovermodal">
<form class="ui large form" runat="server">
<i class="close icon"></i>
<div class="header">
RECOVER PASSWORD
</div>
<div class="content">
<div class="description">
<div class="field">
<label>E-MAIL</label><%--
<input type="text" name="rev-email" placeholder="E-MAIL">--%>
<input type="text" ID="txtRP_Email" name="rev-email" runat="server" placeholder="E-MAIL" />
</div>
<div class="field">
<label>PHONE NUMBER</label><%--
<input type="text" name="rev-phone" placeholder="PHONE NUMBER">--%>
<input type="text" ID="txtRP_MobileNo" name="rev-phone" placeholder="PHONE NUMBER" runat="server" />
</div>
<div class="custommodalfooter">
<div class="ui reset button offmodal">DISCARD</div>
<asp:LinkButton ID="btnRecoverPassword" runat="server" CssClass="ui green submit right labeled icon button" onclick="dorecover_Click">
<%= base.GetLocalText("html_buttonConfirm")%>
</asp:LinkButton>
<!-- <button class="ui reset button offmodal">DISCARD</button><button class="ui positive right labeled icon button" type="submit"><i class="right arrow icon"></i>
CONFIRM
</button> -->
</div>
</div>
</div>
</form>
</div>
Server side :
Here is where I get Email and MobileNo as empty string
protected void dorecover_Click(object sender, EventArgs e)
{
String Email = txtRP_Email.Value.Trim();
String MobileNo = txtRP_MobileNo.Value.Trim();
}
Please try to get your values from Request.Form.
protected void dorecover_Click(object sender, EventArgs e)
{
String Email = Request.Form.Item["txtRP_Email"].Trim();
String MobileNo = Request.Form.Item["txtRP_MobileNo"].Trim();
}
Maybe there is some conversion to string type is needed before using Trim(). I had no chance to test this code, but in theory this is what you need.
You aren't showing everything, but undisplayed (visible:none) fields are not posted. When the "approve" (ok) button of the dialog is clicked, it may be setting the visibility of the dialog to "none" before the form is posted.
If you handle the onApprove callback of the dialog and return false, that may solve the problem as returning false keeps the modal from hiding.
However, you may need to call dorecover_Click from the onapprove handler itself instead of having it directly on the button if the postback is called before the onApprove handler.
See this question to get you started in the right direction:
Stack Overflow: Calling an ASP.NET EventHandler from JavaScript
Try this :
$('#your-modal-id').modal({ useFlex: false}).modal("show");
$('.ui.dimmer.modals').appendTo('#aspnetForm');
$('.ui.dimmer.modals').css('overflow', 'scroll');
$('#your-modal-id').css('position', 'relative');
Related
I have a button that makes a call to an external url to log in to an accounting program (Xero) using OAuth 2. After receiving the token, etc., the button is hidden and a "Disconnect" button is shown. When the disconnect button is clicked, it is then hidden and the Connect button is displayed again. The problem is if I click the "Connect" button again, on postback it executes the code for the "Disconnect" button again, so I can never repeat the first cycle. The "Connect" button stays and all of the disconnect code runs again. I have tried to capture the postback being called by the first button, so that I could tell the disconnect code not to run again, but it is always null. Even worse, the postback always shows that the "Disconnect" button caused the postback even though it is no longer visible on the page. I do not understand why it is doing this. Both buttons are inside an "Update Panel" so that I can hide/show them.
Here is the button code:
<asp:UpdatePanel runat="server">
<ContentTemplate>
<div class="row" id="XeroNotConnected2" runat="server" visible="false">
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="imgXero" class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<asp:ImageButton runat="server" ID="imgXero" ImageUrl="~/assets/img/icons/connect-white.svg" OnClick="btnXeroConnect_Click" UseSubmitBehavior="False" />
</div>
</div>
</div>
</div>
<div id="XeroConnected" runat="server" visible="false">
<div class="row" >
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="ddlTenants" class="col-sm-3 control-label">Select an Organization:</label>
<div class="col-sm-9">
<asp:DropDownList runat="server" ID="ddlTenants" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="ddlTenants_SelectedIndexChanged"></asp:DropDownList>
</div>
</div>
</div>
</div>
</div>
<div id="XeroConnected2" runat="server" visible="false">
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="btnDisconnect" class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<button type="button" runat="server" class="btn btn-alt3" id="btnDisconnect" onclick="javascript:OpenModal('disconnectConfirm')"><i class="icon s7-plug"></i> Disconnect Xero</button>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
In Page_Load I have:
if(IsPostBack)
{
Control pbControl = GetControlThatCausedPostBack(this.Page);
if (pbControl != null)
{
if (pbControl.ID == "lnkDelete")
{
InitiateConnect = false;
}
}
}
Method used to get Control that caused postback is:
private Control GetControlThatCausedPostBack(Page page)
{
LoggerBA.Log(DB_Context, Path.GetFileName(Request.ServerVariables["SCRIPT_NAME"]), MethodBase.GetCurrentMethod().Name, UtilityBA.LoggerLevel.Debug, "method");
//initialize a control and set it to null
Control ctrl = null;
//get the event target name and find the control
string ctrlName = page.Request.Params.Get("__EVENTTARGET");
if (!String.IsNullOrEmpty(ctrlName))
ctrl = page.FindControl(ctrlName);
//return the control to the calling method
return ctrl;
}
Code in disconnect button is:
protected void lnkDelete_Click(object sender, EventArgs e)
{
if(InitiateConnect == false)
{
InitiateConnect = true;
PageAsyncTask t = new PageAsyncTask(DisconnectTenant);
Page.RegisterAsyncTask(t);
Page.ExecuteRegisteredAsyncTasks();
Session.Remove("OAuthToken");
Session.Remove("xeroToken");
Session.Remove("Tenants");
Session.Remove("xeroTenant");
XeroConnected.Visible = false;
XeroConnected2.Visible = false;
btnDisconnect.Disabled = true;
XeroNotConnected2.Visible = true;
XeroNotConnected1.Visible = true;
}
}
Any assistance is greatly appreciated.
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);
});
});
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.
Ok,
I have a Jquery DataTable, which has a click event on the first column. The click event, calls a function which in turns calls a C# Webmethod to retrieve data to populate within the dialog.
My problem is that I can't seem to get the modal to resize. I use the followin settings, but it makes no difference.
$('#myModal').modal(resizable:true);
this is called at the end of the Function. The Method contains sensistive information, so i can't post it's contents, but the frame of the calls are as follows:
"fnRowCallback": function (nRow, aoData, iDisplayIndex, iDisplayIndexFull) {
if (aoData[11] == 'Duplicate' || aoData[11] == 'Duplicate approved') {
$('td:eq(0)', nRow).html('<a class="Main" onclick="ViewDuplicateDetails
(\'' + aoData[12] + '\', \'' + aoData[4] + '\',\'' + aoData[0] + '\');">' + aoData[0] + '</a>');
function ViewDuplicateDetail(param1, param2, param3, param4)
{
AJAX call code to retrieve the data
success:
append results to the HTML elements of my dialog (div)
$('#myModal').modal(resizable:true);
}
I dont get the handles to resize, and when the site is display on a screen where the resolution is not high, then the bottom of the modal isn't visible.
EDIT
I've included the actually modal, incase there is anything glaringly obvious.
<div id="myModal" class="modal hide fade" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 id="ticket-id">Message: <span id="messageRef"></span><span
id="messageType"></span>
<span id="checkrecord"></span>
<span id="Id"></span>
</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs" id="ticket-tabs">
<li>Record</li>
<li>Found</li>
<li>Comments</li>
<li>Audit</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab5">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</div>
<div class="tab-pane" id="tab6">
<div id="results"></div>
</div>
<div class="tab-pane" id="tab7">
<textarea id="txtComments"></textarea>
</div>
<div class="tab-pane" id="tab8">
<div id="audit"></div>
</div>
</div>
</div>
<div class="modal-footer">
<span id="txtWarning" style="float:left; color:#ff0000">You must
enter a comment before saving!</span>
<button id="btnComplete" class="btn btn-danger">Complete</button>
<button id="btnApprove" class="btn btn-primary">Approve</button>
<button id="btnSave" class="btn btn-primary">Save</button>
<button id="btnConfirmComplete" class="btn btn-danger">Confirm
Completion</button>
<div id="dowJones" style="text-align:left;">
<img src="Media/images/img2.png" width="94" height="20"
alt=""/><br />
</div>
</div>
</div>
I believe you need:
$('#myModal').modal({resizable:true});
resizable is not a native option of Bootstrap's modals.
If you want to use jQuery-ui resizable widget, you should initialize it using an explicit call :
$(function(){
$('#modal').resizable({ /*resizable options*/ })
});
See resizable examples and api doc.
If you want to have the initial dialog fit into the screen, you should add some code to check whether the dialogue fits when opened ( $('#modal').on('shown', function(){ ... }) ), by checking the dialog's dimensions against the viewport dimensions, and adjust it if the dialog falls outside.
may be this help:
$('#myModal').modal(...).resize(function(){/*code on resizing*/});
UPDATE
try set size for #myModal or it part in css in percent
I'm quite new on aspx development, and I'm struggling a lot with the connection of aspx code and aspx.cs, precisely I've following problem :
DisplayChars.aspx :
<form id="form1" runat="server">
<div>
<div>Champion name: </div> <div><input id="Champ_name" type="text" /></div>
<div>Champion Icon URL: </div> <div><input id="Champ_icon" type="text" /></div>
<div>Champion Subtext: </div> <div><input id="Champ_subtext" type="text" /></div>
<div> Free to play :</div><div><input id="Champ_freetoplay" type="checkbox" />
</div>
<div>Positions:</div>
<div>
<input id="Top" type="checkbox" /> Top
<input id="Mid" type="checkbox" /> Mid
<input id="Jungle" type="checkbox" /> Jungle
<input id="Carry" type="checkbox" /> Carry
<input id="Support" type="checkbox" /> Support
</div>
</div>
<input id="Champ_Submit" type="submit" value="submit" />
DisplayChars.aspx.cs
if (IsPostBack)
{
//NameValueCollection nvc = Request.Form.GetValues
//Champion t1 = new Champion(Request.Form.Get("Champ_Name"), Int32.Parse(Request.Form.Get("Champ_freetoplay")), Request.Form.Get("Champ_subtext"), Request.Form.Get("Champ_description"), "10110");
//t1.persistChampion();
string temp = Request["Champ_name"];
So I'm struggling with getting the Form-values some how.
I've tried Request.Form.GetValues,Request.Form.Get even Request["Form_id_Name"].
The Question is, if this approach is even right, as I've experience in Object-oriented programming, but not in this combination of HTML aspx pseudo server code, and a cs-file behind it.
If you add runat="server" to you HTML tags and you can access their properties from the code-behind:
// DisplayChars.aspx:
<input id="Champ_name" type="text" runat="server" />
...
// DisplayChars.aspx.cs:
string champName = Champ_name.Value;
While you can do
Request.Form["Champ_name"]
It is not the asp.net way. You have to make the element a server control by adding runat="server" so you can reference it from code behind.
<asp:Button ID="Champ_name" runat="server" OnClick="button_Click" Text="Hello World" />
Then in your codebehind can add a method to fire when that button is clicked:
protected void button_Click(object sender, EventArgs e)
{
// logic processing here
}
If you needed to find out what the text of the button is:
string text = Champ_name.Text;
Basically, ASP.NET doesn't rely on Request.Form normally. You set the controls to runat="server" so you can address them directly from code-behind on postback.