Question

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

控制器

        [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
    }

这是视图中的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在你的控制器中，并且需要在你的视图中作为模型的一部分进行处理，或者，如果你在视图中有权访问TempData，那么你需要在这样的Razor块中定义它：

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

然后在准备好的文件中，你可以这样做：

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

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

</script>

Answer 2

表达式TempData是服务器端代码，因此您应该在其前面添加@。

我喜欢将脚本呈现在if条件中，这样如果TempData.ContainsKey("Success")返回false，脚本将不会呈现给页面（编译和解析的脚本更少）

$(document).ready(function ()
{
    @if(TempData.ContainsKey("Success"))
    {
        @:toastr.success("Message Sent Successfully");
    }
});

在表单提交上显示Toast通知

2 个答案: