make pop up stay on page upon saving (colorbox)

I have a form which you can edit the user. this form is shown as a pop up (I am using colorbox plugin). After i click save, i want it to stay on the pop up page instead of closing the popup so i can display a text like "successfully saved info". Right now, whenever i click on save it closes the popup form and returns to the previous page. Can i make my popup stay upon saving? Any help is appreciated

VIEW

  $('.openDialog').colorbox({
                  transition: "elastic",
                  width: "40%", height: "80%"
              });

CONTROLLER

 [HttpPost]
        public ActionResult Edit(UserViewModel vm)
          {
                Save(vm);
                return View(vm);
          }

VIEW

<input type="submit" value="Save" id="btnSave" class="openDialog"/>

tried using ajax form submit but popup doesn't go to the controller, i added the unobtrusive script to the page and web config as well as jquery 1.8 still not good

 @using (Ajax.BeginForm("Edit", "User",
            new AjaxOptions
            {
                HttpMethod = "POST",
                InsertionMode = InsertionMode.Replace
            }))

Solution

Just use colorbox with the iframe property set to true. When you show the form initially, add the parameter iframe: true.

Don't call $.colorbox again on the click, so your input tag in the view should just be:

<input type="submit" value="Save" id="btnSave" />

When you click the submit button, the form submit occurs, and the results will return in the same colorbox iframe. Colorbox is internally using AJAX and creating the iframe to handle all of this for you, nothing could be easier.

To see this approach in action, View http://www.jacklmoore.com/colorbox/example1/, and look at the iFrame example called "Outside Webpage (iFrame)", where it gets a Wiki search page, then submits the form, all within the same colorbox.