2016年8月31日 星期三

[C#] Initialize var with null (Set var to null)


筆記一下var 需要初始化為 null 的寫法。
var result = (dynamic)null;

其他作法:


//initializes to non-null; cannot be reassigned a value of any type; I prefer this
var x = new { };

//initializes to non-null; can be reassigned a value of any type
var x = new object();

//initializes to null; dangerous and finds least use; can be reassigned a value of any type
dynamic x = null;
var x = (dynamic)null;

//initializes to null; more conventional; can be reassigned a value of any type
object x = null;

//initializes to null; cannot be reassigned a value of any type
var x = (T)null; 

Reference: http://www.itorian.com/2015/04/initialize-var-with-null-or-empty-in-c.html

2016年8月28日 星期日

[JS] [JQuery] 讓HTML 網頁 Table 表格能依據 Header 欄位自動排序


筆記一下。因應客戶需求實作測試了3種作法:


1.使用 kryogenix sorttable

   快速好用。如果Table 裡有 Checkbox 欄位,可能會導致無法Work;若需要對Checkbox 作排序,則須自行加入JavaScript 程式。

Steps:
      1. Download the Javascript library    
      2. Include the Javascript library, by putting a link to it in the HEAD of your page, like so:
          <script src="sorttable.js"></script>
      3. Mark your table as a sortable one by giving it a class of "sortable":
          <table class="sortable">


http://www.kryogenix.org/code/browser/sorttable/


2. 使用JQuery query.dataTables.js


    實作 Demo 沒問題,但套用在客戶需求,Table 有 Checkbox, 似乎會導致其他 Header 欄位的排序不正確。(應該是個案吧,因無時間再研究,暫時無解。)

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
    <script type="text/javascript" src="https://datatables.net/beta/1.7/media/js/jquery.dataTables.js"></script>


<script>
/* Create an array with the values of all the input boxes in a column */
$.fn.dataTableExt.afnSortData['dom-text'] = function  ( oSettings, iColumn )
{
 var aData = [];
 $( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
  aData.push( this.value );
 } );
 return aData;
}
/* Create an array with the values of all the select options in a column */
$.fn.dataTableExt.afnSortData['dom-select'] = function  ( oSettings, iColumn )
{
 var aData = [];
 $( 'td:eq('+iColumn+') select', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
  aData.push( $(this).val() );
 } );
 return aData;
}
/* Create an array with the values of all the checkboxes in a column */
$.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, iColumn )
{
 var aData = [];
 $( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
  aData.push( this.checked==true ? "1" : "0" );
 } );
 return aData;
}
/* Initialise the table with the required column sorting data types */
$(document).ready(function() {
 $('#example').dataTable( {
  "aoColumns": [
   null,
   null,
   { "sSortDataType": "dom-text" },
   { "sSortDataType": "dom-text", "sType": "numeric" },
   { "sSortDataType": "dom-select" },
   { "sSortDataType": "dom-checkbox" }
  ]
 } );
} );
</script>

https://datatables.net/beta/1.7/examples/plug-ins/dom_sort.html


3. 使用JQuery Tablesorter Plugin

    http://tablesorter.com/docs/

    因預期 Checkbox 也可做排序,最後採用第三種方式。


<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.5/js/jquery.tablesorter.min.js"></script>


<script>
    // add parser through the tablesorter addParser method
    $.tablesorter.addParser({
        id: 'checkbox',
        is: function (s) {
            return false;
        },
        format: function (s, table, cell, cellIndex) {
            var $c = $(cell);
            // return 1 for true, 2 for false, so true sorts before false
            if (!$c.hasClass('updateCheckbox')) {
                $c
                .addClass('updateCheckbox')
                .bind('change', function () {
                    $(table).trigger('updateCell', [cell]);
                });
            }
            return ($c.find('input[type=checkbox]')[0].checked) ? 1 : 2;
        },
        type: 'numeric'
    });
    $(function () {
        $("table").tablesorter({
            widgets: ['zebra'],
            headers: {
                0: { sorter: ‘checkbox' } ,
                2: {sorter: false}
            }
        });
    });
</script>
<table class="tablesorter">
    <thead>
        <tr>
            <th></th>
            <th>AlphaNumeric</th>
            <th>Numeric</th>
            <th>Animals</th>
            <th>Sites</th>
        </tr>
    </thead>
    <tbody>
        <tr><td><input type="checkbox"></td><td>abc 123</td><td>10</td><td>Koala</td><td>http://www.google.com</td></tr>
        <tr><td><input type="checkbox"></td><td>abc 1</td><td>234</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
        <tr><td><input type="checkbox"></td><td>abc 9</td><td>10</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
        <tr><td><input type="checkbox"></td><td>zyx 24</td><td>767</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
        <tr><td><input type="checkbox"></td><td>abc 11</td><td>3</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
        <tr><td><input type="checkbox"></td><td>abc 2</td><td>56</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
        <tr><td><input type="checkbox"></td><td>abc 9</td><td>155</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
        <tr><td><input type="checkbox"></td><td>ABC 10</td><td>87</td><td>Zebra</td><td>http://www.google.com</td></tr>
        <tr><td><input type="checkbox"></td><td>zyx 1</td><td>999</td><td>Koala</td><td>http://www.mit.edu/</td></tr>
        <tr><td><input type="checkbox"></td><td>zyx 12</td><td>0</td><td>Llama</td><td>http://www.nasa.gov/</td></tr>
    </tbody>
</table>


http://www.frontendwebhelp.com/javascript/jquery-table-sorter-example/

2016年8月21日 星期日

[ASP.NET MVC] Razor @helper語法

Reference: http://blog.sanc.idv.tw/2011/08/aspnet-mvc-razorhelper.html

Just a note to myself...

test.cshtml


<!--寫法1-->
<div>
    @if (int.Parse(ViewData["score"].ToString()) >= 60)
    {
        <span>合格!</span>
    }
    else
    {
        <span>不合格!</span>
    }
</div>

<!--寫法2: 寫成 helper-->

@helper DisplayScore(int score)
{
    if (score >= 60)
    {
        <span>合格!</span>
    }
    else
    {
        <span>不合格!</span>
    }
<div>
    @DisplayScore(int.Parse(ViewData["score"].ToString()))
</div>


<!--寫法3: 不同page都要使用它時, 把 helper 寫在App_Code裡-->
@RivaFuns.DisplayScore(int.Parse(ViewData["score"].ToString()))



App_Code > RivaFuns.cshtml



@helper DisplayScore(int score)
{
    if (score >= 60)
    {
        <span>合格!</span>
    }
    else
    {
        <span>不合格!</span>
    }