Question

嘿frenz在我的mvc 3项目中，我需要一个弹出框。实际上当用户点击编辑按钮时，我需要将编辑视图页面显示为弹出框，并将编辑后的数据保存在数据库中。

简单地说，我需要用编辑弹出框替换编辑视图页面。我知道我需要使用ajax和jquery。但是混淆了如何实现它。

所以，对此的任何想法将不胜感激

Answer 1

我也遇到过这种情况，我更喜欢一些样式表，而不是使用任何第三方控件。我在这里写示例代码。

 <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
 <html>
 <head>
 <title>LIGHTBOX EXAMPLE</title>
 <style>
 .black_overlay{
 display: none;
 position: absolute;
 top: 0%;
  left: 0%;
  width: 100%;
   height: 100%;
  background-color: black;
  z-index:1001;
  -moz-opacity: 0.8;
 opacity:.80;
 filter: alpha(opacity=80);
}
 .white_content {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  z-index:1002;
  overflow: auto;
  }
  </style>
  </head>
  <body>
  <p>This is the main content. To display a lightbox click <a href = “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block’”>here</a></p>
  <div id=”light” class=”white_content”>This is the lightbox content. <a href = “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’none’;document.getElementById(‘fade’).style.display=’none’”>Close</a></div>
  <div id=”fade” class=”black_overlay”></div>
  </body>
  </html>

Onclick事件您需要在该div中显示用户控件。我已经使用了json对象。 Javascript代码就是这样。

function ShowPopups(cntrlId, controllerName, actionName, className, id) {
  var url = controllerName + "/" + cntrlId;
 elementId = id;
  $.ajax(
  {
    type: "POST",
    url: "/" + controllerName + "/" + actionName,
    data: "Display=" + cntrlId,
    dataType: "html",
    success: function (result) {
        removeClass('light1');
        changeClass('light1', className);
        document.getElementById('light1').style.display = 'block';
        document.getElementById('fade1').style.display = 'block'
        $("#light1").html(result);
    }
});

}

 function HidePopup() {
   var url = document.location.hash;
   document.getElementById('fade1').style.display = 'none';
  document.getElementById('light1').style.display = 'none';
   document.location.hash = url;
}

 // To Add and Remove class using javascript 

 function removeClass(elementID) {
  var element = document.getElementById(elementID);
  element.className = '';
}

function changeClass(elementID, newClass) {
   var element = document.getElementById(elementID);
   element.className += newClass;

}

Answer 2

你可以使用JQuery模式对话框（使用模型表单）它非常简单，这里是带有示例的文档。 http://jqueryui.com/demos/dialog/#modal-form

Answer 3

我还推荐Jquery UI模型对话框，你还想尝试其他东西，这里是Jquery Model PopUp的列表Samples

Answer 4

许多其他教程没有介绍如何实际编辑数据，只介绍如何显示对话框。当您尝试发布表单时，整个窗口将发布并更改。

jQuery ui的对话框方法有时会有一些有趣的行为，除非你解析新加载的内容，否则默认情况下验证不起作用。话虽如此，我最近发现的最好的整体代码是这个解决方案来处理ajax加载和发布。

http://nickstips.wordpress.com/2011/08/11/asp-net-mvc-ajax-dialog-form-using-jquery-ui/

在mvc 3中弹出框

4 个答案: