How I can open popup window from controller action using form post method in mvc

Question

I want to call the popup after the controller using form post method so that after the data entry the information can be shown by popup.

Here is my code

View

@using (Html.BeginForm())  
{
    @Html.AntiForgeryToken()  
    <div class="form-horizontal">  

        <input type="submit" value="Send" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="margin-left:195px"/>  
    </div>    

        <div class="container">
        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content" style="background-color: green">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <h2>
                            <p style="color: red;">@ViewBag.Status</p>
                        </h2>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>

            </div>
        </div>

    </div>
}  

Controller

[HttpPost]
public ViewResult Index(SchoolWebApplication.ViewModel.MailModelViewModel _objModelMail)
{
    try
    {
        ViewBag.Status = "Email Sent Successfully.";
        return View(); 
    }
    catch (Exception)
    {
        ViewBag.Status = "Problem while sending email, Please check details.";
        return View("../Error");
    }
}

Now in this code, I am calling the popup by button click event.

Now problem is that this popup is called when the button is clicked and before the controller called.

But I don't want it like that.

I want that when the button is clicked it goes to the controller and after that, the popup will be generated. So, that the success message will call in the popup.

Thank You.

Answer 1

Try this

In the Controller

TempData["ProcessMessage"] = "Email Sent Successfully.";
TempData["displayModal"] = "myModal";
return View(); 

In the View

@if (TempData["displayModal"] != null)
 {
   var modal = TempData["displayModal"].ToString();
    <script type='text/javascript'>
        $(document).ready(function(){
            $('#@modal').modal('show');
        });
    </script>
 }

And in the modal

  <p style="color: red;">@TempData["ProcessMessage"]</p>

Answer 2

As per the comment, you do not want to use an ajax form submit. In that case, what you can do is, after executing your code inside the http post action, return a redirect response to the GET action. Use TempData to pass the message you want to pass and in the view rendered by the GET action, check the TempData dictionary for the value you set earlier and execute the needed javascript code to fire up the modal dialog on the page load/document ready event.

[HttpPost]
public ViewResult Index(MailModelViewModel _objModelMail)
{
    try
    {
        TempData["message"] = "Email Sent Successfully";
        return RedirectToAction("Index");
    }
    catch (Exception ex)
    {
        // to do :Log your exception
        ModelState.AddModelError(string.empty,"Problem while sending email");
        return View("../Error");
    }
}

Now in the view rendered by your Index GET action, you will check the TempData dictionary and show the modal. Since we are doing it programaticaly, no need to fire it on your submit button click. So use another submit button for your form. Also, read the TempData item for the message you want to show in your modal body.

@using (Html.BeginForm())  
{
    @Html.TextBoxFor(a=>a.Email)
    <input type="submit"/>
}
<!-- your existing code for the modal dialog markup goes here-->
<!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">

        <div class="modal-body">
            <h2><p style="color: red;">@TempData["message"]</p> </h2>
        </div>

    </div>
 <!-- Add the markup needed to render the modal dialog ends here-->
@section Scripts
{
    <script>
       $(function() {
           var r = '@TempData["message"]';
           if (r.length>0)
           {
                $('#myModal').modal('show');
           }
        });
    </script>
}