asp.net-mvc - Viewbag 内容不出现

Question

我有一个 APS.Net Web 应用程序 Razor 视图，我尝试在其中显示 Viewbag.errormessage。

action 方法填充 viewbag，但视图不显示 viewbag 中的错误消息。它没有出现。为什么？

Viewbag 附加到的段落甚至没有出现在第二张图片中。在第一张照片中，我可以看到它在那里。

我也尝试使用“TempData”，但它产生了相同的结果——没有出现。

这是操作方法（简化）：

    [HttpPost]
    public async Task<ActionResult> DeleteUserAccount(string userName, string 
    password)
    {
        try
        {
            if (string.IsNullOrEmpty(userName) || 
            string.IsNullOrEmpty(password))
            {
                ViewBag.errormessage = "The 'user name' or 'password' is 
                invalid - empty. Please try again.";
            }
            else
            {
                // Cast.
                if ((string)Session["UserName"] == userName)
                {

                }
                else
                {
                   ViewBag.errormessage = "Your 'user name' is invalid. It 
                   is not the same as the 'user name' used at original sign 
                   in. Please try again.";
                }
            }
        }
        catch (Exception ex1)
        {

        }

        return View();
    }

这是视图：

@Html.AntiForgeryToken()

<div class="login-panel">
    @if (ViewBag.errormessage != null)
    {
        <p class="alert alert-danger" id="errorMessage">@ViewBag.errormessage</p>
    }

    <div class="form-group">
        <div class="col-md-12 col-xs-12">
            <h2>Delete Account</h2>
            <br />
            <h4 class="verify"><strong>I will need to verify your identity in order to delete your account.</strong></h4>
            <br />
            <h4 class="verify"><strong>Please provide the following:</strong></h4>
        </div>
    </div>
    <br />
    <div class="form-group">
        <div class="col-md-12 col-xs-12">
            <br />
            <label class="manadatory" for="UserName">User Name</label>
            <input id="UserName" type="text" value="" name="UserName">
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-12 col-xs-12">
            <br />
            <label class="manadatory" for="Password">Password</label>
            <input id="Password" type="text" value="" name="Password">
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-0 col-md-10">
            <br />
            <input class="btn btn-primary deleteUserAccount" value="Delete Account">
            @Html.ActionLink("Cancel", "Index", "User", null, new { @class = "btn btn-info" })
        </div>
    </div>
</div>

<div class="modal fade" id="myModal4" role="dialog" display="none">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body" style="padding:10px;">
                <h4 class="text-center">Are you sure you want to permanently delete your account and all it contains?  Continue ?</h4>
                <div class="text-center">
                    <a class="btn btn-info btn-yes4">Yes</a>
                    <a class="btn btn-default btn-no4">No</a>
                </div>
            </div>
        </div>
    </div>
</div>

@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")

<script type="text/javascript">
$(document).ready(function () {
    $(".deleteUserAccount").click(function (e) {
        var holdUserName = $('#UserName').val();
        var holdPassword = $('#Password').val();

        $("#myModal4").modal({
            backdrop: 'static',
            keyboard: false
        });

        $(".btn-yes4").click(function () {
            $("#myModal4").modal("hide");

            // Do the delete.
            // - Pass the 2 fields.
            $.ajax({
                type: 'POST',
                url: '@Url.Action("DeleteUserAccount", "User")',
                data: { userName: holdUserName, password: holdPassword},
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                error: function (xhr, ajaxOptions, thrownError) {
                    alert('Critical Error: something is wrong in the call to DeleteUserAccount for delete! Status: ' + xhr.status + '. Error: ' + thrownError.toString() + '. Response Text: ' + xhr.responseText);
                }
            });

            // Return.
            return true;
        });

        $(".btn-no4").click(function () {
            $("#myModal4").modal("hide");
            return false;
        });

        $("#myModal4").on('hidden.bs.modal', function () {
            $("#myModal4").remove();
        });
    });
})
</script>

标签： asp.net-mvcrazor

Answer 1

https://dotnetfiddle.net/MF18yG

Ajax 进行调用并且不重新呈现页面

控制器

