javascript - 在表单提交时显示 Toast 通知

Question

我是 ASP.NET MVC 5 的新手。当我在 MVC 5 中提交表单时，我无法显示 Toast 通知。单击“提交”后，它不会显示在页面上。这是代码:

Controller

        [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Contact(ContactData formdata)
    {

        //what is supposed to happen when form is successful and there are no validation errors
        if (ModelState.IsValid)
        {
            var data = new ContactData
            {
                FirstName = formdata.FirstName,
                LastName = formdata.LastName,
                Email = formdata.Email,
                Message = formdata.Message

            };

            //add the message to the messages table and then save the changes
            _dbContext.Messages.Add(data);
            _dbContext.SaveChanges();
            TempData["Success"] = "Success";
            return RedirectToAction("Contact","Home");
        }
        return View(formdata); //else re display the form showing the validation errors
    }

这是 View 中的 JavaScript:

@section Scripts{

    <script>
        $(document).ready(function () {

            if (TempData.ContainsKey("Success")) {
                toastr.success("Message Sent Successfully");
            }

        }

    </script>
}

注意:我使用 HTML 帮助器方法而不是 JQuery 实现了表单。这是我的表格:

  @using (Html.BeginForm("Contact", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
    {
        <br /><br />
        @Html.AntiForgeryToken()
        @Html.ValidationSummary() <!--shows a list of the validation errors-->
        <div class="row col-sm-12 col-md-12 col-lg-12">

            <div class="col-sm-4 col-md-4 col-lg-4">
                <strong>Leave a Message:</strong>
            </div>

            <span class="clearfix"></span> <!--makes the content go to the left-->
            <div class="form-group col-sm-4 col-md-4 col-lg-4" style="margin-left:4px;">
                @Html.LabelFor(t => t.FirstName)
                @Html.TextBoxFor(t => t.FirstName, new { @class = "form-control" })
                @Html.ValidationMessageFor(t => t.FirstName, String.Empty, new { @style = "color:red;!important" })
            </div>
            <span class="clearfix"></span>

            <div class="form-group col-sm-4 col-md-4 col-lg-4" style="margin-left:4px;">
                @Html.LabelFor(t => t.LastName)
                @Html.TextBoxFor(t => t.LastName, new { @class = "form-control" })
                @Html.ValidationMessageFor(t => t.LastName, String.Empty, new { @style = "color:red;!important" })
            </div>
            <span class="clearfix"></span>

            <div class="form-group col-sm-4 col-md-4 col-lg-4" style="margin-left:10px;">
                @Html.LabelFor(m => m.Email)
                @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
                @Html.ValidationMessageFor(m => m.Email, String.Empty, new { @style = "color:red;!important" })
            </div>
            <span class="clearfix"></span>

            <div class="form-group col-sm-4 col-md-4 col-lg-4" style="margin-left:10px;">
                @Html.LabelFor(m => m.Message)
                @Html.TextAreaFor(m => m.Message, new { @class = "form-control" })
                @Html.ValidationMessageFor(m => m.Message, String.Empty, new { @style = "color:red;!important" })
            </div>
            <span class="clearfix"></span>


            <div class="form-group col-sm-4 col-md-4 col-lg-4" style="margin-left:10px;">
                <input id="btnRegister" type="submit" class="btn btn-success" value="Submit" />
            </div>

        </div>
    }

我不知道我做错了什么。谢谢。

Answer 1

我认为问题在于 TempData 在您的 Controller 中，并且需要在您的 View 中作为模型的一部分进行处理，或者，如果您可以在 View 中访问 TempData，则需要定义它位于 Razor block 中，如下所示:

<script>
    var jsTempDataSuccess = '@TempData["Success"]';
</script>

然后在准备好的文档中，您可以执行以下操作:

<script>
    $(document).ready(function () {

        if (jsTempDataSuccess && jsTempDataSuccess == "Success") {
            toastr.success("Message Sent Successfully");
        }
    }

</script>