Refreshing the bootstrap modal in ASP.NET MVC with Ajax

Question

I have a bootstrap modal.When I click the submit button, the page gets refreshed and lose the modal.I want to stay with the modal after submit button click either to display success message or error message.I am new to MVC and I couldn't figure it out.

This is my modal

<div class="modal fade" id="signin_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class=" modal-header">
                Create An Account
            </div>

            <div class="modal-body">

                @using (Html.BeginForm("Login", "Home", FormMethod.Post))
                {
                    <table>


                        <tr><td>@Html.Label("username", null, new { style = " font-size:12px; font-weight:normal; font-family:consolas; " })</td></tr>
                        <tr><td>@Html.TextBox("name", null, new { style = " width:200px; height:30px; " })</td></tr>


                        <tr> </tr>

                        <tr><td>@Html.Label("password", null, new { style = " font-size:12px; font-weight:normal; font-family:consolas; " })</td></tr>
                        <tr><td>@Html.TextBox("password", null, new { style = " width:200px; height:30px " })</td></tr>

                    </table>
                }

            </div>

            <div class="modal-footer">
                <button type="submit" class="btn btn-success">Sign in</button>
                @*<button type="reset" class="btn btn-warning">Reset</button>*@
                <button type="reset" class="btn btn-default">Reset</button>
            </div>

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

hutchonoid · Accepted Answer · 2015-01-16 16:29:49Z

I know this is an old question but this is how I would do this.

Providing you are using strongly typed view models, you could add a property named IsModalShown i.e.

public class Foo
{
    public bool IsModalShown { get; set; }
}

Render this as a hidden for in your view i.e.

@Html.HiddenFor(m => m.IsModalShown)

When the modal is opened set the hidden value to true, this will enable the modal state to be posted back to the controller action i.e.

$('#signin_modal').on('show.bs.modal', function (e) {
    $('#IsModalShown').val(true);
})

Please note the above will depend on the version of bootstrap you are using but there are other docs on the official site

Then add the following to your view that automatically pops it up

$(function(){
    @if(Model.IsModalShown)
    {
        $('#signin_modal').modal('show');
    }
});

The other fields that are shown within the popup can also be set with properties in the model.

Collectives™ on Stack Overflow

Refreshing the bootstrap modal in ASP.NET MVC with Ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related