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");
}
}
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");
}
}
留言
張貼留言