After success submit show welcome-modal

Question

I have form

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new {id = "registrationForm"})) {...}

where i put some data(email, password, etc.)

Also i have method for this form :

[HttpPost] [AllowAnonymous] [ValidateAntiForgeryToken] public ActionResult Register(RegisterViewModel model) {... return RedirectToAction("Index");}

In that method i manage model (try to create new user) and if all is success. redirect to action "Index".

---

Issue : i need to show bootstrap modal with some text "Welcome..." after i create new user but before redirect. How can i do it?

---

I try to call ajax submit for that form (only for success action to show that modal, but no success)

Answer 1

You may choose to store a message in your model, then on the page, using razor, check if that property has a value, if it does, then execute a script on the bottom of your page.

something like

@if (Model.Message != null){
<script>
    //set the message on the dialog
    ...
    //call bootstrap modal
    $('#myModal').modal(options);
</script>
}

See here: http://getbootstrap.com/javascript/#modals

EDIT: If you want this to appear before you redirect, then you can use an @Ajax.ActionLink

Basically, you would submit your form, then on success, you can set a javascript function that will execute. At this point, you can then call your dialog.

You can use the bootstrap modal's hidden event to then trigger the redirect

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something... like a redirect
})

UPDATE

Here is a very crude example i whipped up real fast. Except this uses an Ajax form:

Using a fresh, brand new project, on the Index.cshtml page I added the following

@using (Ajax.BeginForm("Register", "Home", new AjaxOptions() { HttpMethod = "Post", OnSuccess = "success" }))
{
    @Html.TextBox("name")

    <button type="submit" >Register</button>
}

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                Welcome, <span id="username"></span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>

            </div>
        </div>
    </div>
</div>



@section scripts{
    <script>
        function success() {

            $('#username').text($('#name').val());

            $('#myModal').modal();

            $('#myModal').on('hidden.bs.modal', function (e) {
                window.location = "/Home/About";
            });

        }
    </script>
}

controller:

[HttpPost]
public ActionResult Register(string name)
{
    return View("Index");
}

Don't forget to include the jquery.unobtrusive-ajax.min.js file (get it from nuget if you don't have that package installed)