Postback events not working in pop up Asp.net

Most popup  such as bpopup , colorbox, lightboxt etc   move the content to the body, so if the form is not inside the popup div, the form elements ar no longer in the form, and not included in the postback. Look at the produced html using firbug in browser here you can find that html outside the from tag. So you  have to write javascript program to move the content from  body tag to from tag for example :

<script type="text/javascript">

        $(function () {

            var colorbox = $('.inline').colorbox({ open: true, inline: true, onOpen: ContentMovePostBack });

          

        });

        function ContentMovePostBack() {

            $("div#cboxOverlay").appendTo("form:first");

            $("div#colorbox").appendTo("form:first");

        }

    </script>

bpopup

                $('#my-button').bind('click', function (e) {

                    e.preventDefault();

                    $('#UserPopup').bPopup();

                    //

                    $('#UserPopup').appendTo("form:first");

                });

Ajax form in MVC

Ajax.BeginForm   It performed the Ajax request.  Example using Ajax.BeginForm  is gvien below

Model:

public class EmployeeModel

{

    [Required]

    public string Name { get; set; }

      [Required]

    public string City { get; set; }

}

Controller:

       public ActionResult Index()

    {

        return View(new EmployeeModel());

    }

[HttpPost]

    public ActionResult Index(EmployeeModel model)

    {

         //save Data

        return Content("Thanks", "text/html");

    }

View

Now to handle the request we add "UnobtrusiveJavaScriptEnabled" as a key in the web.config file under the "<appSettings>" section.

<appSettings>
    <add key="webpages:Enabled" value="false" />
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

@model  WebApplication5.Models.EmployeeModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/index.js")" type="text/javascript"></script>

<div id="result"></div>

@using (Ajax.BeginForm("PerformAction",

    new AjaxOptions { OnSuccess = "OnSuccess", OnFailure = "OnFailure" }))

{

    @Html.EditorFor(x => x.Name)

    @Html.ValidationMessageFor(x => x.Name)

   

     @Html.EditorFor(x => x.City)

    @Html.ValidationMessageFor(x => x.City)

    <input type="submit" value="OK" />

}

<div id="response"> </div>

<script>

    function OnSuccess(response) {

        $("#response").html(response)

      

    }

    function OnFailure(response) {

        alert("error occur");

    }

</script>