I have a modal that pops up when you click a button, inside that modal I have a save button. When that save button is pressed I would like to fire some C# code in a with an OnClick function....
Can anyone tell me why this isn't working for me?
ASP.NET
<div class="modal fade" id="deviceModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Select</h4>
</div>
<div class="modal-body">
<asp:DropDownList ID="drpDownID" runat="server" CssClass="fields" EnableViewState="true">
<asp:ListItem Text="<Select>" Value="0" />
</asp:DropDownList>
</div>
<div class="modal-footer">
<asp:Button ID="btnSave" runat="server" Text="Save" data-dismiss="modal" CssClass="btn btn-primary" OnClick="btnSave_Click" />
<asp:Button ID="btnClose" runat="server" Text="Close" data-dismiss="modal" CssClass="btn btn-danger" OnClick="btnClose_Click" />
</div>
</div>
</div>
</div>
C#
protected void btnSave_Click(object sender, EventArgs e)
{
string test = "";
test = drpDownID.SelectedItem.ToString();
}
It won't even hit my break point.... And this is embedded in a form tag with a runat server
It works fine if I take the save button outside of the modal, but that completely defeats the purpose of the modal. So it has to be something with modal don't like click events very much...
Have you tried adding () to the onclick? like OnClick="btnSave_Click()".
EDIT: You can probably ignore that. It doesn't seem to matter for asp tags. Maybe this question can help you: ASP.NET button inside bootstrap modal not triggering click event
If your click on the save doesn't trigger a postback inside the dialog and it does outside the dialog: Can you use Firebug in Firefox to see whether the Save button is still part of the form?
I know JQuery dialog brings the container to the bottom of the body and therefor takes it out of a possible form, resulting in form posts not triggering from dialogues. I have a nice fix for this JQuery dialog issue, but that's probably not part of this topic.
Related
I'm new to ASP.Net. I am trying to trigger action based on button click but the even is not getting triggered.
This is the button definintion in login.aspx:
<button type="submit" value="submit" class="btn_3" onclick="createAccount_Clicked" runat="server">
Create Account
</button>
This is the intended button click event inside login.aspx.cs:
protected void createAccount_Clicked(object sender, EventArgs e)
{
//Here's where you do stuff.
string value = new_fullname.Value.ToString();
}
new_fullname is the Text I'm trying to read (defined in login.aspx):
<div class="col-md-12 form-group p_star" runat="server">
<input type="text" class="form-control" id="new_fullname" name="name" value=""
placeholder="Full Name" runat="server">
</div>
So, you have set the button type to submit which actually submits the server form which does not guarantee the triggering of the intended event. What you should do is, set the button type to button to get it working.
This is how you will get it working:
<button type="button" value="submit" class="btn_3" onclick="createAccount_Clicked" runat="server">
Create Account
</button>
Good morning everybody. I seem to be stuck between a rock and a hard place and fear I may be missing something incredibly simple. I am currently developing a webforms application using an ASP.NET GridView control.
I have a bootstrap modal that is intended to display gridview row details through an ASP button on each row. I understand there are other posts on this topic but my issue seems to be a little different.
The button I use to toggle the bootstrap modal is in an asp control:
<asp:TemplateField HeaderText="Approval Information">
<ItemTemplate >
<asp:Button Text="Stats" runat="server" CommandName="ApprovalModal" type="button" class="btn btn-info" OnClientClick="return false" data-toggle="modal" data-target="#myModal"/>
</ItemTemplate>
</asp:TemplateField>
This button can currently toggle my modal just fine. The problem is, I want to subscribe to the RowCommand event in GridView so I can change the text of the ASP Literal control in the modal to display Row stats for each individual row when clicked:
protected void gvwApprovals_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "ApprovalModal")
{
approvalModalText.Text = "Some Unique Row Stats";
approvalModalText.Visible = true;
}
}
The only way I can subscribe to this event and have it fire is if I take out OnClientClick="return false"
However, if I take that out of the ASP button, I subscribe to the event, but then the bootstrap modal now just flashes and disappears.
Here is my modal:
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="display: block;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Approval Information - Relevant Statistics</h4>
</div>
<div class="modal-body" >
<asp:Literal ID="approvalModalText" runat="server" Text='placeholder' Visible="false" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
What am I missing here? Available to clarify any further questions. Fairly new to ASP controls in general, so I'm not sure if there's something super simple I might just be totally unaware of.
EDIT:
Of course there is a post that happens to fire the RowCommand which reloads the page and the modal disappears. Thanks to Alex for pointing it out to me in the comments (I knew it was something dumb and simple). Must use RegisterStartupScript in Row Command handler to show the modal rather than just doing a straight toggle. jQuery here I come.
so I am still new to C# and I currently testing out my project regarding a search function when user key in what they want to find out in a the textbox and press enter and it will redirect them to my search page. However everytime i tried to type things in the search button and press enter what came out is
http://localhost:51182/Default.aspx
to
http://localhost:51182/Default.aspx?ctl00%24search=(whatever I keyed).
As the search function is in the masterpage.aspx i cannot use asp:buttons or what.
This is my code in the masterpage.
<form class="navbar-form navbar-right">
<input type="text" id="search" class="form-control" placeholder="Search..." runat="server">
<button class="btn btn-default" type="submit" id="Button1" onserverclick="Button1_OnClick"><i class="glyphicon glyphicon-search"></i></button>
</form>
This is my c# code for masterpage.
protected void Button1_OnClick(object sender, EventArgs e)
{
//The code was commented out since the search name was not able to be recognized in my webform input id so i tried to deal with the response first.
//String searchtext = search;
//String Search = Server.MapPath("Website\\HTML\\SearchEngine.aspx");
Response.Redirect("~/Website/HTML/SearchEngine.aspx?search=");
}
I mainly put the codes that I think that matters and if required the other part just say so. In addition to it if this is a duplicate to other question, I am sorry as I been trying it out on some other question answer for their fixes to this but i wasn't able to get my working then I submit this question.
Hope you guys can help me out.
<form class="navbar-form navbar-right">... </form>
In ASP.NET WebForm, you cannot use another form tag, since there is a main form tag with runat="server" already.
The easiest way to achieve is to use Panel. When user types inside textbox and press Enter key, it will call Button1_OnClick event.
For example,
<asp:Panel ID="SearchPanel" runat="server" DefaultButton="SearchLinkButton">
<asp:TextBox runat="server" ID="SearchTextBox" CssClass="form-control"
placeholder="Search..." />
<asp:LinkButton runat="server" ID="SearchLinkButton" CssClass="btn btn-primary"
OnClick="SearchLinkButton_Click">
<i class="glyphicon glyphicon-search"></i>
</asp:LinkButton>
</asp:Panel>
So you can't have nested forms, but that's not to say that you can't have multiple forms on the same page, they just can't overlap, and only one can be an ASP.NET Form[runat=server]. Just make sure the search form, which can be a vanilla HTML form, is placed in the master page outside of any Form[runat=server] and format the search form like so:
<form class="navbar-form navbar-right" action="/Website/HTML/SearchEngine.aspx">
<input type="text" name="search" class="form-control" placeholder="Search..." />
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</form>
I have a boostrap modal, and here is the button to close it:
<div class="modal-footer">
<asp:Button ID="btnClose" CssClass="btn" runat="server" Text="Close" data-dismiss="modal" aria-hidden="true" />
</div>
The Button and modal form are nested in an update panel. But it does not trigger a postback so the update panel does not do its thing. If I remove data dismiss then it will not close the modal.
What could I do?
You can use the ASP Button like in your example
<div class="modal-footer">
<asp:Button ID="btnClose" CssClass="btn" runat="server" Text="Close" data-dismiss="modal" aria-hidden="true" />
</div>
just try the UseSubmitBehavior="false"
<div class="modal-footer">
<asp:Button ID="btnClose" CssClass="btn" runat="server" Text="Close" data-dismiss="modal" aria-hidden="true" UseSubmitBehavior="false" />
</div>
this will close the modal and trigger a postback
Data-dismiss is javascript based and just hides the modal. If you want the close button to postback, you'll need to use the OnClick property and add a method to handle that in your code-behind:
<asp:Button ID="btnClose" CssClass="btn" runat="server" Text="Close" data-dismiss="modal" aria-hidden="true" OnClick="YourMethodNameGoesHere"/>
Then in your code-behind...do something:
protected void YourMethodNameGoesHere()
{
// Do stuff
}
I have a LinkButton that is wired up to an OnClick event and an href that fires a pop up modal.
My problem is that the modal window is popping up as expected, but the OnClick is not firing, it is not even hitting a break point inside the event.
I will post code below :
<asp:LinkButton href="#viewemydevices" data-toggle="modal" ID="ViewMyDevices" runat="server" OnClick="btnViewMyDevices_Click"></asp:LinkButton>
<div class="modal fade" id="viewemydevices" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>This is a section</h4>
</div>
<div class="modal-body">
<table id="MyDevicesTable" class="table tbody" runat="server" visible="false">
<tbody>
<tr>
<td>
<asp:DataGrid ID="MyDevicesGrid" runat="server" CssClass="table table-striped tbody" Visible="false"
AutoGenerateColumns="True"
ForeColor="black"
HeaderStyle-Font-Bold="true"
HeaderStyle-ForeColor="black"
GridLines="None"
EnableViewState="false"
AllowSorting="True"/>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
protected void protected void btnViewMyDevices_Click(object sender, EventArgs e)
{
//logic goes here
}
UPDATE
<asp:LinkButton ID="ViewDevices" runat="server" OnClick="btnViewMyDevices_Click"></asp:LinkButton>
This updated code fires the on click event, but does not fire the modal...
The end product that is needed is when the link button is clicked it will display the modal and run the click event. The event a query that fills a datagrid in the body of the modal with the result set.
You are missing target of modal. Usually
data-toggle="modal"
used in pare with
data-target="#viewemydevices"
for greater details please read this
EDIT:
this functionality can be achieved by replacing your linkbutton with a regular html button which will display the modal and after that will make an AJAX call to your server-side function. Please see this article for details on placing AJAX call