CODEWITHSUNDEEP
asp.net-mvc-3
Nhuren
Nhuren

Reputation: 513

Pop up box in mvc 3

Hey frenz In my mvc 3 project i need a pop up box. Actually when the user click the edit button, I need to show the Edit View page as pop up box and save the edited data in database.

Simply, I need to replace the edit view page with edit pop up box. I know that i need to use ajax and jquery. But confuse how to implement it.

So, Any idea about this will be greatly appreciated

Upvotes: 0

Views: 2197

Answers (4)

user946393
user946393

Reputation:

I have also faced such type of situation and I preferred some style sheet instead of using any 3rd party control. I am writing sample code here.

 <!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 event you need to display user control in that div. I have used json object for that. Javascript code is like this.

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;

}

Upvotes: 1

Adam Tuliper
Adam Tuliper

Reputation: 30152

So many of the other tutorials don't cover how to actually edit data, only how to show the dialog. When you try to post your form, the entire window will post and change.

jQuery ui's dialog method has some funny behavior at times, and validation won't work by default unless you parse newly loaded content. With that said, the best overall code I've found recently is this solution here to handle the ajax loading and posting.

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

Upvotes: 0

FosterZ
FosterZ

Reputation: 3911

I also recommend Jquery UI model dialog still you want to try out something else here is the list of Jquery Model PopUp Samples

Upvotes: 0

Jayantha Lal Sirisena
Jayantha Lal Sirisena

Reputation: 21376

you can use JQuery model dialog box(use model form) it is really simple, Here is the documentation with examples. http://jqueryui.com/demos/dialog/#modal-form

Upvotes: 0

Related Questions