Address Editor for ASP.NET MVC3 – Format the Address String by Google Map

image
輸入地址
image
自動查詢 google map 顯示查詢結果,將地址字串轉為 api 回應的結果

[Required]
[Display(Name = "地址")]
[UIHint("MvcAddressEditor")]
public string Address { get; set; }

利用 UIHint 自動套入 Template,另外新增一個 MvcAddressEditor.cshtml

@model String
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(function () {
var geocoder;
var map;
$(document).ready(function () {
geocoder = new google.maps.Geocoder();
//default location
//可以新增查詢當地位置當成預設值
//http://code.google.com/intl/zh-TW/apis/maps/documentation/javascript/basics.html
var latlng = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//first show map
map = new google.maps.Map($("#" + "@(Html.ClientIdFor(p => p) + "-google-map-display")")[0], myOptions);
});

$("#" + "@(Html.ClientIdFor(p => p))").live("change", function () {
var address = $(this).val();
geocoder = new google.maps.Geocoder();
if (geocoder) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0].types[0] != "street_address") {
//the result address type
//alert("Please enter more detailed");
}
map.setCenter(results[0].geometry.location);
$("#"+"@(Html.ClientIdFor(p => p))").val(results[0].formatted_address);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
});
</script>
@Html.TextBoxFor(it => Model, new { Style = "width: 500px;" })
<div id='@(Html.ClientIdFor(p => p) + "-google-map-display")' style="width: 300px; height: 300px">
</div>

可以從這裡下載 Download 用的是 Google Maps Javascript API 第 3 版

Reference

Google Maps Javascript API 第 3 版服務

ClientIdFor Mvc Helper

ASP.NET MVC – AllowHtml & FormCollection 發生的問題

[AllowHtml]
public string html { get; set; }

前幾天遇到一個問題,在 edit 頁面 post 的時候,一直遇到說安全性的問題,回傳具有危險性的字串而造成錯誤,的確回傳的欄位中有一個是具有 Html 的內容,但是已經在 Model 部分加上 [AllowHtml] 的屬性,而且同樣一個 Model 被不同的 Action 一起使用。確實在加上[AllowHtml] 屬性之後是可以回傳 html 的內容,但是錯誤訊息也指向是 html 內容回傳的錯誤。

具有潛在危險 Request.Form 的值已從用戶端 (html="<a></a>") 偵測到。 
描述: 要求驗證偵測到具有潛在危險的用戶端輸入值,對這個要求的處理已經中止。
這個值可能表示有人嘗試危害應用程式的安全性,例如跨站台的指令碼處理攻擊。若要
允許頁面覆寫應用程式要求驗證設定,請將 httpRuntime 組態區段中的 requestV
alidationMode 屬性設定為 requestValidationMode="2.0"。
例如: <httpRun
time requestValidationMode="2.0" />。
設定這項值之後,您就可以停用要求驗
證,方法是在頁面指令或 <pages>
組態區段中設定 validateRequest="false"。但
是我們強烈建議您的應用程式應該明確地檢查所有這類的輸入。
如需詳細資訊,請參閱
http://go.microsoft.com/fwlink/?LinkId=153133。

找了一下子才發現原因出在 FormCollection 這個參數上,在 Post 的時候,除了接收 Model 的部分,還多接收了一個 FormCollection 的參數

[HttpPost]
public ActionResult Edit(ItemModel model, FormCollection collection)

但是 FormCollection 並不會受到 Model 屬性的影響,即使在欄位屬性加上了 [AllowHtml] ,FormCollection 在判斷到有 Html 回傳的時候,還是判斷具有危險。

Reference

http://stackoverflow.com/questions/5022134/mvc-3-rtm-allowhtml-doesnt-work-when-using-formcollection

http://www.dotblogs.com.tw/johnny/archive/2010/03/01/13829.aspx

Mobile Web #1 – html tags for mobile

在 Mobile 裝置上面跟一般瀏覽器在讀取標籤方面會有一些小小的不一樣,

Viewport

<meta name="viewport" content="width=240, height=320, user-scalable=yes,
initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" />

設定放大縮小倍率,行動裝置上通常都可以放大縮小網頁,避免有些網頁在行動裝置上面看字會太小的貼心設計,不過假設你的 Web App 是專門為了行動裝置設計的,反而有可能會讓操作不順手或是破壞版面,這時候就可以藉由 Viewport 來做限制。

width 裝置寬度,或著用 width=device-width 設定為裝置寬度
height 裝置高度,或著用 width=device-width 設定為裝置高度
user-scalable 可被放大縮小
initial-scale 初始放大倍率
maximum-scale 最大放大倍率
minimum-scale 最小放大倍率

href=tel

<a href="tel:0912345678">聯絡我們</a>

可以讓手機自動撥出電話

href=sms

<a href="sms:0912345678">

讓手機傳簡訊

input type=date

<input type="date">

當 focus 在這個輸入框的時候會有日期選擇器出現,目前似乎只有 ios5 safari 支援

Reference

Mobile META Tags

Using mobile-specific HTML, CSS, and JavaScript (Mobile web part 5)

ASP.NET MVC3 Action Filter 控制輸出的 Layout

在開發 Mvc 的時候可能會用到 RenderAction 的方式去將其他 Action 輸出的結果一次回傳,RenderAction 回傳的結果會是比較簡單的,模組化之後的回傳。但是也有可能原本的 Action 已經是完整的頁面,但是可能為了需要過場特效或是各種原因她必須在某些狀況被包含在 Render 輸出。
原本預設的 Attribute 就有包含 [ChildActionOnly] 可以控制只能被包含在其他的回傳之中,配合 PartialView() 可以很容易做到單純子項目的輸出,但是今天想要的是可以把頁面回傳或是RenderAction 的回傳都一併處理掉。