[HttpPost]
//I made method snchronous as it has no await, and there are no resources to add await to
public ActionResult DeleteUserAccount(string userName, string password)
{
    var errorMessage = String.Empty;
    try
    {

        if (string.IsNullOrEmpty(userName) ||
        string.IsNullOrEmpty(password))
        {
            //since this method is ajax, the view will not re-render, so errors need
            //to go into return value.
            //ViewBag.errormessage = "The 'user name' or 'password' is invalid - empty.Please try again.";
            errorMessage = "The 'user name' or 'password' is invalid - empty.Please try again.";
        }
        else
        {
            // Cast.
            if ((string)Session["UserName"] == userName)
            {

            }
            else
            {
                //ViewBag.errormessage = "Your 'user name' is invalid. It is not the same as the 'user name' used at original sign in. Please try again.";
                errorMessage = "Your 'user name' is invalid. It is not the same as the 'user name' used at original sign in. Please try again.";
            }
        }
    }
    catch (Exception ex1){}

    //return View();
    //since this is ajax, I am returning a json
    return Json(errorMessage, JsonRequestBehavior.AllowGet);
}

public ActionResult Index19()
{
    return View();
}

看法

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index19</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $(".deleteUserAccount").click(function (e) {
            //put this in here
            $("#myModal4").modal({
                backdrop: 'static',
                keyboard: false
            });
        //fixed the following line
        });


        $(".btn-yes4").click(function () {
            //put these here
            var holdUserName = $('#UserName').val();
            var holdPassword = $('#Password').val();

            $("#myModal4").modal("hide");

            // Do the delete.
            // - Pass the 2 fields.
            $.ajax({
                type: 'POST',
                url: '@Url.Action("DeleteUserAccount", "Home")',
                data: { userName: holdUserName, password: holdPassword },
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                success: function (data) {
                    if (data.length > 0) {
                        $("#errorMessage").css("display", "block");
                    }
                    else {
                        $("#errorMessage").css("display", "none");
                    }
                    $("#errorMessage").text(data);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert('Critical Error: something is wrong in the call to DeleteUserAccount for delete! Status: ' + xhr.status + '. Error: ' + thrownError.toString() + '. Response Text: ' + xhr.responseText);
                }
            });

            // Return.
            return true;
        });

        $(".btn-no4").click(function () {
            $("#myModal4").modal("hide");
            return false;
        });

        //$("#myModal4").on('hidden.bs.modal', function () {
        //    $("#myModal4").remove();
        //});
    });
    </script>
</head>
<body>
    @Html.AntiForgeryToken()

    <div class="login-panel">
        @*took out condition, and started with style none*@
        @*@if (ViewBag.errormessage != null)
        {*@
            <p class="alert alert-danger" id="errorMessage" style="display:none">@ViewBag.errormessage</p>
        @*}*@

        <div class="form-group">
            <div class="col-md-12 col-xs-12">
                <h2>Delete Account</h2>
                <br />
                <h4 class="verify"><strong>I will need to verify your identity in order to delete your account.</strong></h4>
                <br />
                <h4 class="verify"><strong>Please provide the following:</strong></h4>
            </div>
        </div>
        <br />
        <div class="form-group">
            <div class="col-md-12 col-xs-12">
                <br />
                <label class="manadatory" for="UserName">User Name</label>
                <input id="UserName" type="text" value="" name="UserName">
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-12 col-xs-12">
                <br />
                <label class="manadatory" for="Password">Password</label>
                <input id="Password" type="text" value="" name="Password">
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-0 col-md-10">
                <br />
                <input class="btn btn-primary deleteUserAccount" value="Delete Account">
                @Html.ActionLink("Cancel", "Index", "User", null, new { @class = "btn btn-info" })
            </div>
        </div>
    </div>

    <div class="modal fade" id="myModal4" role="dialog" display="none">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body" style="padding:10px;">
                    <h4 class="text-center">Are you sure you want to permanently delete your account and all it contains?  Continue ?</h4>
                    <div class="text-center">
                        <a class="btn btn-info btn-yes4">Yes</a>
                        <a class="btn btn-default btn-no4">No</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>