UpdatePanel inside a bootstrap modal doesn't update - asp.net

I change the label's text that resides with a UpdatePanel that is within a Bootstrap Modal. When the Modal pops up, the text has not been set (through in debugging I can see it sets the labels text correctly with the error message).
This modal resides and is called from within a UserControl.
What am I missing? Why isn't the UpdatePanel being triggered?
<%--ERROR MODAL--%>
<asp:Panel runat="server" class="modal fade" ID="modalErrorMessage" role="dialog" aria-labelledby="modalErrorMessage" aria-hidden="true">
<div class="modal-dialog">
<asp:UpdatePanel runat="server">
<ContentTemplate>
<div class="modal-content panel-danger">
<div class="modal-header panel-heading"><span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> Error!</div>
<div class="modal-body">
<asp:Label runat="server" ID="lblmodalErrorMessage" Text=""></asp:Label>
<br />
<div class="modal-footer margin-top-sm">
<asp:Panel runat="server" ID="Panel2">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</asp:Panel>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
Private Sub RaiseErrorMessageModal(errorMessage As String)
lblmodalErrorMessage.Text = errorMessage
RegisterModalPopup(modalErrorMessage.ClientID)
End Sub
Protected Sub RegisterModalPopup(modalId As String)
Dim script = String.Format("$('#{0}').modal();", modalId)
ScriptManager.RegisterStartupScript(Page, Page.GetType(), modalId,
script, True)
End Sub

You should specify an ID for your UpdatePanel and also set the UpdateMode property to indicate how the update panel should update/refresh its content.
<asp:UpdatePanel runat="server" ID="UpdatePanel123" UpdateMode="Conditional">
In your code where you set the text of the Label you should call the .Update() event of the UpdatePanel:
//Depending on where this code is, you may need to find your UpdatePanel control.
Private Sub RaiseErrorMessageModal(errorMessage As String)
lblmodalErrorMessage.Text = errorMessage
UpdatePanel123.Update()
RegisterModalPopup(modalErrorMessage.ClientID)
End Sub
MSDN reference: https://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.updatemode(v=vs.110).aspx?cs-save-lang=1&cs-lang=vb#code-snippet-1

Related

How do I get the name of the specific item being clicked in repeater?

This is my repeater in aspx:
<asp:Repeater ID="RepeaterR" runat="server">
<ItemTemplate>
<table>
<a href="ViewRecipe.aspx">
<div class="property-image">
<div class="property-image-title">
</div>
</div></a>
<div class="property-description">
<h5><%# Eval("recipeName")%></h5>
<p><%#Eval("avgRating") %> stars</p>
<asp:Image class="img" runat="server" src=<%#Eval("recipePic") %> />
</div>
<a href="ViewRecipe.aspx">
<div class="property-social-icons">
</div>
</a>
</table>
</ItemTemplate>
</asp:Repeater>
I want to get the name of the recipe being clicked so I can show it in ViewRecipe.aspx but I don't know How to recognize the item the user clicked on.
I can't use OnClick since I don't have a button, but a herf.
I wants to do it that way but I can't seem to find a solution
Well, you don't have a button, so why not add one?
Just add a "image" button in place of the image.
So, this markup:
<asp:Repeater ID="RepeaterR" runat="server">
<ItemTemplate>
<div style="border: solid; padding: 10px; width: 15%;
margin-bottom: 8px; text-align: center">
<a href="ViewRecipe.aspx">
<div class="property-image">
<div class="property-image-title">
</div>
</div>
</a>
<div class="property-description">
<h5 id="h5Fighter" runat="server"><%# Eval("Fighter")%></h5>
<p id="pThrust" runat="server">Engine Thrust = <%#Eval("Thrust") %> stars</p>
<asp:ImageButton ID="cmdView" runat="server"
ImageUrl='<%#Eval("ImagePath") %>'
Width="160px"
OnClick="cmdView_Click"
CommandArgument='<%# Eval("ID") %>' />
</div>
<a href="ViewRecipe.aspx">
<div class="property-social-icons">
</div>
</a>
</div>
</ItemTemplate>
</asp:Repeater>
code to load:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
Loaddata
End If
End Sub
Sub LoadData()
RepeaterR.DataSource = Myrst("SELECT * FROM Fighters")
RepeaterR.DataBind()
End Sub
And we get this:
And our image button code is:
Protected Sub cmdView_Click(sender As Object, e As ImageClickEventArgs)
Dim iBtn As ImageButton = sender
Dim rRow As RepeaterItem = iBtn.NamingContainer
Debug.Print($"Repeater row click = {rRow.ItemIndex}")
Debug.Print($"Database PK id = {iBtn.CommandArgument}")
Dim hFighter As HtmlGenericControl = rRow.FindControl("h5Fighter")
Debug.Print($"Figher name = {hFighter.InnerText}")
Dim pThrust As HtmlGenericControl = rRow.FindControl("pThrust")
Debug.Print($"Engine thrust = {pThrust.InnerText}")
Session("ReceipeID") = iBtn.CommandArgument
'Response.Redirect("~/RecipeDetails.aspx")
End Sub
output of a click:
Repeater row click = 3
Database PK id = 4
Fighter name = Lockheed Martin F-35 Lightning II
So, while you don't have a button, then in place of a image, use a image button.
The above code shows how to get/grab/enjoy the current row click.
And it also shows how to grab/get controls from that current row click.
After that, you can shove value into session, or pass via URL parameter's, or whatever (and thus you can use/enjoy/have code to navigate to the next page in question, and passing along the required information in a number of ways.