public class ChildActionWithoutLayoutAttribute
: ActionFilterAttribute, IActionFilter, IResultFilter
{
public override void OnActionExecuted(ActionExecutedContext filterContext)
{
if (filterContext.IsChildAction)
{
try
{
((ViewResult)filterContext.Result).MasterName =
"~/Views/Shared/_Partial.cshtml";
}
catch
{
}
}
base.OnActionExecuted(filterContext);
}
}

利用 IsChildAction 的判斷可以在 OnActionExecuted 的時候去指定不同的 Master Page,要注意的是如果有在各個頁面中去各自指定的情況下,而不是統一由 _ViewStart.cshtml 統一指定的話,這個的 OnActionExecuted 必須改為 OnResultExecuted 才不會被頁面上的設置蓋掉。執行順序是 _ViewStart.cshtml > OnActionExecuted > View > OnResultExecuted

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}

▲如果有在各自的 view 去額外設定的話,則要將 Action Filter 的事件延後
另外一個要注意的是,在這邊的 MasterName 設定為空字串或是 null 是沒有效果的,如果找不到值就會帶入預設的 Layout ,所以為了達到這個效果額外開了一個 _Partial.cshtml 裡面只有 @RenderBody() 一行。

如果要判斷是不是 Ajax 的請求也可以用  filterContext.HttpContext.Request.IsAjaxRequest() 來判斷。

Javascript mobile frameworks

最近需要開發一個新的專案,專門為了手機的平台的 Website ,其實基本上就是 Web 但是希望可以做到 App 的效果,可想而知會花很多時間在 Javascript 的部分作調校,每一行 js 都自己 code 就太累了,趕快在準備階段先來找找好用的相關工具。

主要考量的也只有少少幾個方向

1.換頁特效流暢度

既然特地為了 mobile 裝置作開發,當然要能有更好的使用者體驗,雖然說為了跨平台還選擇了 Web 的方式,但是當然是希望能夠做到 App 的效果。

2.相容性

既然說是 Mobile Framework 就不能只有在少數裝置能使用,其他裝置上就算硬體不能做到特效也是必須要能正常瀏覽不破圖。

3.開發便利性以及整合性

希望可以好開發、好維護,大家都是這樣想的吧

jQuery Mobile

JQuery 這就不用說了,就算沒見過豬走路也吃過豬肉,在 Web 上負有盛名的 JQuery 也出了 Mobile 版本的 plugin。不過在實際操作 demo 跟其他 framework 相比之下真的就被比了下去,在特效處理下就差了蠻多的。

image

▲jQuery Mobile 的預設換頁特效,加入 js 之後所有的換頁連結都會被取代

不過在嘗試之中才發現,其實他還是保有了 JQuery 的精神,容易學習,還有支援跨瀏覽器 (jQuery Mobile Supported Platforms)清單真的是非常豪華,為了讓這張清單洋洋灑灑的,jQuery Mobile 可以說是犧牲掉了非常多的東西,值不值得就見仁見智了

Sencha Touch

這套 framework 畫面還有特效流暢度都比 jQuery Mobile 流暢很多,但是缺點就是這套 framework 開發方式已經不太像開發 Web 了,官方範例的頁面完全都是從 js 裡面去動態產生。這大大的增加了從 Web 要入手的難易度,還有一個重點是這套 Framework 大量的使用了 webkit 的 CSS 3 ,所以才能達到這麼好的效果。

因為使用了大量的 webkit css 效果在 Mobile 上面是比 jQuery Mobile 好的多,實際操作流暢程度真的有差,問題就是並不是每一款行動裝置都支援,除了瀏覽器使用 webkit 核心的裝置外,其他裝置上面會連顯示都有問題,或著是安裝了其他種類的瀏覽器在 Mobile 上也會無法正常執行。

DHTMLX Touch

這款基本上特色跟 Sencha Touch 差不多,也是針對 Webkit 作優化,在非 webkit 上面的狀態會比 Sencha Touch 好一些,但是真正要發布的時候還是在 user Agent 排除掉非 webkit 的瀏覽器吧。

jQTouch

為了讓 jQery Mobile 能夠有更好的體驗,所以 jQTouch 幫 jQuery Mobile 加上了 Webkit 部分的效果,主要是針對 iOS 的裝置作的效果。在其他裝置上就不太行了。

Compendium

大部分的 js Framework 都想要能夠達到 navitve app 的效果,一開始要執行 Mobile Web 的時候我也是這麼想的。現在 Mobile 效能確實提升很多,各種 App 也讓我們忘記他的配備等級其實是很差的,要求能跟一般個人電腦一樣的效果其實真的很不容易。所以很多廠商都直接跳進了 CSS 3 之中,即使 CSS 3 的標準還不是各家瀏覽器都有支援。在我看來 jQuery Mobile 跟 Sencha Touch 正好站在天秤的兩端,一邊是號稱支援幾乎全部的 Mobile 裝置,在每一台機器上都得到一樣的體驗,比瀏覽一般網頁好一些些的體驗。另一邊是讓你忘了你只是在瀏覽 Mobile Web,如果你拿的是 iOS & Android。

Reference

用HTML和Javascript開發iPhone/Android原生軟體-Mobile Web App Framework總整理

JQuery Mobile