Develop Reference

Bootstrap Modal flashes/disappears instantly - ASP.NET gridview RowCommand

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.

C# unable to find content of ASP.net Textboxes

Okay so I am trying to create a sort of registration wizard, so there are different sections within the asp such as the one below:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#addwizard" data-parent="#accordion-demo" data-toggle="collapse">
Term Time Address
</a>
</h4>
</div>
<div id="termaddy" class="panel-collapse collapse in" runat="server">
<div class="panel-body">
<form id="form-termaddy" >
<div class="main_input_box">
<div class="col-lg-6">
<div class="form-group">
<asp:TextBox ID="txttermhousenum" runat="server" placeholder="House Number" class="form-control" textmode="SingleLine"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" id="RequiredFieldValidator28" controltovalidate="housenum" errormessage="Required Field" display="Dynamic"/>
</div>
<div class="form-group">
<div class="main_input_box">
<asp:TextBox ID="txtxtermstreet" runat="server" placeholder="Street" class="form-control" textmode="SingleLine"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" id="RequiredFieldValidator29" controltovalidate="street" errormessage="Required Field" display="Dynamic"/>
</div>
</div>
<div class="form-group">
<div class="main_input_box">
<asp:TextBox ID="txtxtermpost" runat="server" placeholder="Postcode" class="form-control" textmode="SingleLine"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" id="RequiredFieldValidator31" controltovalidate="postcode" errormessage="Required Field" display="Dynamic"/>
</div>
</div>
</div>
</div>
</form>
</div> <!--/.panel-body -->
</div> <!-- /#addwizard -->
</div> <!-- /.panel.panel-default -->
So whenever the user fills out the form and hits save. The c# gets the details of the text boxes and updates the db:
//term time address info
string txttermhouse = ((TextBox)termaddy.FindControl("txttermhousenum")).Text;
string txttermstr = ((TextBox)termaddy.FindControl("txtxtermstreet")).Text;
string txttermpostcode = ((TextBox)termaddy.FindControl("txtxtermpost")).Text;
termaddress(txttermhouse, txttermstr, txttermpostcode);
The issue is that when the code passes through this portion it sees each of the text boxes as blank and saves them in the db as and empty string. I have also tried directly referencing the textbox into the method, ie :
termaddress(txttermhousenum.Text, txtxtermstreet.Text, txtxtermpost.Text);
But neither way seems to work. Any help on how to get the text box values would be greatly appreciated, very confused by this issue.

If you are using a master page, make sure that you do not have two <form runat="server"> tags. I've once experienced this issue and it was a result of that.

As you are using Textbox directly , no need of using of FindControl:
Try accessing them as follows
string txttermhouse = txttermhousenum.Text;
string txttermstr = txtxtermstreet.Text;
string txttermpostcode = txtxtermpost.Text;
You can pass to your method as follows:
termaddress(txttermhouse , txttermstr , txttermpostcode );

Why are you finding your controls using your div running at server? I would suggest you to remove runat="server" from your div if you are using it only to find controls. This makes your response slower.
You can simply access them as follows:
string txttermhouse = txttermhousenum.Text;
string txttermstr = txtxtermstreet.Text;
string txttermpostcode = txtxtermpost.Text;
You really don't need to find controls. You can access them directly.
You need to find control when its repeating inside grid column
template or within repeater etc., then you need to find control
otherwise you can access them directly.

Modal Button Click Event

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.

Having problem in puting JavaScript Menu into Asp.Net page

Before I post my problem here, please be noted that i would really like to leave javascript and css for that menu as it is.
Now to my problem.
I have a menu in JavaScript that I am having a problem putting into asp.net page, I am having problem to produce the proper html to be more correct.
I would really appreciate if someone could point me to the right direction.
the menu in html looks like:
<!-- HOME -->
<div class="menu_item" onmouseover="hide_all_panels();">
Home
</div>
<!-- ABOUT SITE -->
<div id="trigger1" onmouseover="show_panel('0');">
<div class="menu_item">
About Us
</div>
<div class="hidden_div">
<!-- ABOUT WEB SITE POPOUT -->
<div class="menu" id="popout1">
<div class="menu_item">
Frequently Asked Questions
</div>
<div class="menu_item">
Our Team
</div>
<div class="menu_item">
The Board
</div>
</div>
</div>
</div>
Blog
</div>
<!-- CONTACT US -->
<div class="menu_item" onmouseover="hide_all_panels();">
Contact Us
</div>
as you can see, the divs are not symmetric for single menu that has not children I have simply link wraped into div, but for the menu with childrens I have a menu with one trigger div and 2 more somewhat main divs inside it.
I tryed to put something like that for this menu on asp.net side (don't put atentions to link namings now, they are not important):
<asp:Repeater ID="rpt_Menu" runat="server" OnItemDataBound="rpt_Menu_DataBound">
<ItemTemplate>
<asp:Panel ID="pnl_MainSubmenuDiv" runat="server" Visible="false" Enabled="false">
<div id="trigger<%= index %>" onmouseover="show_panel('<%= index %>');">
</asp:Panel>
<div class="menu_item" onmouseover="hide_all_panels();">
<%# Eval("menu_name") %>
</div>
<asp:HiddenField ID="hdn_Id" runat="server" Value='<%# Eval("menu_id") %>' />
<asp:Repeater ID="rpt_SubMenu" runat="server">
<ItemTemplate>
<div class="menu" id="popout<%= index %>">
<div class="menu_item">
<%# Eval("menu_name") %>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
<asp:Panel ID="pnl_MainSubmenuClose" runat="server" Visible="false" Enabled="false">
</div>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
and the code behind is very simple and there is nothing special, all i do is just bind second repeater that inside first repeater and make panels visible or invisible:
protected void rpt_Menu_DataBound(object obj, RepeaterItemEventArgs e)
{
int parent_id = Int32.Parse(((HiddenField)e.Item.FindControl("hdn_Id")).Value.ToString());
using (SamaraDataContext mycity = new SamaraDataContext())
{
var subMenu = from sm in mycity.tbl_menus
where (sm.menu_parent == parent_id)
select new
{
menu_id = sm.menu_id,
menu_name = sm.menu_name
};
int count = 0;
foreach (var item in subMenu)
{
count++;
}
if (count > 0)
{
((Panel)e.Item.FindControl("pnl_MainSubmenuDiv")).Visible = true;
((Panel)e.Item.FindControl("pnl_MainSubmenuClose")).Visible = true;
((Repeater)e.Item.FindControl("rpt_SubMenu")).DataSource = subMenu.ToList();
((Repeater)e.Item.FindControl("rpt_SubMenu")).DataBind();
this.index++;
}
}
}
}
However my problems is that panels produce div's even if they are hidden, which breaks out all the html structure.
I would really dislike to put the divs formating inside the code behind.

Well for one thing this section here:
<asp:Panel ID="pnl_MainSubmenuClose" runat="server" Visible="false" Enabled="false">
</div>
</asp:Panel>
Will render invalid HTML if Visible is set to true, thus potentially screwing up your JavaScript and CSS interactions.
That will come out like so:
<div id="something_something_pnl_MainSubmenuClose">
</div>
</div>
as Panel controls render a around whatever they enclose. So figure a way around that, and you'll likely solve your problem.

To supplement blesh's answer, use the PlaceHolder control instead of Panel. Placeholders do not render HTML surrounding the contents.

OnClick Event Not Firing Inside LinkButton C#

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