Ajax ModalPopupExtender with an edit form in ASP.NET MVC

Question

hi Everyone,

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.