在 HTML 警报弹出窗口后关闭模式 Window

Question

我创建了一个简单的 Web 应用程序。当用户单击按钮时，会出现带有文本字段的模式弹出窗口。用户输入一些文本，然后单击模式弹出窗口上的 'Add' 按钮将新条目添加到数据库。

modal-pop up window

此时会出现一个HTML消息，告诉用户添加是否成功。

html alert

然后用户单击确定，然后 returns 进入模式弹出窗口。然后，用户必须通过单击 X 关闭模态弹出窗口。模态 window 关闭后，UI 将更新以反映 table.[=17= 上的最新条目]

我想做的是在用户点击 HTML 警报上的 'OK' 后让模态弹出窗口消失（从而使它们都在同一时间）。

下面包含 add-edit-star-component.html:

的代码

<div class="form-froup row">

    <label class="col-sm-2 col-form-label">Star Name</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" [(ngModel)]="StarName"
        placeholder="Enter Star Name">
    </div>
</div>

<button (click)="addStar()" *ngIf="star.StarID==0" class="btn btn-primary">
    Add
</button>

<button (click)="updateStar()" *ngIf="star.StarID!=0" class="btn btn-primary">
    Update
</button>

这里是星形控制器的代码：

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebApplication2.Models;

namespace WebApplication2.Controllers
{
    public class StarController : ApiController
    {
        public HttpResponseMessage Get()
        {
            string query = @"SELECT StarID, StarName FROM dbo.Star";

            DataTable table = new DataTable();
            using(var con = new SqlConnection(ConfigurationManager.ConnectionStrings["PlanetaryAppDB"].ConnectionString))
            using(var cmd = new SqlCommand(query, con))
            using(var da = new SqlDataAdapter(cmd))
            {
                cmd.CommandType = CommandType.Text;
                da.Fill(table);
            }

            return Request.CreateResponse(HttpStatusCode.OK, table);
        }

        public string Post(Star star)
        {
            try
            {
                string query = "INSERT into dbo.Star (StarName) VALUES (@StarName)";

                DataTable table = new DataTable();
                using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["PlanetaryAppDB"].ConnectionString))
                using (var cmd = new SqlCommand(query, con))
                using (var da = new SqlDataAdapter(cmd))
                {
                    cmd.CommandType = CommandType.Text;

                    //Pass values to parameters
                    cmd.Parameters.AddWithValue("@StarName", star.StarName);
                    
                    da.Fill(table);
                }

                return "Added Successfully!!";
            }
            catch (Exception e)
            {
                return "Failed to Add: " + e.ToString();
            }
        }

        public string Put(Star star)
        {
            try
            {
                string query = @"UPDATE dbo.Star SET 
                                StarName = @StarName
                                WHERE StarID = @StarID";

                DataTable table = new DataTable();
                using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["PlanetaryAppDB"].ConnectionString))
                using (var cmd = new SqlCommand(query, con))
                using (var da = new SqlDataAdapter(cmd))
                {
                    cmd.CommandType = CommandType.Text;

                    //Pass values to parameters
                    cmd.Parameters.AddWithValue("@StarName", star.StarName);
                    cmd.Parameters.AddWithValue("@StarID", star.StarID);

                    da.Fill(table);
                }

                return "Updated Successfully!!";
            }
            catch (Exception e)
            {
                return "Failed to Update: " + e.ToString();
            }
        }

        public string Delete(int id)
        {
            try
            {
                string query = "DELETE from dbo.Star WHERE StarID = @StarID";

                DataTable table = new DataTable();
                using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["PlanetaryAppDB"].ConnectionString))
                using (var cmd = new SqlCommand(query, con))
                using (var da = new SqlDataAdapter(cmd))
                {
                    cmd.CommandType = CommandType.Text;

                    //pass values to parameters
                    cmd.Parameters.AddWithValue("@StarID", id);

                    da.Fill(table);
                }

                return "Deleted Successfully!!";
            }
            catch (Exception e)
            {
                return "Failed to Delete: " + e.ToString();
            }
        }
    }
}

Where do I need to make the change and what do I need to do?

编辑 1

下面是来自 add-edit-star.component.ts 的代码，其中包含 addStar() 函数：

import { Component, OnInit, Input } from '@angular/core';
import { SharedService } from 'src/app/shared.service';

@Component({
  selector: 'app-add-edit-star',
  templateUrl: './add-edit-star.component.html',
  styleUrls: ['./add-edit-star.component.css']
})
export class AddEditStarComponent implements OnInit {

  constructor(private service:SharedService) { }

  @Input() star:any;
  StarID!: string;
  StarName!: string;

  ngOnInit(): void {
    this.StarID = this.star.StarID;
    this.StarName = this.star.StarName;
  }

  addStar() {
    var val = {StarID:this.StarID,
                StarName:this.StarName};
    this.service.addStar(val).subscribe(res=>{
      alert(res.toString());
    });
  }

  updateStar() {
    var val = {StarID:this.StarID,
                StarName:this.StarName};
    this.service.updateStar(val).subscribe(res=>{
      alert(res.toString());
    });
  }

}

Answer 1

您可以 alert() 并像往常一样对其添加条件检查 return未定义

if(!alert("please click to continue")){ ... }

另一种选择是使用 confirm()，这将 return true 或 false 取决于他们点击的内容。

if(confirm("please click to continue")){ ... }

这里有几个例子 - 只需将它们注释掉以进行测试 https://codepen.io/0x7CD/pen/abwexgY

在 HTML 警报弹出窗口后关闭模式 Window

Close Modal Window after HTML Alert Pop-up

html

javascript

bootstrap-modal

angular10