I hope this is a simple one for someone to answer.
If i have a button that allows a user to edit something on the page, they can click on
Edit this page
This then opens a modal on the page with the following DIV
<div id="editpage" class="modal" tabindex="-1" role="dialog">
This is the content in my modal
</div>
The issue I am having is that when I add a runat="server" to the modal's div tag, so that I can determine if the user can even see/inspect the page source if they are not a moderator,, that the modal no longer pops up when i click on my edit button.
Is there anything I can do so that I can still control if the modal is rendered from code-behind based on logic there, and still have the edit to modal click function still work without turning it into a server control.
Found the answer which was to wrap the modal div in another div or placeholder tag and then control that from the server side controls. This meant that the modal's div did not have it's ID modified due to the server side assignment and therefore I am now able to remove this markup entirely if the user is not a moderator.
<asp:Panel ID="editpage_panel" runat="server" Visible="false">
-- modal here
</asp:Panel>
Related
I have a user control that has a GridView and when a user clicks on a row in this GridView the function OnSelectedIndexChanged is called, I'd like a modal to pop up after this occurs. I used the ScriptManager to invoke the script $('#seasonInfoModal').modal() which works in opening modals. The problem is it doesn't work when opening a modal which is defined within the same user control. The modal opens when it is inside the page.aspx , but doesn't open when inside the control .ascx. I have everything hooked up properly and have omitted some details. Here's what the overall code looks like
main page.aspx
<%# Page Title="" Language="C#" ... %>
<%# Register Src="~/Controls/MyControl.ascx" TagPrefix="ACT" TagName="GeneralADM" %>
<ACT:GeneralADM runat="server"" />
MyControl.ascx
<%# Language="C#" AutoWireUP="true" Codebehind="" Inherits="" %>
<div runat="server">
<!-- Seasonal Info-->
<div runat="server" id="seasonInfoModal" class="modal fade" role="dialog" draggable="true">
</div>
<!-- End seasonal info-->
<!-- Start of Season Edit Modal -->
<div id="seasonEditInfo" class="modal fade" role="dialog" draggable="false">
</div>
<!-- End of Season Edit Modal -->
<asp:GridView>
</asp:GridView>
</div>
In the code behind I try to open the modal like this
MyControl.ascx.cs
protected void OnSelectedIndexChanged(object sender, GridViewEventArgs e){
ScriptManager.RegisterStartupScript(this,
this.GetType(),
"seasonInfoModal",
"$('#seasonInfoModal').modal();",
true);
}
issue
#seasonInfoModal doesn't popup instead a new modal is made with nothing inside it and the screen fades to dark on click. When I pull the #seasonInfoModal out of the control into the page where I am inserting the control itself, the modal actually pops up.
question
How can I open the modal #seasonInfoModal when it is inside the control from that control's codebehind specifically from inside OnSelectedIndexChanged function?
The problem may be caused by the ID mangling performed by ASP.NET. Since the modal div is a server control (as specified by runat="server"), its ID in the rendered HTML is not seasonInfoModal but something like MyControl1_seasonInfoModal. As a result, the Javascript selector $('#seasonInfoModal') cannot find it.
You can change the startup script code, and pass the value of seasonInfoModal.ClientID to the jQuery selector, to account for the ID mangling:
protected void OnSelectedIndexChanged(object sender, GridViewEventArgs e){
ScriptManager.RegisterStartupScript(this,
this.GetType(),
"seasonInfoModal",
string.Format("$('#{0}').modal();", seasonInfoModal.ClientID),
true);
}
Other alternatives to avoid ID mangling would be:
To remove the runat="server" attribute if you don't need to access the div control in code-behind
To add clientidmode="static" to the div.
To use a class name (with the corresponding jQuery class selector) instead of an ID for the modal div.
These 3 solutions, however, would not behave correctly if several instances of the user control are present in the form. The modal of the first instance would always be used, and in cases 1 and 2, several controls of the form would have the same ID.
I have created my first fully functional listview with custom action buttons, that worked fine when I used asp:buttons, but I need the buttons to be icons, so I tried inserting HTML tags inside, since it can't be done out of the box, I used as:linkbuttons controls to achieve the desired look.
What it does is that the buttons trigger several actions that populate controls inside update panels, and I have my own Javascript that shows a popup on click, but on the second action it currently sends a postback and page is reloaded, I googled other questions and tried everything they had, what I tried:
Adding a return false on client click
<asp:LinkButton runat="server" OnClientClick="showDialog('#popup'); return false;" CommandName="Detalles" CssClass="toolbar-button" ID="EditButton">
Editar
<span class="mif-pencil"></span>
</asp:LinkButton>
Using an HTML button with runat server, but Command doesn't trigger
<button runat="server" onclick="showDialog('#popup');" CommandName="Detalles" class="toolbar-button" ID="EditButton">
Editar
<span class="mif-pencil"></span>
</button>
And on jQuery, but doesn't do any difference
$('.toolbar-button').removeAttr('href');
What exactly I'm missing, my code works fine with Asp:buttons, but they can't have additional HTML :(, I'm a newbie on ASP, any hints are appreciated.
Working button that doesn't allow inside HTML
<asp:Button runat="server" Text="Detalles" CssClass="toolbar-button fg-darkCyan button-popup" ID="btn_detalles" CommandName="Detalles">
</asp:Button>
NOTE Buttons are inside a ListView control, and assigned for each item.
in my MVC action I have
return PartialView("partialView", model);
I have this in the parent View:
<div id="myModal" class="modal fade in">
<div id="modalContainer">
</div>
</div>
And the body of the modal in the partial View.
I used this as a template: Using Bootstrap Modal window as PartialView
The modal loads fine with the right data on submit of the page. The problem is that the partial view with the modal covers the entire parent view instead of just showing the modal.
There's essentially the modal with a blank white screen.
My question is how would I only show the modal with data, and prevent the partial view from covering the whole page?
Thanks a million!
My question is how would I only show the modal with data, and prevent
the partial view from covering the whole page?
I would try rendering the modal without data to start. First and foremost make sure your modal appears and has some content in to start. Something simple like 'loading data...' or anything in your starting Modal Html will assist in rendering data. Once you connect to your Controller code you will be able to walk the code after "return partial view" and you should NOT step into your _Layout code.
Once you add your partial view, do yourself a favor and wrap it with a cascading style sheet (CSS) class that makes it very obvious that the style is working. Something as simple this should help.
<style type='text/css'>
.wrapper{
border:solid 1px red;
}
</style>
<div id="myModal" class="modal fade in">
<div id="modalContainer" class='wrapper">
</div>
</div>
I am placing some ASP.NET html elements(that upload a file) inside a JQuery Dialog.
My Problem: When I click the button to upload the file, nothing happens. I create the query dialog dynamically AFTER the page has loaded. My solution is to place the HTML/ASP elements(for uploading a file) in a div at the bottom of the body of the page & set its display to none.
Then upon opening the dialog, I move the HTML/ASP elements into the JQuery dialog. But my problem is that when I click my ASP.NET button to upload the file from within the dialog, nothing happens?
Note if I click the button whilst its outside the JQuery dialog is sucessfully uploads the file.
Whats going wrong & how do I fix this? Is there an easier way to add ASP.NET code to a JQuery dialog AFTER the page has loaded?
This sits in the body
<div id="test">
<input class="ui-button ui-widget ui-state-default ui-corner-all
ui-button-text-only"
style="display: inline-block;" id="fileUpload" type="file" Runat="server"
NAME="fileUpload"/>
<asp:button id="btnSave" OnClick="bt1Clicked" style="display: inline;"
class="ui-button ui-widget ui-state-default ui-corner-all
ui-button-text-only"
runat="server" Text="Upload File" ></asp:button>
<asp:label id="lblMessage" runat="server" style="height:20px;width:390px;"
</asp:label>
</div>
Then on dialog open I grab the above HTML & move it into the dialog:
$(this.dialog).dialog('open' function()
{
var e = $("#test");
$(body).remove(e);
$(this).append(e);
});
jQuery UI dialog creates the dialog elements at the very end of the document, right before the closing </body> element. So when you open your dialog and move your content div#test into the dialog, it is outside the <form> and does not work anymore with asp.net which requires it.
Try to create your dialog and move it back inside the <form> element:
$("#myDialog").dialog({
...
}).parent().appendTo($("form"));
Perhaps my understanding of the Ajax Modal popup is not correct. What I would like to do is to retrieve some data from the server and show it on the modal pop up when the user clicks on a button on the page. The following code is in the aspx of the page.
<asp:Panel ID="pnlDetail" CssClass="modal" runat="server">
<div class="header">
Data
</div>
<div class="body">
<div class="header">
<asp:Label ID="lblInput" runat="server"></asp:Label>
</div>
</div>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="mpeDetail" PopupDragHandleControlID="pnlDetail" PopupControlID="pnlDetail" TargetControlID="hdnDetail"
BackgroundCssClass="modalBG" CancelControlID="ShowDetailClose" runat="server" />
In the button click event of a button on the page, I retrieve the data from the server and assign the value to the lblInput inside the pop up panel and call mpe.Show.. but it does not display the value. I'm assuming the data needs to be present on load of mpe but thats not what I have to do.
If MPE cannot achieve this, what is the alternative?
I'm using the dragpanel extender, because I had some problems with the modal popup too. But here is a possible solution with the modal popup:
http://blogs.microsoft.co.il/blogs/gilf/archive/2009/08/14/populating-a-modalpopupextender-dynamically.aspx
Ok, figured it out. Put the above panel inside an update panel.
<asp:UpdatePanel ID="updPnlDetail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
..... <asp:panel .. > ajax mpe control etc (what I have in the question)..
</ContentTemplate>
</asp:UpdatePanel>
Then in the button click, call the following.
UserControl.LoadData(object dataContents); (user control has the popup data. It does not have to be user control. Bind your controls here with data).
updPnlDetail.Update();
mpe.Show();
The data will show. I guess the updatepanel's update method does a refresh.