弹出 HTML 警报后关闭模态窗口

Question

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

modal-pop up window

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

html alert

然后用户单击确定并返回到模式弹出窗口。然后，用户必须通过单击 X 关闭模式弹出窗口。模式窗口关闭后，UI 会更新以反映表格上的最新条目。

我想做的是在用户单击 HTML 警报上的“确定”后让模式弹出窗口消失（从而使它们同时消失）。

下面是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() 并对其添加条件检查，因为它总是返回未定义

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

另一个选项是使用confirm()，这将根据他们点击的内容返回true 或false。

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

这里有几个示例 - 只需将它们注释掉即可测试它们 https://codepen.io/0x7CD/pen/abwexgY