How to show a success message in ASP.Net

Question

I am a beginner and learning ASP.Net MVC web development. I am stuck at one place.

I have a reset password window. If user successfully resets the password I want him to redirect to the same page but I want a "Password Reset Successful" message to be on top. It can be an alert or something. Just user should know that password has been reset. But I don't know how to achieve this. Below is what I have till now.

 [HttpPost]
    [ValidateAntiForgeryToken]
    public ViewResult WidgetResetPassword(ResetPasswordMV data)
    {
        bool isValid = false;

        isValid = ModelState.IsValid;

        // verify the 2 password match
        if (isValid && !data.NewPassword.Equals(data.ConfirmNewPassword))
        {
            isValid = false;
            ModelState.AddModelError("ConfirmNewPassword", "Passwords doesn't match.");
        }

        if (isValid)
        {
            //setting the correct tenant id
            if (Session[Constants.SESSION_USER_KEY] != null)
            {
                UserMV authenticatedUsers = (UserMV)Session[Constants.SESSION_USER_KEY];

                data.UserId = authenticatedUsers.Id;
            }

            ResetPasswordHelper.Save(data);
        }
        return View(data);
    }

My .cshtml file:

@model ResetPasswordMV
@using SIM_Obj.ModelViews;

@{
    ViewBag.Title = "Reset Password";
}

@using (Html.BeginForm())
{
        @Html.AntiForgeryToken()

@*    <div id="ResetPasswordWidget" class="form-horizontal">*@
        <div id="ResetPasswordWidget" class="form-horizontal-width-inherit">
            <h3>Reset Password</h3>
            <hr/>

            @Html.ValidationSummary(true, "", new {@class = "text-danger"})

            @Html.HiddenFor(model => model.UserId)

            <div class="form-group">
                @Html.LabelFor(model => model.OldPassword, htmlAttributes: new {@class = "control-label col-md-2"})
                <div class="col-md-10">
                    @Html.EditorFor(model => model.OldPassword, new {htmlAttributes = new {@class = "form-control"}})
                    @Html.ValidationMessageFor(model => model.OldPassword, "", new {@class = "text-danger"})
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.NewPassword, htmlAttributes: new {@class = "control-label col-md-2"})
                <div class="col-md-10">
                    @Html.EditorFor(model => model.NewPassword, new {htmlAttributes = new {@class = "form-control"}})
                    @Html.ValidationMessageFor(model => model.NewPassword, "", new {@class = "text-danger"})
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.ConfirmNewPassword, htmlAttributes: new {@class = "control-label col-md-2"})
                <div class="col-md-10">
                    @Html.EditorFor(model => model.ConfirmNewPassword, new {htmlAttributes = new {@class = "form-control"}})
                    @Html.ValidationMessageFor(model => model.ConfirmNewPassword, "", new {@class = "text-danger"})
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Reset Password" class="btn btn-default"/>
                </div>
            </div>
        </div>
    }

I want to be able to add something like:

<p class ="alert alert-success"> <strong>Success! </strong>Your Password has been successfully changed.</p>

Question 1: How to get this

to be displayed when password is reset.

Question 2: Currently I am doing return view(data) in the controller. Is it necessary.

Question 3: Can I use something like partialview. I am beginner. Please guide me.

Answer 1

I did this using ValidationMessage.

First in razor page add ValidationMessage for success and error:

@Html.ValidationMessage("ERROR", new { @class = "card-alert alert alert-danger v-message", @style = "display: none;" })
@Html.ValidationMessage("SUCCESS", new { @class = "card-alert alert alert-success v-message", @style = "display: none;" })

Then in controller you send error and success message using:

ModelState.AddModelError("SUCCESS", "Success message !");
ModelState.AddModelError("ERROR", "Error message !");

Add this code in JavaScript witch will display messages when needed:

$(".validation-message").each(function () {
    if ($(this).text() !== "") {
        $(this).css("display", "block");
    }
});

Answer 2

Add a property like ShowMessage to your model and set it if the reset was successful.

Change the view to

@if (model.ShowMessage)
{
    <p class="alert alert-success"> <strong>Success! </strong>Your Password has been successfully changed.</p>
}

Answer 3

...

ViewBag.SaveResult=true;
return View(data);

..... in view page

@if (ViewBag.SaveResult == true) {
<div class="alert alert-success" >             
<strong>Success! </strong>Your Password has been successfully changed.</div>


}