Ajax ModalPopupExtender with an edit form in ASP.NET MVC - asp.net-mvc

Question

I have an events calendar and on each event in the calendar there is an edit link which open up ajax ModalPopupExtender for editing the event information. The issue that I am facing right now is that the edit has to be in a form so it can update the information on the server..
How do I deal with this? And what would be the best way of doing this ?

Answer 1

You can use jQuery to accomplish the same functionality. I had to do this recently for a project because I didn't like the way the ModalPopupExtender was handling it. Unfortunately though I didn't build the drag click-and-drag functionality.
Here's the code for the ASP.NET and XHTML:
Somewhere on the page, you put trigger button:
<input type="button" value="Trigger Action" class="popup-trigger-delete" />
Panel Code:
<div class="popup-wrapper popup-wrapper-delete">
<div class="popup-top"></div>
<div class="popup-middle">
<div class="content">Are you sure you want to delete this from your project?</div>
<div class="controls">
<asp:Button ID="btnDelete_Yes" runat="server" CssClass="left" OnClick="btnDelete_Yes_OnClick" />
<input type="button" value="Cancel" class="right popup-background-delete-cancel" />
</div>
</div>
<div class="popup-bottom"></div>
</div>
<div class="popup-background popup-background-delete-track"></div>
Javascript / jQuery
var fadeInTime = 400;
var popupStatus = 0;
function loadPopup(wrapper){
//loads popup only if it is disabled
if(popupStatus==0){
$(wrapper).fadeIn(fadeInTime);
popupStatus = 1;
}
}
function disablePopup(wrapper, background){
if(popupStatus==1){
$(background).fadeOut(fadeInTime);
$(wrapper).fadeOut(fadeInTime);
popupStatus = 0;
}
}
function centerPopup(wrapper, background){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $(wrapper).height();
var popupWidth = $(wrapper).width();
//centering
$(wrapper).css({
"position": "fixed",
"top": (windowHeight/2-100)-popupHeight/2,
"left": windowWidth/2-popupWidth/2,
"z-index" : "10000"
});
$(background).css({ "height": windowHeight });
}
//event handlers
var trigger = "input.popup-trigger-delete";
var wrapper = "div.popup-wrapper-delete";
var background = "div.popup-background-delete";
var dtpbc = "input.popup-background-delete-cancel";
$(document).ready(function(){
$(trigger).click(function(){ centerPopup(wrapper,background); loadPopup(wrapper); });
$(dtpbc).click(function(){ disablePopup(wrapper, background); });
$(document).keypress(function(e){ if(e.keyCode==27 && popupStatus==1){ disablePopup(wrapper,background); } });
});
CSS
div.popup-background-delete { display:none; }
div.popup-wrapper-delete { display:none; }
div.popup-wrapper { position:relative; display:none; display:block; width:350px; height:245px; padding:0; margin:0; z-index:5000; }
div.popup-top { position:relative; display:block; background-color:#ffffff; width:350px; height:40px; padding:0; margin:0; z-index:5000; }
div.popup-middle { position:relative; display:block; background-color:#ffffff; width:350px; min-height:165px; padding:0; margin:0; z-index:5000; }
div.popup-middle .content { position:relative; display:block; margin:0 auto; padding-top:20px; padding-bottom:10px; width:255px; z-index:5000; }
div.popup-middle .controls .left { position:absolute; top:0; left:80px; z-index:5000; }
div.popup-middle .controls .right { position:absolute; top:0; right:80px; z-index:5000;}
div.popup-bottom { position:relative; display:block; background-color:#ffffff; width:350px; height:40px; padding:0; margin:0; z-index:5000; }
div.popup-background { position:absolute; top:0; left:0; width:100%; height:100%; z-index:5000; background-color:#cbcbcb; opacity:0.2; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); -moz-opacity:0.2; }

Answer 2

In order to get above sample working (sorry, can't comment), do this:
Change asp button to html button
Change "popup-background-delete-track" to "popup-background-delete"
In centerPopup, replace $(background).css({ "height": windowHeight }); with $(background).css({ "display": 'block' });
Remove all references to display:block in the CSS.