I've created a simple Web application. When the user clicks a button, a modal pop-up appears with a text field. The user enters some text and then clicks an 'Add' button on the modal popup to add the new entry to the database.
At that moment, an HTML message appears, telling the user whether the addition was successful or not.
The user then clicks okay and returns to the modal popup. The user must then close the modal pop-up by clicking the X. After the modal window closes, the UI is updated to reflect the newest entry on a table.
What I would like to do is to have the modal-popup disappear after the user clicks 'OK' on the HTML alert (thus making them both go away at the same time).
Included below is the code for 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>
And here is the code for the star controller:
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?
Edit 1
Below is code from add-edit-star.component.ts which contains the addStar() function:
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());
});
}
}
