I'm working on a form in angularjs, asp.net and mysql server. My requirement is to display a flashing error message when add button is pressed without entering any input in the form fields as well as when I click the delete icon, it must be displaying a popup message like "Are you sure you want to delete?", If I press OK, it must be again displaying a popup message "Deleted successfully". I have attached my code below.
index.aspx ------------------------------------- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="editv1.aspx.cs" Inherits="edit" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml";> <head runat="server"> <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js";></script> <link rel="stylesheet" href=" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"; /> <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"; /> <script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js "></script> <script type="text/javascript"> var app = angular.module('MyApp', []); app.controller('MyController', function ($scope, $http, $window) { $scope.ButtonText = "Add"; GetCustomers($scope); $scope.Add = function () { var obj = {}; obj.id = $scope.Id == undefined ? 0 : $scope.Id; obj.name = $scope.Name; obj.country = $scope.Country; $.ajax({ url: 'edit.aspx/AddUpdateCustomer', type: 'POST', contentType: 'application/json', data: JSON.stringify(obj), success: function (response) { GetCustomers($scope); }, error: function (err) { alert(response.responseText); } }); } $scope.Delete = function (id, $confirm) { var obj = {}; obj.id = id; $.ajax({ url: 'edit.aspx/DeleteCustomer', type: "POST", contentType: 'application/json', data: JSON.stringify(obj), success: function (response) { GetCustomers($scope); }, error: function (err) { alert(response.responseText); } }); } $scope.Edit = function (id) { var customers = $scope.Customers; customers.map(function (customer) { if (customer.Id == id) { $scope.Id = customer.Id; $scope.Name = customer.Name; $scope.Country = customer.Country; $scope.ButtonText = "Update"; } }); } }); function GetCustomers($scope) { $.ajax({ url: 'edit.aspx/GetCustomers', type: "POST", contentType: 'application/json', success: function (response) { $scope.Customers = response.d; $scope.$apply(); }, error: function (err) { alert(response.responseText); } }); } </script> </head> <body> <form name="form" id="form1" runat="server" novalidate> <div> <div ng-app="MyApp" ng-controller="MyController"> <div class="container"> <div class="row"> <table class="table"> <tr> <td>Name</td> <td> <input type="hidden" ng-model="Id" /> <input type="text" id="txtName" class="form-control" name="name" ng-model="Name" required/> <div ng-messages='form.$submitted.$error' ng-if='form.name.$dirty'> <div ng-message='required'>Required field</div> </div> </td> </tr> <tr> <td>Country</td> <td> <input type="text" id="txtCountry" class="form-control" name="country" ng-model="Country" required/></td> </tr> <tr> <td colspan="2" align="center"> <button type="button" id="btnInsert" class="btn btn-primary" ng-click="Add()">{{ButtonText}}</button> </td> </tr> </table> </div> </div> <div class="container"> <div class="row"> <table class="table table-striped table-bordered table-condensed"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Country</th> <th>Edit | Delete</th> </tr> </thead> <tbody ng-repeat="customer in Customers"> <tr> <td>{{customer.Id}}</td> <td>{{customer.Name}}</td> <td>{{customer.Country}}</td> <td> <button type="button" id="btnEdit" class="btn btn-primary" ng-click="Edit(customer.Id)"><i class="fa fa-edit"></i></button> <button type="button" id="btnDelete" class="btn btn-primary" ng-click="Delete(customer.Id)"><i class="fa fa-trash-o"></i></button> </td> </tr> </tbody> </table> </div> </div> </div> </div> </form> </body> </html> C# code -------------------------------------- using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Web.Services; public partial class edit : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } [WebMethod] public static List<object> GetCustomers() { List<object> customers = new List<object>(); string conString = ConfigurationManager.ConnectionStrings["ERPConnectionString"].ConnectionString; string query = "SELECT * FROM Customers"; SqlCommand cmd = new SqlCommand(query); using (SqlConnection con = new SqlConnection(conString)) { cmd.Connection = con; con.Open(); SqlDataReader sdr = cmd.ExecuteReader(); while (sdr.Read()) { customers.Add(new { Id = Convert.ToInt32(sdr["CustomerId"]), Name = sdr["Name"].ToString(), Country = sdr["Country"].ToString() }); } con.Close(); } return customers; } [WebMethod] public static void AddUpdateCustomer(int id, string name, string country) { string conString = ConfigurationManager.ConnectionStrings["ERPConnectionString"].ConnectionString; string query = ""; SqlCommand cmd = new SqlCommand(); if (id > 0) { query = "UPDATE Customers SET Name = @Name,Country = @Country WHERE CustomerId = @Id"; cmd.Parameters.AddWithValue("@Id", id); cmd.Parameters.AddWithValue("@Name", name); cmd.Parameters.AddWithValue("@Country", country); } else { query = "INSERT INTO Customers VALUES (@Name, @Country)"; cmd.Parameters.AddWithValue("@Name", name); cmd.Parameters.AddWithValue("@Country", country); } using (SqlConnection con = new SqlConnection(conString)) { cmd.CommandText = query; cmd.CommandType = CommandType.Text; cmd.Connection = con; con.Open(); cmd.ExecuteNonQuery(); con.Close(); } } [WebMethod] public static void DeleteCustomer(int id) { string conString = ConfigurationManager.ConnectionStrings["ERPConnectionString"].ConnectionString; string query = "DELETE FROM Customers WHERE CustomerId = @Id"; SqlCommand cmd = new SqlCommand(query); using (SqlConnection con = new SqlConnection(conString)) { cmd.Connection = con; cmd.Parameters.AddWithValue("@Id", id); con.Open(); cmd.ExecuteNonQuery(); con.Close(); } } } Regards Suresh Kumar P -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscr...@googlegroups.com. To post to this group, send email to angular@googlegroups.com. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
