After success submit show welcome-modal


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)


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){
    //set the message on the dialog
    //call bootstrap modal

See here:

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('', function (e) {
  // do something... like a redirect


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" }))

    <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 class="modal-body">
                Welcome, <span id="username"></span>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>


@section scripts{
        function success() {



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



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)

By : Eric

This video can help you solving your question :)
By: admin