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.
Related
I have some checkboxes that doesn't work in first click when they are already checked by default.
What's happen is: When I click in te checked checkbox he fire Page_Load but doesn't fire OnCheckedChanged event and keep checked until I click again(after this all checkboxes start to work normally).
In the tests I made, I notice that if I keep the Panel witch include the checkboxes always visible this problem does not occur and if I remove the OnCheckedChanged event too
<asp:UpdatePanel runat="server" ID="updApply">
<ContentTemplate>
<div class="row">
<div class="col-md-12">
<asp:Panel runat="server" ID="pnlApply">
<div class="row">
<div class="col-md-12">
<asp:Panel runat="server" ID="pnlAplicaDescontoEstabelecimento">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<asp:CheckBox ID="cbxApply" runat="server"
onchange="loadUI();"
OnCheckedChanged="apply_CheckedChanged"
AutoPostBack="True" />
</div>
</div>
</div>
</asp:Panel>
</div>
</div>
</asp:Panel>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I think it's important to say that in the code behind there are some functions that control whether the Panel is visible
Thanks!
Instead of using visible, try setting the css style display:none. Visible removes the control fronlm the pages markup entirely during render and may remove it's persisted value from viewstate resulting in the event not recognizing the changed value.
Another possible solution would be explicitly setting the default checked value to guarantee it makes it into viewstate, though it checked should default to false per the MSD.
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 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.
In my modal header, I need the x button to do some serverside work, so it needs to be an asp button.
I have both here:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<asp:Button ID="btnX" CssClass="close no-bg" runat="server" Text="×"
OnClientClick="closeModal('#projectModal')"
OnClick="btnClose_Click" aria-hidden="true" />
<h3 id="projectModalLabel">Edit Project</h3>
</div>
However, my asp button still looks like a button while the other html button with boostrap close style looks correct just displaying an 'x'.
How can I make the asp button look like the html one (eg remove background)
Thanks
That's because the <asp:Button> managed control renders an <input> element not a <button> element. They can be styled differently. You can read about the differences here.
Edit: In the example you cite they use an anchor <a> element and style that using background images, etc. You could use a LinkButton and style that as needed.
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