Ajax ModalPopupExtender avec un formulaire d'édition dans ASP.NET MVC

Question

J'ai un calendrier d'événements et sur chaque événement dans le calendrier il y a un lien d'édition qui ouvre ajax ModalPopupExtender pour éditer les informations d'événement. Le problème auquel je suis confronté en ce moment est que l'édition doit être dans un formulaire afin qu'il puisse mettre à jour les informations sur le serveur ..

Comment faire face à cela? Et quelle serait la meilleure façon de faire cela?

Answer 1

Vous pouvez utiliser jQuery pour accomplir la même fonctionnalité. J'ai dû le faire récemment pour un projet parce que je n'aimais pas la façon dont ModalPopupExtender le traitait. Malheureusement, bien que je n'ai pas construit la fonctionnalité cliquer-glisser.

Voici le code pour l'ASP.NET et XHTML:

Quelque part sur la page, vous mettez le bouton de déclenchement:

<input type="button" value="Trigger Action" class="popup-trigger-delete" /> 

Code du Panel:

<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

Afin d'obtenir au-dessus de l'échantillon de travail (désolé, ne peut pas commenter), faites ceci:

• bouton Modifier aspic bouton html
• Change « pop-up-background-supprimer -Suivi » à "pop-up-background-supprimer"
• en centerPopUp, remplacer $(background).css({ "height": windowHeight }); avec $(background).css({ "display": 'block' });
• supprimez toutes les références à display:block dans le CSS.