Ajax ModalPopupExtender с формой редактирования в ASP.NET MVC - PullRequest
Новая
       12

Ajax ModalPopupExtender с формой редактирования в ASP.NET MVC

1 голос
/ 22 января 2009

У меня есть календарь событий, и для каждого события в календаре есть ссылка для редактирования, которая открывает ajax ModalPopupExtender для редактирования информации о событии. Проблема, с которой я сталкиваюсь сейчас, заключается в том, что редактирование должно быть в форме, чтобы оно могло обновлять информацию на сервере.

Как мне справиться с этим? И как лучше всего это сделать?

Ответы [ 2 ]

0 голосов
/ 22 июня 2009

Чтобы получить приведенный выше пример работы (извините, не могу комментировать), сделайте следующее:

  • Изменить кнопку asp на кнопку html
  • Измените "popup-background-delete-track" на "popup-background-delete"
  • В centerPopup замените $(background).css({ "height": windowHeight }); на $(background).css({ "display": 'block' });
  • Удалить все ссылки на display:block в CSS.
0 голосов
/ 22 января 2009

Вы можете использовать jQuery для достижения той же функциональности. Мне пришлось сделать это недавно для проекта, потому что мне не нравилось, как ModalPopupExtender справлялся с этим. К сожалению, хотя я не создавал функциональность перетаскивания щелчком и перетаскиванием.

Вот код для ASP.NET и XHTML:

Где-то на странице вы положили кнопку запуска: 

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

Код панели: 

<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; }
...