---

15/03/2020- duocnt    9172 Views    

---

Nội dung bài viết: Tạo project Asp.Net MVC. Tạo phương thức SetAlert() trong Controller. Gọi phương thức SetAlert() trong ActionResult. Viết script jQuery trên View muốn hiển thị Alert. Tạo Div để thông báo Alert trên View. Source code của View Index.cshtml. Source code của HomeController. Project github.

Ứng dụng sẽ như sau:

THỰC HIỆN:

1 - Tạo project Asp.Net MVC.

 - Các bước để tạo 1 project Asp.net MVC  tham khảo tại đây.

2 - Tạo phương thức SetAlert() trong Controller.

 - Phương thức SetAlert này được tạo trong Controller nào mà View thuộc Controller đó muốn hiển thị Alert.

 - Nếu project của bạn có sử dụng BaseController thì nên tạo SetAlert() trong BaseController.

 - Trong ví dụ này, SetAlert() sẽ được tạo trong HomeController.

 protected void SetAlert(string message, int type)
        {
            TempData["AlertMessage"] = message;
            if (type == 1)
            {
                TempData["AlertType"] = "alert-success";
            }
            else if (type == 2)
            {
                TempData["AlertType"] = "alert-warning";
            }
            else if (type == 3)
            {
                TempData["AlertType"] = "alert-danger";
            }
            else
            {
                TempData["AlertType"] = "alert-info";
            }
        }

3 - Gọi phương thức SetAlert() trong ActionResult.

 - View nào sẽ hiển thị Alert sẽ gọi SetAlert() ở Action tương ứng.

 - Ở đây sẽ được gọi trong ActionResult Index() với thuộc tính [HttpPost]

        
                [HttpPost]
        public ActionResult Index(int type)
        {
            string message = string.Empty;
            if (type == 1)
            {
                message = "sucsess message";
            }
            else if (type == 2)
            {
                message = "warning message";
            }
            else if (type == 3)
            {
                message = "danger message";
            }
            else
            {
                message = "Nothing";
            }
 
            SetAlert(message, type);
 
            return View();
        }

4 - Viết script jQuery trên View muốn hiển thị Alert.

 - Trong ví dụ này, script sẽ được viết trên View Index.cshtml bên trong @section scripts{}.

    @section scripts{
    <script>
        $(function () {           
            $('#AlertBox').removeClass('hide');
            $('#AlertBox').delay(2000).slideUp(500);
        });
 
    </script>
    }

5 - Tạo Div Alert trên View.

    
    @if (TempData["AlertMessage"] != null)
    {
        <div id="AlertBox" class="alert @TempData["AlertType"] hide" role="alert">
            @TempData["AlertMessage"]
        </div>
    }

6 - Source code trên View Index.cshtml.

@{
    ViewBag.Title = "Home Page";
}
 
@section scripts{
    <script>
        $(function () {           
            $('#AlertBox').removeClass('hide');
            $('#AlertBox').delay(2000).slideUp(500);
        });
 
    </script>
    }
<div class="row">
 
    @if (TempData["AlertMessage"] != null)
    {
        <div id="AlertBox" class="alert @TempData["AlertType"] hide" role="alert">
            @TempData["AlertMessage"]
        </div>
    }
 
    <div class="col-md-4">
        <h2>Check Alert</h2>        
        @using(Html.BeginForm("Index","Home",FormMethod.Post,new { enctype = "multipart/formdata" }))
        {
            <div class="form-group">
                <select id="type" name="type" class="form-control">
                    <option value="0">--- Select type ---</option>
                    <option value="1">Success</option>
                    <option value="2">Warning</option>
                    <option value="3">Danger</option>
                </select>               
            </div>
            <input type="submit" name="check" value="Check" class="btn btn-primary" />
        }
    </div>
</div>

7 - Source code của HomeController.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace BootstrapAlertInMVC.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }
 
        [HttpPost]
        public ActionResult Index(int type)
        {
            string message = string.Empty;
            if (type == 1)
            {
                message = "sucsess message";
            }
            else if (type == 2)
            {
                message = "warning message";
            }
            else if (type == 3)
            {
                message = "danger message";
            }
            else
            {
                message = "Nothing";
            }
 
            SetAlert(message, type);
 
            return View();
        }
 
        protected void SetAlert(string message, int type)
        {
            TempData["AlertMessage"] = message;
            if (type == 1)
            {
                TempData["AlertType"] = "alert-success";
            }
            else if (type == 2)
            {
                TempData["AlertType"] = "alert-warning";
            }
            else if (type == 3)
            {
                TempData["AlertType"] = "alert-danger";
            }
            else
            {
                TempData["AlertType"] = "alert-info";
            }
        }
 
    }
}

8 - Source code github.

 - BootstrapAlertMVC project