Displaying twitter bootstrap alert after MVC4 form submit

Question

I have a very simple form in MVC 4.0, my project is based off the bootstrap3 for MVC4 VS2012 template. All I wish to do is have the user submit the form, then do some validations in my controller, and then based on what I pass back to the view, it should show a bootstrap alert(either error or success)

I have the form wired up so that it when I click Send it correctly fires the correct action on the controller. But I'm unsure about the following thing:

How do I hide the alert so it only shows after I return a result to the view.
I wish to display either an error or success alert, would I do this in jQuery, through .addClass?

![enter image description here][1]

[1]:

<div class="panel panel-info">
<div class="panel-heading"><strong>Register your interest</strong></div>
<p></p>

<div class="panel-body">

    <form name="contactform" class="form-inline" role="form" method="post" action="/Home/Contact">

        <div class="form-group">
            <label class="text-info">Name</label>
            <input type="text" class="form-control" placeholder="Name">
        </div>
        <p></p>
        <div class="form-group">
            <label class="text-info">Email</label>
            <input type="email" class="form-control" placeholder="Email">
        </div>
        <p></p>
        <div class="form-group">
            <label class="text-info">Comments</label><br />
            <textarea class="form-control" cols="20" rows="2" style="width: 400px; height: 150px; max-height: 350px; max-width: 500px"></textarea>
        </div>
        <p></p>

        <button id="myBtn" type="submit" value="send" class="btn btn-primary">Send</button><p />


        <div class="alert alert-success" >             
            <strong>Thank you!</strong> Your query has been submitted. 
        </div>

    </form>

</div>

you want straight MVC validation. It'll do exactly what you want, and it's built in. You should research ViewModels — Jonesopolis, May 08 '14 at 02:51
try [this](http://stackoverflow.com/a/30323853/2218697) to **return bootstrap alert message** — Shaiju T, May 19 '15 at 11:10

score 4 · Accepted Answer · answered May 08 '14 at 03:03

I'll start by suggesting you research ViewModels as Jonesy suggests above, but to answer your question, a simple way (probably not the most elegant) is to set a ViewBag property in your controller for example like this:

... (code that validates data sent from view)
ViewBag.TheResult = true;
...

Then, change your view:

@if (ViewBag.TheResult == true) {
<div class="alert alert-success" >             
    <strong>Thank you!</strong> Your query has been submitted. 
</div>
}

This will make sure that the form only shows the alert if you validated the form successfully. Make sure you set the value of TheResult even if negative, because the view will be expecting to see that in the ViewBag.

As for your second question, you can resolve it in a similar way without JQuery by simply setting the value of the class in the ViewBag and using it in the markup.

score 1 · Answer 2 · answered May 08 '14 at 06:21

I just ended up using knockout and JS.

<div class="panel panel-info">
<div class="panel-heading"><strong>Register your interest</strong></div>
<p></p>

<div class="panel-body">

    <form name="contactform" class="form-inline" role="form" method="post" action="/Home/Contact">

        <div class="form-group">
            <label class="text-info">Name</label>
            <input type="text" data-bind="value: Name" class="form-control" placeholder="Name">
        </div>
        <p></p>
        <div class="form-group">
            <label class="text-info">Email</label>
            <input type="email" data-bind="value: Email" class="form-control" placeholder="Email">
        </div>
        <p></p>
        <div class="form-group">
            <label class="text-info">Comments</label><br />
            <textarea data-bind="value: message" class="form-control" cols="20" rows="2" style="width: 400px; height: 150px; max-height: 350px; max-width: 500px"></textarea>
        </div>
        <p></p>

        <button id="mysubmit" type="submit" value="send" data-bind="click: btnCreateContact" class="btn btn-primary">Send</button><p />

        <div id="myalert" class="alert alert-success" hidden="hidden">
            <strong>Thank you! </strong> Your request has been submitted.
        </div>

        <div id="myalertError" class="alert alert-danger" hidden="hidden">
            <strong>Error! </strong>Please complete all fields.
        </div>

    </form>

</div>

KNOCKOUT

var urlPath = window.location.pathname;
var CreateContactVM = {

    Name: ko.observable(),
    Email: ko.observable(),
    message: ko.observable(),
    btnCreateContact: function () {

        $.ajax({
            url: urlPath + '/Contact',
            type: 'post',
            dataType: 'json',
            data: ko.toJSON(this),
            contentType: 'application/json',
            success: function (result) {
                window.location.href = urlPath;
            },
            error: function (err) {
                if (err.responseText == "success") {
                    $('#myalertError').hide();
                    $('#myalert').show();
                    $('#mysubmit').prop('disabled', true);
                }
                else {
                    $('#myalert').hide();
                    $('#myalertError').show();                 
                }
            },
            complete: function () {
            }
        });

    }
};

ko.applyBindings(CreateContactVM);

Displaying twitter bootstrap alert after MVC4 form submit

2 Answers2