I got a LinkButton inside a boostrap modal with a ClickFunction in codeBehind. Everytime that i click in linkButton and event in codebehind is firing, the modal is closing. I wanna to keep modal open after a linkbutton click!
Check the asp LinkButton inside modal on tag modal-body with a Click event:
<div class="modal fade" id="modalPesquisaCliente" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Fechar</span></button>
<h4 class="modal-title" id="txtTitle"><i> Pesquisa de Clientes</h4>
</div>
<div class="modal-body">
<asp:LinkButton runat="server" ID="link" OnClick="link_Click">aaa</asp:LinkButton>
<asp:Label ID="lbl" runat="server"></asp:Label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
LinkButton Click function in code Behind:
protected void link_Click(object sender, EventArgs e)
{
lbl.Text = "aaa";
}
The issue is: Everytime i click link button inside modal, which have a
click event in codebehind, the modal is closing?
I just wanted to keep modal opened once the linkbutton was clicked
You need to set modal property like below to prevent disappear modal popup :
$('#modalPesquisaCliente').modal({
backdrop: 'static',
keyboard: false
})
I FOUND SOLUTION GUYS! THE ANSWER IS:
" When you use UPDATE PANEL and occours a postback, the postback act in all controls inside update panel, and if modals html code is inside update panel, when postback occours, the modal will be "refreshed" and seted to default value again (Thats in closed state), so if you wanna to keep modal open after a postback, you should write this html code OUT of update panel, doing this every time a postback occour inside update panel, the code of modal doesn't be "touched" and "re wrote" by postback.
You can use bootstrap model either jQuery with URL action to your code behind method or Update panel using with Scriptmanager.
WebForm:
<asp:Button ID="link" runat="server" OnClientClick="callAjaxMethod(event)" Text="Call method using Ajax" />
Code behind:
[System.Web.Services.WebMethod]
public static bool link_Click()
{
return "aaa";
}
jQuery:
function callAjaxMethod(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "SimpleAjax.aspx/IsLeapYear",
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if (response.d) {
$('#<%=lbl.ClientID%>').val(response.d);
}
else {
$('#<%=lbl.ClientID%>').val('No value');
}
},
failure: function (response) {
$('#<%=lbl.ClientID%>').val("Error in calling Ajax:" + response.d);
}
});
}
Second Method using Update Panel
WebForm:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<fieldset>
<div class="modal fade" id="modalPesquisaCliente" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Fechar</span></button>
<h4 class="modal-title" id="txtTitle"><i> Pesquisa de Clientes</h4>
</div>
<div class="modal-body">
<asp:LinkButton runat="server" ID="link" OnClick="link_Click">aaa</asp:LinkButton>
<asp:Label ID="lbl" runat="server"></asp:Label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
Code behind: as it is no change
protected void link_Click(object sender, EventArgs e)
{
lbl.Text = "aaa";
}
And one very simple method to use without using jquery or update panel, you can use simple jQuery to .
jQuery:
$(document).on('click', '#<%=link.ClientID%>', function (event) {
event.preventDefault();
});
event.preventDefault(); for
To prevent postback from happening as we are ASP.Net TextBox control so If we had used input html element, there is no need to use ' e.preventDefault()' as posback will not happen.
As you have mentioned jQuery, try this
$(document).on('click', '#link', function (event) {
event.preventDefault();
});
Related
I am using a Modal for the first time and need some help I have this Modal
<div id="User_Modal" class ="container">
<div class ="row">
<div class="col-xs-12">
<div class="modal" id="viewUserModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Enter You Pin To Continue</h4>
</div>
<div class="modal-body">
<div>
<label for="inputPinNumber">Pin Number</label>
<br />
<input class="form-control" placeholder="Enter Your Pin #" type="number" id="txtUserPin" runat="server"/>
</div>
</div>
<div class="modal-footer">
<asp:Button runat="server" CssClass="btn btn-primary" ID="btnUser" Text="Go" OnClick="btnUser_Click" />
<button class =" btn btn-primary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I open or call the Modal using this C# code on the btnUser_Click method with this C# code
ScriptManager.RegisterStartupScript(this, GetType(), "Show Modal", "$('#viewUserModal').modal('show');", true);
After the user enters the Pin number I want to get that value check it against my data and then close the Modal. I trying to do that with this code:
protected void btnUser_Click(object sender, EventArgs e)
{
string strUserPin = txtUserPin.Value.ToString();
if (strUserPin.Length > 0)
{
Session["SessionPinEntered"] = strUserPin;
string strUser = Email.GetUser(strUserPin);
bool bolIsManager = true;//CheckUser(strUser);
if (bolIsManager)
{
ScriptManager.RegisterStartupScript(this, GetType(), "Close Modal", "$('#viewUserModal').modal('close');", true);
pnlGrid.Visible = true;
}
else
{
}
}
}
The code runs but the Modal does not close and my hidden asp Panel is not shown.
Can someone explain why this is not working?
UPDATE:
I was able to figure out how to hide the Modal with this code change:
ScriptManager.RegisterStartupScript(this, GetType(), "Hide Modal", "$('#viewUserModal').modal('hide');", true);
But the C# code to make the asp Panel visible is still not working. In debug I can watch the code being called and steps over put does not run? What's going on with that and how can I get this fixed
The solution to the problem was to rebind the grid after I changed the panel from being hidden. Once I did that the radgrid shows the data
I am trying to create a partial view that will appear in a modal when a button gets pressed. If there is another approach that works better for this, I am open for it -- I had the modal working great until I added the List to the main view. If there is a way to return back a list and form post a single entity that might work for my scenario. Right now the code I have works to an extent, however you need to push the Add Service button twice in order for the modal to show up and when it does the only way to get rid of it is to submit, both the X in the top as well as the close button don't work.
main view
#model List<ServicesPosting>
<div>
<button id="addService" onclick="OpenModal()">Add Service</button>
</div>
<div id="AddServiceForm"></div>
<script type="text/javascript">
function OpenModal() {
var url = '#Url.Action("AddServiceModal", "Services")';
$('#AddServiceForm').load(url);
$('#serviceModal').modal();
}
</script>
controller
public class ServicesController : Controller
{
// GET: Services
public ActionResult Index()
{
List<ServicesPosting> postings = DataAccess.GetAllPostings();
return View(postings);
}
[HttpGet]
public ActionResult AddServiceModal()
{
return PartialView("~/Views/Services/AddNewService.cshtml");
}
}
partial view
#model ServicesPosting
<!-- Modal -->
<div class="modal fade" id="serviceModal" tabindex="-1" role="dialog" aria-labelledby="serviceModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="serviceModalLabel">Add New Service</h4>
</div>
<div class="modal-body">
#using (Html.BeginForm("Index", "Services"))
{
// TODO: validate up front
<div class="row">
Service Title : #Html.TextBoxFor(x => x.ServiceTitle)
</div>
<div class="row">
ServiceDescription : #Html.TextAreaFor(x => x.ServiceDescription)
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
}
</div>
</div>
</div>
</div>
The problem is when you click the button first time the
$('#serviceModal').modal(); function is being called before the modal load.
So, you need to call this $('#serviceModal').modal(); function after $('#AddServiceForm').load(url); is done. Means that ater loading the AddNewService.cshtml is completed then you can find your desired modal in you DOM. See for more in here http://api.jquery.com/load/
After that you can show the modal. Some times when you add any DOM elements achieved by ajax call added to you main DOM specially DOM with form elements; the DOM parser can't get it first time so use the body tag to find any child element. I have put a code bellow. Try with this :
$("#AddServiceForm").load(url, function(responseTxt, statusTxt, xhr) {
// debugger;
if (statusTxt == "success")
{
$('body #serviceModal').modal('show');
}
if (statusTxt == "error")
{
console.log("Error: " + xhr.status + ": " + xhr.statusText);
}
});
I have input form in Bootstrap model popup. I want to show error message in div when submit button for saving. My model popup is in update panel. I am trying to do and its not working.
<div class="modal fade" 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">SMTP Configuration</h4>
</div>
<div class="modal-body">
Here is a input form
<div id="ErrorDiv" class="required" runat="server">
This is a div where i want to show content
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<asp:Button ID="btnEdit" runat="server" Text="Save" OnClick="Save" class="btn btn-success" ValidationGroup="Group1" />
</div>
</div>
</div>
</div>
Below is the server side method to show content.
public void ShowError(string Message)
{
ErrorDiv.InnerHtml = Message;
upModal.Update();
}
How can I show error content to div?
To open error model popup from Server side.
You need to update your Server side function ShowError to this.
public void ShowError(string Message)
{
ErrorDiv.InnerHtml = Message;
upModal.Update();
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ErrorModel", "$('#myModal').modal('show');", true);
}
for this you have to put the div with id myModal, into update panel.
This will trigger jQuery function on Client side after server side execution complete and the model open manually.
Other way to do this
If you don't want to put model div into update panel then follow this way.
Update your Model div like below
<div class="modal fade" 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">SMTP Configuration</h4>
</div>
<div class="modal-body">
Here is a input form
<div id="ErrorDiv" class="required">
This is a div where i want to show content
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
Add JavaScript function as below into aspx file.
function showError(error){
$("#ErrorDiv").html(error);
$('#myModal').modal('show');
}
And call the JavaScript function from server side like this
public void ShowError(string Message)
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ErrorModel", "ShowError('"+Message+"');", true);
}
Here, you can explore more about ScriptManager.RegisterStartupScript Method
am having problem seting my frame src from code behind to use in my modal on button click.the frame src is getting the value but not displaying the page in the modal.
the modal code
<div class="modal fade " id="modal-info" role="dialog" data-keyboard="false" style="border: none; height: 500px;" >
<div class="modal-dialog col-md-push-1">
<!-- Modal content-->
<div class="modal-content" style="width: 700px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Set Leave</h4>
</div>
<div class="modal-body">
<iframe id="frm" runat="server" width="96.6%" style="border: none; height: 300px;"></iframe>
</div>
<div class="modal-footer">
<button type="button" id="Button2" class="btn btn-primary" data-dismiss="modal" runat="server" onserverclick="close_ServerClick">OK</button>
</div>
</div>
</div>
</div>
then in code behind on button click
frm.Src = "../Popups/staff_leave_calender.aspx";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "", "$('#modal-info').modal();", true);
it only works only if the frame src in set on page load
protected void Page_Load(object sender, EventArgs e)
{
frameinfo.Src = "../Popups/staff_leave_calender.aspx";
}
and i needed to do something like
Session["leaveid"] = StrID;
frameinfo.Src = "../Popups/staff_leave_calender.aspx?lvv=" + StrID;
will use Str ID in the page loaded in modal.what are other options or what else can i do.
use it from javascript full code
in your aspx file addd on top script as
<script type="text/javascript">
$(document).ready(function () {
/* Get iframe src attribute value i.e. YouTube video url
and store it in a variable */
var url = "../Popups/staff_leave_calender.aspx?lvv="+"<%= Session["leaveid"].ToString() %>";
/* Assign empty url value to the iframe src attribute when
modal hide, which stop the video playing */
document.getElementById("<%= btnAlelrt.ClientID %>").on('hide.bs.modal', function () {
$("#frm").attr('src', '');
});
/* Assign the initially stored url back to the iframe src
attribute when modal is displayed again */
document.getElementById("<%= btnAlelrt.ClientID %>").on('show.bs.modal', function () {
$("#frm").attr('src', url);
});
});
</script>
and in code behind file create the session leaveid if it is not exist already in your app
When I click a link button within a ASP.NET listview, a modal popup activates that contains a textbox (lbCBody).
The textbox property does not get set, even though when I put a breakpoint at lbCBody.Text this is set.
Any ideas what is going on here?
protected void lvCalendar_ItemCommand(object sender, ListViewCommandEventArgs e)
{
ScriptManager.RegisterStartupScript(this, typeof(Page), "ajaxScript", "showCalendar();", true);
//cast the postback causing control respectively, LinkButton/Button:
System.Web.UI.WebControls.LinkButton btn = e.CommandSource as System.Web.UI.WebControls.LinkButton;
//get the ListViewItem:
ListViewItem item = btn.NamingContainer as ListViewItem;
HiddenField hfViewCalID = item.FindControl("hfViewCalTodayID") as HiddenField;
int sID = Convert.ToInt32(hfViewCalID.Value);
UserCalendar selC = context.UserCalendars.FirstOrDefault(a => a.ID == sID);
//lbCHeading.Text = selC.EventName;
lbCBody.Text = selC.Description;
}
Modal Popup
<div id="viewCalendarModel" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
<asp:HiddenField ID="hfViewCal" ClientIDMode="Static" runat="server" />
<div class="modal-header">
<h3>
<asp:Label ID="lbCHeading" runat="server"></asp:Label></h3>
</div>
<div class="modal-body">
<div class="control-group">
<div class="controls controls-row">
<asp:TextBox ID="lbCBody" runat="server"></asp:TextBox>
</div>
</div>
</div>
<%--<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>--%>
</div>
This was caused by the calendar being inside an update panel, but the modal popup being outside the update panel.