return partialview after httppost asp.net mvc

Question

I am creating a web app in asp.net mvc

I have a partial view to reset password which opens inside bootstrap modal,

now on HttpPost I have a if condition which looks like below

if (string.IsNullOrEmpty(model.NewPassword))
{
    TempData["PMessage"] = CustomHelper.Translate("Please Enter new Password");
    return PartialView(model);
}

but my main url is changing to this partial view like below

http://localhost:8080/User/ResetPassword

here ResetPassword is my partialview name

my partialView looks like below

@(Html.BeginForm("ResetPassword", "User", FormMethod.Post))
{
<div class="modal-dialog modal-sm">
    <!-- Modal data-->
</div>
}

my full post method

[HttpPost]

public ActionResult ResetPassword(ResetPasswordModel model)
{
    if (string.IsNullOrEmpty(model.NewPassword))
    {
        TempData["PMessage"] = "Please Enter new Password";
        return PartialView(model);
    }
    //if success
    return RedirectToAction("Index");
}

how can I prevent this, I just want to load modal and not whole page,

what can be the fixes here?

or Should I go for client side validation?

Page flow in detail

this is how my page looks

if the user clicks on reset password, the below bootstrap modal appears

without entering any data if user clicks on OK, post method has been called and the page is being redirected to resetpassword.cshtml as I am returning like below

return PartialView(model);

what I need to do if I only want to refresh modal/partial view on validation on controller

Answer 1

You are making normal HTTP request it's used to handle regular browser calls (like form submits) and return full HTML pages to client.

In your case you have to make ajax request to handle ResetPassword post method to avoid redirect.

<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

this url return your reset form and load it into a modalcontent

<a href="@Url.Action("Reset", "Account", new { class = "resetpassword" })" ></a>


$(function () {
            $(document).on("click", "a.resetpassword", function (e) {
                $('#myModalContent').load(this.href, function () {
                    $('#myModal').modal({
                        /*backdrop: 'static',*/
                        keyboard: true
                    }, 'show');
                    bindForm(this);
                });
                return false;
            });
        });

        function bindForm(dialog) {
            $('form', dialog).submit(function (e) {
                e.preventDefault();
                if ($('#resetFormId').valid()) {
                    $.ajax({
                        url: this.action,
                        type: this.method,
                        data: $(this).serialize(),
                        success: function (result) {
                            if (result.success) {
                                $('#myModal').modal('hide');
                            } else {
                                $('#myModalContent').html(result);
                                bindForm(dialog);
                            }
                        }
                    });
                }
                return false;
            });
        }