ASP.Net add item to listbox without posting

I am trying to add items to a listbox. I have a textbox and a button and when the user enters something into the textbox and hits add, I want to insert a new item the listbox without the page refreshing.
Here is what I have so far:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="col-xs-6 text-center">
<asp:Label ID="empid" runat="server" Text="Employee ID" CssClass="label-default label "></asp:Label>
<asp:TextBox ID="txtEmployeeID" runat="server" CssClass="form-control"></asp:TextBox>
<div class="col-xs-6">
<asp:Button ID="btnAddEmp" runat="server" Text="Add Emp" CssClass="btn btn-primary top-buffer" Width="100%" />
</div>
<div class="col-xs-6">
<asp:Button ID="btnRemoveEmp" runat="server" Text="Remove Emp" CssClass="btn btn-danger top-buffer" Width="100%" />
</div>
<asp:ListBox ID="listEmps" runat="server"
CssClass="top-buffer add-height"
Width="100%"
ValidationGroup="req"></asp:ListBox>
</div>
</ContentTemplate>
</asp:UpdatePanel>
and here is my button click event
Protected Sub btnAddEmp_Click(sender As Object, e As EventArgs) Handles btnAddEmp.Click
If Not IsPostBack() Then
If listEmps.Items.Count = 0 Then
listEmps.Items.Add(txtEmployeeID.Text)
Else
'check list to see if employee already exists
For i = listEmps.Items.Count - 1 To 0 Step -1
If RTrim(txtEmployeeID.Text) = RTrim(listEmps.Items(i).ToString) Then
'employee already exists within list
Response.Write("<script>alert('Employee ID " & txtEmployeeID.Text.Trim & " has already been added. ')</script>")
txtEmployeeID.Text = ""
Exit Sub
End If
Next
'add to list
listEmps.Items.Add(txtEmployeeID.Text)
End If
End If
End Sub
How can I properly add items to a listbox without refreshing the page?
Remove your If Not IsPostBack() Then check in your button click event. The IsPostBack() is typically only used for the Page_Load event. Since your button is contained in an UpdatePanel the click event should be asynchronous and won't cause a postback.

textboxes are empty on postback with bootstrap modal asp.net

