2018年6月9日 星期六

[jQuery] validate.unobtrusive 驗證(2) 透過 Ajax (data-val-remote) 方式呼叫後端驗證

jquery.validate、jquery.validate.unobtrusive 透過 Ajax (data-val-remote) 方式呼叫後端驗證

省略部份程式碼，基本用法請參考另一篇文章

基本用法 
    <body>
        <head>
            <script src="Scripts\jquery-1.10.2.js"></script>
            <script src="Scripts\jquery.validate.js"></script>
            <script src="Scripts\jquery.validate.unobtrusive.js"></script>
        </head>
        <form id="form1" method="get">

            <!-- data-val-remote 檢核失敗的訊息 -->
            <!-- data-val-remote-url 檢核網頁程式的網址 -->
            <!-- data-val-remote-type 設定 GET 或 POST -->
            <!-- data-val-remote-additionfields 要額外多傳的欄位名稱，可用","分隔指定多欄，沒有就不用給 -->

            <input type="text" name="loginName" data-val="true" 
                data-val-remote="後端回傳false時頁面上要呈現的訊息" 
                data-val-remote-url="http://localhost:14630/api/values"
                data-val-remote-type="GET" />
            <span data-valmsg-for="loginName" data-valmsg-replace="true"></span>

        </form>
    </body>

回傳的結果只能是 true/false

當指定 data-val-remote-type 為 GET 時，欄位的資料會被當作 QueryString 傳遞

只會在設定 data-val-remote 的欄位變動或 Send 時才會呼叫後端，所以當驗證需要回傳
多個欄位，而且不是每個欄位都設定 data-val-remote 的情況下，部份欄位的異動可能不
會再進行後端的檢查(因為沒設定 data-val-remote)。

以下展示呼叫及回傳的前後端程式碼

前端用 GET 呼叫後端 ASP.NET WebApi 傳遞一個參數
前端用 GET 呼叫後端 ASP.NET WebApi 傳遞三個參數
前端用 GET 呼叫後端 ASP.NET MVC 傳遞一個參數
前端用 GET 呼叫後端 ASP.NET MVC 傳遞三個參數
前端用 POST 呼叫後端 ASP.NET WebApi
前端用 POST 呼叫後端 ASP.NET MVC

前端用 GET 呼叫後端 ASP.NET WebApi 傳遞一個參數

前端
<!-- 會以如下的 uri 呼叫後端 http://localhost:12345/api/values?loginName=ABC -->

<input type="text" name="loginName" data-val="true" 
       data-val-remote="資料已存在！" 
       data-val-remote-url="http://localhost:14630/api/values"
       data-val-remote-type="GET" />
<span data-valmsg-for="loginName" data-valmsg-replace="true"></span>
後端 
namespace WebApplication7.Controllers
{
    public class ValuesController : ApiController
    {
        public IHttpActionResult Get(string loginName)
        {
            bool f = true;

            if(loginName == "ABC")
            {
                f = false;
            }
            return Json<bool>(f);
         }
     }
 }

前端用 GET 呼叫後端 ASP.NET WebApi 傳遞三個參數
前端在指定 data-val-remote-additionalfields 要額外傳那些欄位時，指定的是 tag 的 name

前端 
<!-- 會以如下的 uri 呼叫後端  http://localhost:12345/api/values?loginName=ab&Tel=b&Address=c -->

<input type="text" name="loginName" data-val="true" 
       data-val-remote="資料已存在！" data-val-remote-url="http://localhost:14630/api/values"
       data-val-remote-type="GET" 
       data-val-remote-additionalfields ="Tel,Address" />
<input type="text" id="idTel" name="Tel" />

<input type="text" id="idAddress" name="Address" />

<span data-valmsg-for="loginName" data-valmsg-replace="true"></span>
後端 
namespace WebApplication7.Controllers
{
    public class ValuesController : ApiController
    {
        public IHttpActionResult Get(string loginName, string Tel, string Address)
        {
            //略
            return Json<bool>(false);
        }
    }
}

前端用 GET 呼叫後端 ASP.NET MVC 傳遞一個參數

前端
<input type="text" name="loginName" data-val="true" 
    data-val-remote="資料已存在！" 
    data-val-remote-url="http://localhost:14630/home/Index"
    data-val-remote-type="GET" 
/>
<span data-valmsg-for="loginName" data-valmsg-replace="true"></span>
後端
[HttpGet]
public ActionResult Index(string loginName)
{
    //驗證
    bool b = false;
    return Json(b, JsonRequestBehavior.AllowGet);
}

前端用 GET 呼叫後端 ASP.NET MVC 傳遞三個參數

前端
<input type="text" name="loginName" 
    data-val="true" data-val-remote="資料已存在！" 
    data-val-remote-url="http://localhost:14630/home/Index"
    data-val-remote-type="GET" 
    data-val-remote-additionalfields ="Tel,Address"        
/>
<input type="text" id="idTel" name="Tel" />
<input type="text" id="idAddress" name="Address" />
<span data-valmsg-for="loginName" data-valmsg-replace="true"></span>
後端
[HttpGet]
public ActionResult Index(string loginName, string Tel, string Address)
{
    return Json(false, JsonRequestBehavior.AllowGet);
}

前端用 POST 呼叫後端 ASP.NET WebApi
使用 POST 的時候，欄位傳遞的資訊會在 POST Body 中傳遞，所以基本上後端繫結
到參數時，都要以物件去繫結。

前端
<input type="text" name="loginName"
    data-val="true" data-val-remote="資料已存在！" 
    data-val-remote-url="http://localhost:14630/api/values"
    data-val-remote-type="POST"         
    data-val-remote-additionalfields ="Tel,Address"        
/>

<input type="text" id="idTel" name="Tel" />
<input type="text" id="idAddress" name="Address" />
<span data-valmsg-for="loginName" data-valmsg-replace="true"></span>
後端
//自訂 Class
public class UserInfo
{
    public string loginName { get; set; }
    public string Tel { get; set; }
    public string Address { get; set; }
}
public IHttpActionResult Post(UserInfo t)
{
    //驗證
    return Json<bool>(false);
}

前端用 POST 呼叫後端 ASP.NET MVC

前端
<input type="text" name="loginName" 
    data-val="true" data-val-remote="資料已存在！" 
    data-val-remote-url="http://localhost:14630/home/Index"
    data-val-remote-type="POST"         
    data-val-remote-additionalfields ="Tel,Address"        
/>
<input type="text" id="idTel" name="Tel" />
<input type="text" id="idAddress" name="Address" />
<span data-valmsg-for="loginName" data-valmsg-replace="true"></span>
後端 
//自訂 Class
public class UserInfo
{
    public string loginName { get; set; }
    public string Tel { get; set; }
    public string Address { get; set; }
}

[HttpPost]
public ActionResult Index(UserInfo ui)
{
    return Json(false);
}
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)