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

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

我已经使用.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")
}

以下是控制器中的方法

       // 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();
            }
        }

解决方法

两种方法都有效。您可以使用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/

我用了大多数，根据我们的经验，它们绝对很棒。