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

Posted 2023-05-09

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

【英文标题】：How to display a success popup at top of screen after pressing submit button in .NET MVC?

【发布时间】：2020-12-10 01:24:35

【问题描述】：

我使用 .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();
            
        

【参考方案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/

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

【讨论】：

谢谢，但是如何将此功能添加到我的代码中？ :)