跳到主要內容

MVC使用 JavaScript 顯示訊息

MVC 中要使用 JavaScript Alert 和一般在寫 WebForm 是差很多的, 在一般 ASP.NET WebForm 中我們可以在 C# Code 加入 Response.Write("<script>alert("這是簡單範例")</script>"); 或用 RegisterStartupScript 、RegisterClientInclude 等等方式.. 那 MVC 如何呼叫呢?基本介紹幾個範例如下

1. 利用 TempData 一次性資料暫存記錄
Controller:
public ActionResult Example()
        {
            return View();
        }

        public ActionResult DisplayMessage()
        {
            TempData["message"] = "這是一個簡單的範例";
            return RedirectToAction("Example", "Home");
        }

View:

@{
    ViewBag.Title = "Example";
}

<h2>Example</h2>

@Html.ActionLink("Click Me", "DisplayMessage")

<br/>

// 判斷一次性
@if (TempData["message"] != null)
{
     <script>
         var message = @Html.Raw(Json.Encode(TempData["message"]));
         alert(message);
     </script>
}

2. 利用 Ajax 及 JSON 格式傳遞格式後由前端處理

View:

// JavaScript 前端程式碼
<script type="text/javascript">
    $(document).ready(function () {
        $('#ButtonSubmit').click(function () { SubmitEventHandler(); });
    });
    function SubmitEventHandler() {
        var account = $.trim($('#TextBox_Str').val());
        if (account.length == 0  {
            alert('請輸入資料');
        }
        else {
            var postData = $('#Form_Compare').serialize();
            $.ajax({
                url: '@(Url.Action("Example", "Home"))',
                type: "POST",
                data: postData,
                dataType: "json",
                async: false,
                cache: false,
                success: function (data) {
                    if (data) {
                        if (!data.result) {
                            alert(data.msg);
                        }
                        else {
                            $('#TextBox_Str').val('');
                            alert(data.msg + ' 字串比對完成');
                        }
                    }
                    else {
                        alert('沒有回傳');
                    }
                }
            });
        }
    }

</script>

<form id="Form_Compare">
       <ul style="list-style-type: none;">
        <li>
            @Html.Label("Input String:")
            @Html.TextBox("CompareStr", "", new { id = "TextBox_Str" })

        </li>
        <input type="button" value="送出" id="ButtonSubmit" />
        </li>
    </ul>
</form>

Controller:
public ActionResult Example()
{
        return View();
 }

[HttpPost]
        public ActionResult Example(string CompareStr)
        {
                 if (String.IsNullOrWhiteSpace(CompareStr) )
                 {
                        jsn.Add("result", false);
                        jsn.Add("msg", "Input Error");
                  }
                  else if (CompareStr.Equal("1111"))
                  {
                        jsn.Add("result", true);
                        jsn.Add("msg", "Compare Correct");
                   }
        }








留言

這個網誌中的熱門文章

C# 中 List 複製內容到另一個 List 的幾種方法

簡單又實用 ^ ^ * 第一種透過 .ToList( ) 方法:  List<string> List1 = new List<string>();  List<string> List2 = new List<string>();  List1.Add("A");  List1.Add("B");  List1.Add("C");  List1.Add("D"); List2 = List1.ToList( ); * 第二種方式在建立物件時複製前一個 List  List<string> List1 = new List<string>();  List1.Add("A");  List1.Add("B");  List1.Add("C");  List1.Add("D"); List<string> List2 = new List<string>(List1); * 第三種方法新的List 中使用 AddRange( ) 方法  List<string> List1 = new List<string>();  List<string> List2 = new List<string>();  List1.Add("A");  List1.Add("B");  List1.Add("C");  List1.Add("D"); List2.AddRange(List1); 另可使用 List1.GetRange(Start, End) 來複製不固定大小(但不包含End)的內容

無效的回傳或回呼引數。已在組態中使用 或在網頁中使用 <%@ Page EnableEventValidation="true" %> 啟用事件驗證

寫手機網頁 使用 Client 端的 jquery mobile 時 button 都會比較長,但改用 asp::Button 時發現按鈕大小卻變了,W3C 建議使用 jquery mobile Button 時,儘量使用<a href="#" data-role="button" > ,因此改用 asp::LinkButton 後果然解決了 Button 長度問題,只可惜按下去後,依然有點淚流滿面如下。後來拜求 google 大大,找到了原因及解法如下: 開啓了資料回傳安全驗證功能(EnableEventValidation 為 true),導致錯誤訊息產生。如果必須要驗證資料,則必須使用 ClientScriptManager.RegisterForEventValidation 註冊控制項或直接在頁面.aspx上端 <%Page ... EnableEventValidation = "false"> ,那如果全部頁面都不想驗證,那請在 web.config 下找到 <configuration>      <system.web>       <pages  enableEventValidation ="false" >        ....       </page>       .... </configuration> 嗯  博大精深  ^^ 收工回家去............................

JQUERY 中使用 val( ) 或 text( ) 來改變內容

就字眼看來兩者差別不太... 簡單的說 TextBox 利用 val( ),而其它的控制項元件則用 text( ) 底下範例可跑跑看或ID 對調實驗,很快就看出差別了... HTML: <input type="text" id="txtinupt" value="TEXTBOX"/> <label id="lblid">LABEL</label> <button onclick="TestFunc()">OK</button> JS: function TestFunc(){   $('#lblid').text("12345")   $('#txtinput').val("99999");   $('#lblid').focus();   console.log('Function End') }