I am using bootstrap modal in my asp.net page like this:
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<asp:UpdatePanel ID="ModalUpdatePanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnRegister" EventName="Click" />
</Triggers>
<ContentTemplate>
<p>
textboxes here
<div class="popup-footer-wrapper">
<div class="popup-footer-left">
<%-- <input type="submit" class="login-button" name="login-button" value="Sign Up">--%>
<asp:Button ID="btnRegister" runat="server" CssClass="login-button" OnClick="btnRegister_Click"
UseSubmitBehavior="false" Text="<%$ Resources: HRGELoggedOutMaster, Signup %>" />
</div>
</div>
</p>
</ContentTemplate>
</asp:UpdatePanel>
</div>
i see that inside
protected void btnRegister_Click(object sender, EventArgs e)
all the texboxes show empty value. whatever user type in textbox. Please suggest how to fix it. It may be because of UseSubmitBehavior="false" but if i dont use it then control doesnt go to onclick event.
The reason why the you are not seeing your posted values, is because your values are not being posted. The bootstrap modal manager uses the 'body' element as the root element to which it appends your modals. As a result your modals are now outside the 'form' element and the values are not being posted back to the server.
To fix this, change the default value of the 'manager' property as follows:
// Note the manager is passed to the root form element.
// Otherwise, the modals are taken out of the form and
// values not posted back to the server
$.fn.modal.defaults.manager = $.fn.modalmanager.defaults.manager = 'body form:first';
EDIT: This is assuming you are using the Bootstrap-Modal Extension
Steven Anderson is right, values are not posted because modal inputs are outside the form.
I was able to workaround this problem using javascript to copy the value of the modal inputs to hidden asp.net controls.
I create a hidden asp.net control outside of the modal:
<asp:HiddenField ID="MyHiddenControl" value="name" runat="server" />
The modal textbox I want to submit:
<asp:TextBox ID="FormYourName" CssClass="form-control" runat="server"/>`
My modal submit button looks like this;
<asp:Button ID="BtnSubmit" runat="server" Text="Submit" CssClass="btn btn-primary" OnClientClick="Javascript:DoCustomPost();" UseSubmitBehavior="false" />
My JavaScript function looks like:
function DoCustomPost()
{
var ModalTextBox = document.getElementById("FormAmenity");
var HiddenTextBox = document.getElementById("MyHiddenControl");
// This is the value I want to Post
MyHiddenControl.value = ModalTextBox.value
}
So when I click "submit" in my modal window a postback kicks, the value of the textbox is copied to the hidden control and I can read the value from the hidden control in code-behind:
Protected Sub BtnSubmit_Click(sender As Object, e As EventArgs) Handles BtnSubmit.Click
Dim Something As String = MyHiddenControl.Value
End Sub
I just had similar problem. I resolved this by moving the modal element inside the form element using jquery.
function init() {
var element = $('#myModal').detach();
$($("form")[0]).append(element);
}
window.addEventListener('DOMContentLoaded', init, false);
Use the dotnet text box, or add an id and a runat server tag to the input field.

Using multiple UpdatePanels on a single page without interfering with each other

It seems that when multiple UpdatePanels are on a single page, anytime an asyncPostBack occurs on one, all others will have their html reloaded. Is there a way around this?
Example
Example.aspx
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="border: 1px solid black;">
<asp:TextBox runat="server" ID="txtTEST1" />
<asp:Label runat="server" ID="lblTEST1" />
<asp:Button runat="server" ID="btnTEST1" Text="AsyncPostBack1" />
<div onclick="this.innerHTML='Wooo!'">Click Me - UpdatePanel1</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div onclick="this.innerHTML='Wooo!'" style="padding: 1em;">Click Me. I'm not part of an Update Panel</div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div style="border: 1px solid black;">
<asp:TextBox runat="server" ID="TextBox1" />
<asp:Label runat="server" ID="Label1" />
<asp:Button runat="server" ID="Button1" Text="AsyncPostBack2" />
<div onclick="this.innerHTML='Wooo!'">Click Me - UpdatePanel2</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Example.aspx.vb
Protected Sub btnTEST1_Click(sender As Object, e As EventArgs) Handles btnTEST1.Click
lblTEST1.Text = "Refreshed at " & DateTime.Now.ToString()
End Sub
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Label1.Text = "Refreshed at " & DateTime.Now.ToString()
End Sub
Testing the issue
Click on all 3 of the divs with the "Click Me" text so that HTML is altered inside and outside of the UpdatePanels.
Click one of the buttons labeled "AsyncPostBack". Regardless on which one is clicked, both UpdatePanels will have their HTML rerendered and replaced, as seen by the 2 divs inside the UpdatePanels resetting to their original text.
So I ask, is it possible to have multiple UpdatePanels on the same page that don't cause each other to rerender every time one of them has a asyncPostBack event.
yes
set updatemode=conditional
provide the triggers which will trigger the update. here is a link to an example. (#1 result on google) http://ajax.net-tutorials.com/controls/updatepanel-control/
Try adding mode to update panel tag. If mode is not give the default mode is always. If the UpdateMode property is Always, the UpdatePanel control's content is updated on every postback that originates from anywhere on the page. Microsoft documentation about UpdateMode
<asp:UpdatePanel ID="BugsListUpdatePanel" runat="server" UpdateMode="Conditional">

ASP.NET: OnChange on Dynamically Created Textbox inside UpdatePanel Fires Twice

Pretty basic set-up. I'm creating a number of textboxes, all calling a function during the onchange event to update their value to the database. These boxes are dynamically created in the backend because the data changes based on specific criteria that can be changed on the page. Here's the creation of the boxes:
Dim t as TableRow
tC = New TableCell
Dim txtBox As New TextBox
txtBox.ID = "SampleTextBox" & counter
txtBox.Text = dt.Rows(i)(11).ToString
txtBox.ClientIDMode = UI.ClientIDMode.Static
txtBox.Attributes.Add("onchange", "return UpdateLabTestValue('" & txtBox.ClientID & "');")
tC.CssClass = "padBoth"
tC.Controls.Add(txtBox)
t.Cells.Add(tC)
tblResults.Rows.Add(t)
On the HTML side of the ball:
<asp:UpdatePanel ID="uplResults" runat="server">
<ContentTemplate>
<div class="formContentLeft">
<fieldset class="collapsible" style="width: 90%;">
<legend>Results</legend>
<div class="formContentLeft">
<div class="formField">
<span class="formInline">Status: </span><span class="formInput">
<asp:DropDownList ID="dlStatus" runat="server" /></span>
</div>
</div>
<br />
<br />
<asp:Table ID="tblResults" runat="server" />
<div class="centeredButtonRow">
<asp:Button ID="btnSaveResults" runat="server" Text="Save" />
</div>
<asp:Label ID="errorMessage" runat="server" CssClass="errorMessage" />
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
When I enter a number into the Textbox, the event fires as expected, but it fires twice. Any thoughts?
Changed this to an "onblur" and it works. There must be something else causing the fire for the change, although the same textbox is firing it off twice. In any case, I resolved this by switching to onblur.

Resources