FineUI（專業版）實現百變通知框（無JavaScript代碼）！ - sanshi－IT工程師數位筆記本

文章出處

曾經，有網友抱怨FineUI中連個通知框都沒有，當用戶進行某個操作成功時給個右下角的提示很不方便。

強大的設置參數

現在，FineUI（專業版）提供了強大的通知框機制，一個小小的通知框居然有多達 16 種不同的設置，可見威力之強大。

下面通過一張圖片來簡單概括一下：

1. 模式或者非模式對話框
2. 消息圖標可顯示（消息、警告、問題、錯誤、成功），也可隱藏
3. 正在加載圖片可顯示隱藏
4. 消息正文可自定義
5. 對話框標題可自定義
6. 關閉圖標可顯示隱藏
7. 標題欄可拖動
8. 標題欄可隱藏
9. 彈出問題可自定義（四個角落、上下左右居中、正中共 9 個位置）
10. 對話框顯示時間可設定
11. 對話框寬度可固定
12. 可設置對話框最小寬度和最大寬度
13. 可在當前頁面、父頁面、頂層頁面彈出
14. 可設置對話框ID，通過JS自行關閉
15. 可設置消息正文居左、居中或者居右顯示
16. 可設置正文區域的內邊距

服務器端創建通知框

FineUI（專業版）還專門提供了一個頁面來設置通知對話框的各個屬性：

下面我們來看下點擊按鈕的代碼：

Notify notify = new Notify();
notify.Message = tbxMessage.Text;

notify.MessageBoxIcon = (MessageBoxIcon)Enum.Parse(typeof(MessageBoxIcon), rblMessageBoxIcon.SelectedValue, true);
notify.Target = (Target)Enum.Parse(typeof(Target), rblTarget.SelectedValue, true);


if (!String.IsNullOrEmpty(nbWidth.Text))
{
    notify.Width = Convert.ToInt32(nbWidth.Text);
}

if (cbxShowHeader.Checked)
{
    notify.ShowHeader = true;

    if (!String.IsNullOrEmpty(tbxTitle.Text))
    {
        notify.Title = tbxTitle.Text;
    }

    notify.EnableDrag = cbxEnableDrag.Checked;
    notify.EnableClose = cbxEnableClose.Checked;
}
else
{
    notify.ShowHeader = false;
}


notify.DisplayMilliseconds = Convert.ToInt32(nbDisplayMilliseconds.Text);

notify.PositionX = (Position)Enum.Parse(typeof(Position), rblPositionX.SelectedValue, true);
notify.PositionY = (Position)Enum.Parse(typeof(Position), rblPositionY.SelectedValue, true);

notify.IsModal = cbxIsModal.Checked;

if (!String.IsNullOrEmpty(tbxBodyPadding.Text))
{
    notify.BodyPadding = tbxBodyPadding.Text;
}

notify.MessageAlign = (TextAlign)Enum.Parse(typeof(TextAlign), ddlMessageAlign.SelectedValue, true);

if (cbxShowLoading.Checked)
{
    notify.ShowLoading = true;
}

if (!String.IsNullOrEmpty(nbMinWidth.Text))
{
    notify.MinWidth = Convert.ToInt32(nbMinWidth.Text);
}

if (!String.IsNullOrEmpty(nbMaxWidth.Text))
{
    notify.MaxWidth = Convert.ToInt32(nbMaxWidth.Text);
}

if (!String.IsNullOrEmpty(tbxID.Text))
{
    notify.ID = tbxID.Text;
}


notify.Show();

其實就是簡單的Notify的屬性設置，然后掉用 Show 方法就可以了。

整個過程沒有寫一行JavaScript代碼，是不是很方便！

調用通知框的三種方式

上面演示了如果在服務器段通過 C# 代碼來生成通知框，當然這個過程需要頁面回發，也就是有一次AJAX請求。

如何在頁面加載時直接生成通知框的腳本呢？

調用通知框的第二種方式：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        Notify notify = new Notify();
        notify.Message = "正在加載中...";
        notify.ShowLoading = true;
        notify.PositionX = Position.Center;
        notify.PositionY = Position.Center;

        btnHello.OnClientClick = notify.GetShowReference();
    }
}

這種方式直接在頁面第一次加載時生成客戶端腳本。

調用通知框的第二種方式當然就是直接寫JavaScript代碼了：

F.notify({
    message: "數據保存成功！",
    messageIcon: "success",
    modal: true,
    displayMilliseconds: 50000,
    positionX: "center",
    positionY: "center",
    bodyPadding: "10px",
    showLoading: true,
    minWidth: 300,
    maxWidth: 600
});