CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
Vivek Kumar
Vivek Kumar

Reputation: 31

How to hide alert message in MVC

I am new to jQuery and MVC. I have a login scenario that shows alert messages when username or password is wrong. I have used ViewData for passing messages from controller to view and showing alert message through javascript.

After clicking on the Login button an alert message shows UserName/Password is wrong. Please try again with an OK button. Clicking on OK button closes the popup. When I press register new user it navigates me to the register page but when I press back button for login screen the alert message shows again on login screen. Below is the code that I am working.

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public ActionResult Login(LoginModel model, string returnUrl)
{
    if (ModelState.IsValid)
    {
        var result = _proxy.Get<LoginResult>(string.Format("{0}api/Login/Login?userName={1}&password={2}", ConfigurationUtils.GetValue("ApplicationServiceUri"), model.UserName, model.Password));

        if (result.Success)
        {
        }
        else
        {
            TempData["alertMessage"] = result.Message;
            return View();
        }
    }

    return View(model);
}

My View script is:

$(document).ready(function () {             
    var success = @((TempData["alertMessage"] != null).ToString().ToLower());
    debugger;
    if (success == true) {
        var status = '@TempData["alertMessage"]';
        var wnd = $("#window");
        $(".spn-login-message").text(status);
        if (!wnd.data("kendoWindow")) {
            wnd.kendoWindow({
                modal: true,
                title: "Login",

                close: function () {
                    $(".open-button").show();
                },
                visible: false
            });
        }
        var dialog = $("#window").data("kendoWindow");
        dialog.center();
        wnd.data("kendoWindow").open();
        $(this).hide();

        $(".btn-primary").click(function () {
            // call 'close' method on nearest kendoWindow
            $(this).closest("[data-role=window]").kendoWindow("close");
        });
    }
    else{
        $("#btnOK").hide();

    }
});

My concern is that how to hide alert message when page refresh or back button is pressed for navigating to login page. Thanks in advance. Any help will be appreciated.

Upvotes: 3

Views: 1310

Answers (2)

Vivek Kumar
Vivek Kumar

Reputation: 31

I Have done with this situation. Thanks to all :)

Below is my code.

jQuery(document).ready(function($) {

            if (window.history && window.history.pushState) {

                $(window).on('popstate', function() {
                    var hashLocation = location.hash;
                    var hashSplit = hashLocation.split("#!/");
                    var hashName = hashSplit[1];

                    if (hashName !== '') {
                        var hash = window.location.hash;
                        if (hash === '') {

                        }
                    }
                });

                window.history.pushState('forward', null, './#forward');
            }

Upvotes: 0

robasta
robasta

Reputation: 4701

I suggest you use the Post-Redirect-Get pattern described here

So in your case, you would do this:

 if (result.Success)
    {
    }
    else
    {
        TempData["alertMessage"] = result.Message;
        RedirectToAction("Login");
    }

Notice we are redirecting (which will do a get), instead of returning the view. If the user refreshes, then they will be refreshing the get, instead of the post.

Upvotes: 1

Related Questions