在 .NET MVC 中按下提交按鈕后，如何在屏幕頂部顯示成功彈出窗口？

Question

我使用 .NET MVC 構建了一個簡單的 CRUB 應用程序。 它由一個主頁組成，該主頁顯示來自 SQL 服務器數據庫的數據表。 索引頁面有一個“新建”按鈕，可將用戶帶到創建頁面。 用戶可以從這里輸入詳細信息並創建新記錄。

我想要的是，當用戶單擊創建/提交按鈕時，他們將返回索引頁面，並且頁面頂部會出現一個成功彈出窗口，說明記錄已成功創建。

.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/

我使用了其中的大多數，根據我們的經驗，它們絕對很棒。