[ASP.NET MVC] jquery 常見問題整理

筆記動機： 
公司要開發一堆給客戶用的網路服務，由於IT部門預算很緊 那有一天不緊的，
一向負責寫RESTFUL後端商業流程的小弟終於還是要面對程序猿最害怕的使用者界面部分。
初步想法是把後端Restful API處理完的資料變成Json，再透過Viewbag把資料顯示在View上，所以最後變成以下塔配:

• 後端商業邏輯：Restful API
• 網站: ASP.NET MVC、Newton.Json
• 前端: jquery + json資料

由於小弟jquery是lv 1，所以一定要筆記一下不然很快會忘記

內容：

1. 如何把data變成Json?
   可以利用System.Web.Sript.Serialization的JavaSceiptSerializer() 或者Newtonsoft的JsonConvert.SerializaObject()



return new JavaScriptSerializer().Serialize(data);




2. View收到Json的ViewBag後怎樣可以讓jquery存取?
   利用@Html.Raw(@ViewBag) 先將ViewBag轉回Json，例如我要把回傳回來的user profile轉回成JSON

var data = @Html.Raw(ViewBag.userprofile);

3. 回傳回來的Json raw data 怎樣轉成人看的資料?


1. 先在打算顯示資料的地方寫一個具有Id的 <div>，例如
   

   <div id="appendUserProfile"></div>
   

2. 然後在<script> 中加入.each迴圈把json每個item取出來
   

           var data = @Html.Raw(ViewBag.userprofile);
           $(document).ready(
               function () {
                   $.each(data, function (key, value) {
                       $('#appendUserProfile').append('<tr><th>'+key+'</th><th>'+value+'</th></tr>');
                   })
               }
           );
   

3. 完成
   
   
   
4. jquery 2.1.4 關於 CheckBox的問題
• 問題：今天又遇到了怪事。在View中使用Checkboxfor產生checkbox，當使用jquery作 Required Validation認證時出現相反了的情況，就是明明Check了卻出現Validation error，不Check返而過了，找了兩天也找不出問題。
  
• 研究：
• 最初以為是ViewModel的關係，試過把bool轉回string，又把Data annotation拿掉，試過修改ViewModel不同部分還是不行。
  
• 為了確認跟ViewModel無關，先把jquery拿掉，傳回Controller的checkBox值正確，所以確定是jquery的問題。
  
• 在網上爬文找到這篇ASP.NET MVC - Required Checkbox with Data Annotations, 在回文中發現小弟相同的情況，作者最後使用extend把checkbox的值override，決定當隻copycat試看看，居然成功了。
  
• 實作：
• ViewModel

•         [Range(typeof(bool), "true", "true", ErrorMessage = "必須勾選")]
          [Display(Name = "本人聲明以上屬實")]
          public bool Istrue { get; set; }
  

• View
  
          <div>
              @Html.LabelFor(model => model.IsTrue)
              @Html.EditorFor(model => model.IsTrue)
              @Html.ValidationMessageFor(model => model.IsTrue, "", new { @class = "text-danger" })
          </div>
  
  
  

• 最後，在View中加入CheckBox extend的Javascript (來源)
  

  
  // extend range validator method to treat checkboxes differently
      var defaultRangeValidator = $.validator.methods.range;
      $.validator.methods.range = function(value, element, param) {
          if(element.type === 'checkbox') {
              // if it's a checkbox return true if it is checked
              return element.checked;
          } else {
              // otherwise run the default validation function
              return defaultRangeValidator.call(this, value, element, param);
          }
      }