在.NET MVC中按下提交按钮后如何在屏幕顶部显示成功弹出窗口？

Question

我使用 .NET MVC 构建了一个简单的 CRUB 应用程序。它由一个主页组成，该主页显示来自 SQL Server DB 的数据表。索引页面有一个“新建”按钮，可将用户带到创建页面。用户可以在此处输入详细信息并创建新记录。

我想要的是，当用户单击创建/提交按钮时，他们将返回索引页面，并且页面顶部会出现一个成功弹出窗口，说明记录已成功创建。

.NET MVC 中是否有功能可以实现这一点，还是我需要使用 JavaScript 之类的东西？

这里是创建 HTML

@model LS_Position.Models.Job_Lookup_PositionType

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
<div class="form-horizontal">
    <h4>Job_Lookup_PositionType</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    <!-- Hidden field for the PositionID - No need to display this field-->
    @Html.HiddenFor(model => model.PositionID)

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

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

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

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

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

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

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

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

这是Controller中的方法

       // GET: Position/Create
        public ActionResult Create()
        {
            return View();
        }

        // POST: Position/Create
        [HttpPost]
        public ActionResult Create(Job_Lookup_PositionType position)
        {
            try
            {
                // TODO: Add insert logic here
                using (DBModels db = new DBModels())
                {
                    db.Job_Lookup_PositionType.Add(position);
                    db.SaveChanges();
                }
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

Answer 1

两种方式都有效。您可以使用 Javascript 或使用 ViewBag 将您的消息传递到发布的页面。

如果你将使用 ViewBag，你可以使用 boostrap 的警报，你可以在这里找到：

https://getbootstrap.com/docs/4.0/components/alerts/

如果你会使用 Javascript，你可以使用 Toastr 库：

https://codeseven.github.io/toastr/

如果您不想回发到新页面，也可以通过 Sweetalert 使用 Json：

https://sweetalert2.github.io/

我使用了其中的大部分，根据我们的经验，它们绝对很棒。