Display success popup message using jQuery Notify Plugin in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted one month ago

Hi

How to display message using NotifyJs

In below code i want when record gets Added then Notification also should get displayed "Successfully Done"

public ActionResult Index()
{
    return View(dbLocation.GetAllLocation().ToList());
}
 
[HttpPost]
public ActionResult CreateEdit(Location objLocation )
{
    if (ModelState.IsValid)
    {
        dbLocation.Add(objLocation);
    }
 
    return RedirectToAction("Index");
}

 

$.notify(data.message, {
    globalposition: "top center",
    className: "success"
})

 

@using (Html.BeginForm("CreateEdit", "Location", FormMethod.Post))
{
    <input type="hidden" id="hfAU" name="hfAU" />
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    @*<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>*@
                    <h4 class="modal-title">Add New Location</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <label for="Id" class="col-sm-2 col-form-label">Id</label>
                        <div class="col-sm-10">
                            <input type="Text" class="form-control txt-style" id="txtId" Name="Id" placeholder="Location Id">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="IsActive" class="col-sm-2 col-form-label">IsActive</label>
                        <div class="form-check col-sm-10">
                            <input type="checkbox" class="form-check-input" value="true" id="IsActive" name="IsActive">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save changes</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 
                    </div>
                </div>
            </div>
        </div>
    </div>
}

Thanks

Posted one month ago

Hi ramco1917,

Check this example. Now please take its reference and correct your code.

Database

I have made use of the following table Customers with the schema as follows.

I have already inserted few records in the table.

You can download the database table SQL by clicking the download link below.

Download SQL file

Model

public class CustomerModel
{
    public int CustomerID { get; set; }
    public string Name { get; set; }
    public string Country { get; set; }
    public bool IsActive { get; set; }
    public List<Customer> Customers { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        using (CustomerEntities entities = new CustomerEntities())
        {
            CustomerModel model = new CustomerModel();
            model.Customers = entities.Customers.ToList();
            return View(model);
        }
    }

    [HttpPost]
    public ActionResult Index(CustomerModel model, string hfAU)
    {
        using (CustomerEntities entities = new CustomerEntities())
        {
            if (hfAU == "U")
            {
                Customer customerUpdate = entities.Customers.Where(x => x.CustomerId == model.CustomerID).FirstOrDefault();
                customerUpdate.Name = model.Name;
                customerUpdate.Country = model.Country;
                entities.SaveChanges();
                TempData["Message"] = " Customer updated successfully.";
            }
            if (hfAU == "A")
            {
                entities.Customers.Add(new Customer
                {
                    Name = model.Name,
                    Country = model.Country
                });
                entities.SaveChanges();
                TempData["Message"] = " Customer inserted successfully.";
            }
            return RedirectToAction("Index");
        }
    }

    public ActionResult DeleteCustomer(int id)
    {
        using (CustomerEntities entities = new CustomerEntities())
        {
            Customer customer = entities.Customers.Where(x => x.CustomerId == id).FirstOrDefault();
            entities.Customers.Remove(customer);
            entities.SaveChanges();

            CustomerModel model = new CustomerModel();
            model.Name = customer.Name;
            model.Country = customer.Country;
            model.Customers = entities.Customers.ToList();

            return View("Index", model);
        }
    }
}

View

@model Alert_Popup_MVC.Models.CustomerModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body class="container">
    <div class="table-title">
        <div class="row">
            <div class="col-sm-6 text-right">
                <button id="btnAdd" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                    <i class="fa fa-plus"></i> Add New
                </button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-body">
                    <table class="table" id="tblCustomers">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Country</th>
                                <th>IsActive</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.Customers)
                            {
                                var active = item.Country == "India" ? true : false;
                                <tr>
                                    <td>@Html.DisplayFor(modelItem => item.CustomerId)</td>
                                    <td>@Html.DisplayFor(modelItem => item.Name)</td>
                                    <td>@Html.DisplayFor(modelItem => item.Country)</td>
                                    <td>
                                        @Html.DisplayFor(modelItem => active)
                                    </td>
                                    <td>
                                        <a class='btn btn-primary btn-sm' id='btnEdit'><i class='fa fa-pencil'></i> Edit</a>
                                        <a href="@Url.Action("DeleteCustomer","Home")/@item.CustomerId" onclick="return confirm('Do you want to delete this record?')"
                                           class='btn btn-danger btn-sm' id='btnDelete' style='margin-left:5px'><i class='fa fa-trash'></i>Delete</a>
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <input type="hidden" id="hfAU" name="hfAU" />
        <div id="myModal" class="modal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Customer Details Form</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group row">
                            <input type="hidden" id="hfId" name="CustomerID" />
                            <label>Name:</label>
                            <input type="text" id="txtName" name="Name" value="" class="form-control" />
                        </div>
                        <div class="form-group row">
                            <label>Country:</label>
                            <input type="text" id="txtCountry" name="Country" value="" class="form-control" />
                        </div>
                        <div class="form-group row">
                            <label for="IsActive" class="col-sm-2 col-form-label">IsActive</label>
                            <div class="form-check col-sm-10">
                                <input class="form-check-input" type="checkbox" value="true" id="IsActive">
                                <input type="hidden" id="hfIsActive" name="IsActive" />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save changes</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    }
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script type="~/js/notify.js"></script>
    <link rel="stylesheet" href="~/css/notify.css" />
    <script type="text/javascript">
        $(function () {
            $("#tblCustomers").dataTable({
                order: [],
                columnDefs: [{ orderable: false, targets: [3, 4] }],
            });
            $('body').on('click', '[id*=btnEdit]', function () {
                $('#hfAU').val('U');
                $('#IsActive').removeAttr('checked').removeAttr("disabled");
                $('#hfIsActive').val('false');
                var data = $(this).closest('tr').find('td');
                var id = data.eq(0).html();
                var name = data.eq(1).html();
                var country = data.eq(2).html();
                var isActive = $(this).closest('tr').find('input[type=checkbox]').is(':checked');

                $('#hfId').val(id);
                $('#txtName').val(name);
                $('#txtCountry').val(country);
                if (isActive) {
                    $('#IsActive').attr('checked', 'checked');
                    $('#hfIsActive').val('true');
                }
                $('#myModal').modal('show');
            });

            $('#IsActive').click(function () {
                if ($(this).is(':checked')) {
                    $('#hfIsActive').val('true');
                } else {
                    $('#hfIsActive').val('false');
                }
            });
            $('body').on('click', '[id*=btnAdd]', function () {
                $('#hfId').val('');
                $('#txtName').val('');
                $('#txtCountry').val('');
                $('#hfAU').val('A');
                $('#IsActive').attr('checked', 'checked').attr("disabled", true);
            });
        });
    </script>
    @if (TempData["Message"] != null)
    {
        <script type="text/javascript">
            window.onload = function () {
                var message = "@TempData["Message"]";
                $.notify(message, {
                    type: 'success',
                    icon: 'check',
                    align: "center",
                    verticalAlign: "top",
                    animation: true,
                    animationType: "drop",
                    close: true
                });
            };
        </script>
    }
</body>
</html>

Screenshot