在 Kendo的MVC Grid中建立唯讀column

 當我們建立Kendo 的MVC grid時會有以下代碼

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

@( Html.Kendo().Grid<KendoGridReadOnlyColumn.Models.TestModel>() .Name("Blog_Grid") .Columns(columns => { columns.Bound(p => p.column1).Title("Column 1"); columns.Bound(p => p.column2).Title("Column 2"); columns.Bound(p => p.column3).Title("Column 3"); columns.Bound(p => p.column4).Title("Column 4"); columns.Bound(p => p.column5).Title("Column 5"); columns.Bound(p => p.column6).Title("Column 6"); columns.Bound(p => p.column7).Title("Column 7"); columns.Command(command => { command.Edit(); command.Destroy(); }); }) .ToolBar(tools => { tools.Create(); }) .Pageable(pageable => pageable .Refresh(true) .PageSizes(new[] { 10, 20, 40, 60, 100, 200, 300 }) .ButtonCount(10) ) .Sortable() .Filterable() .Resizable(resize => resize.Columns(true)) .Editable(editable => editable.Mode(GridEditMode.InLine)) .DataSource(datasource => datasource .Ajax() .PageSize(10) .Model(model => model.Id(p => p.column1)) .Create(create => create.Action("Create", "Home")) .Read(read => read.Action("Read", "Home")) .Update(update => update.Action("Update", "Home")) .Destroy(update => update.Action("Destroy", "Home")) ) ) 方法1. 這時我們可以在.Sortable()下面加入一行.Events(events => events.Edit("edit")) .Sortable() .Events(events => events.Edit("edit")) 接下來再寫個function <script type="text/javascript"> function edit(e) { if (e.model.isNew() == false) { $("#column1").attr("readonly", true); //想要唯讀的欄位 } } </script> 大功告成 參考來源 http://www.adambumgardner.com/blog/2015/12/17/make-a-read-only-column-in-kendo-ui-grid-edit-mode 方法2. 將 .Model(model => model.Id(p => p.column1)) 改成 model.Field(model => p.column1).Editable(false);

HTML5 datetime-local 日期時間格式 format

 HTML 5 提供了日期及時間的 Type供我們使用,

例如:

<input type="datetime-local" class="form-control" name="StartDate" id="StartDate" required="" value="">

所以很開心的在網頁上使用:

問題來了,當我們從資料庫讀取資料出來時...GG!

為什麼沒有資料@@"

因為是用.NET MVC 開發所以在前端用了下面的語法

StartDate.Value.ToString("yyyy-MM-dd HH:mm:ss")

StartDate 是我的Model ,DateTime 型態,任憑我吐來吐去的 ToString .不是少了時間就是少了上下午,東缺西缺,

最後就是少吐了T

ToString("yyyy-MM-ddTHH:mm:ss")

這樣就可以正常使用跟顯示了!

MVC 使用EPPlus 匯出Excel

 匯出Excel算是很常用到的功能,所以記下來

1.建立一個Web 專案

2.使用Nuget   Key 下EPPlus  並安裝

3.在index的畫面中加入前端程式碼

<div class="row">

    <div class="col-4">

    </div>

    <div class="col-6">

        <h6>

            <a href="@Url.Action("ExportExcel","Home",new { Id = 1 }) " class="btn btn-success">

             匯出Excel

            </a>            

        </h6>

    </div>

</div>

假設需要帶參數如Id 就如圖,否則只需要@Url.Action("ExportExcel","Home")

4.再來是HomeController的部份先把需要的using 進來

using OfficeOpenXml;

using System.IO;

5.接下來是程式碼的部份

建立一個 public ActionResult ExportExcel(string Id) 

Id是用來接收前端剛剛設定的參數

接下來直接上碼

 public ActionResult ExportExcel(string Id) 

{

            //建立Excel

            ExcelPackage ep = new ExcelPackage();

            //填入資料

            //建立第一個Sheet，後方為定義Sheet的名稱

            ExcelWorksheet sheet1 = ep.Workbook.Worksheets.Add("頁簽1");

            int col = 1;    //欄:直的，因為要從第1欄開始，所以初始為1

            //第1列是標題列 

            sheet1.Cells[1, col++].Value = "標題1";

            sheet1.Cells[1, col++].Value = "標題2";

            sheet1.Cells[1, col++].Value = "標題3";

            sheet1.Cells[1, col++].Value = "標題4";

           

            //資料從第2列開始

            int row = 2;    //列:橫的

            int rowcount = 1;

            

            col = 1;//每換一列，欄位要從1開始

                    //指定Sheet的欄與列將資料寫入

            sheet1.Cells[row, col++].Value = rowcount;

            sheet1.Cells[row, col++].Value = "";

            sheet1.Cells[row, col++].Value = "";

            sheet1.Cells[row, col++].Value = DateTime.Now.ToString("yyyy-MM-dd");           

            row++;

            rowcount++;

           

            //Excel檔名

            var fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + ".xlsx";

            //Save the file to server temp folder

            string fullPath = Path.Combine(Server.MapPath("~/FileTemp"), fileName);

            MemoryStream fileStream = new MemoryStream();

            ep.SaveAs(fileStream);

            ep.Dispose();要記得先將資料寫進MemoryStream在Dispose。

            fileStream.Position = 0;//不重新將位置設為0，excel開啟後會出現錯誤

            return File(fileStream, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",              fileName);

   }

建置一下來看看前端的畫面,按下匯出Excel,結果GG

原來是要再加入設定

在Web.config中的appSettings中加入設定

<add key="EPPlus:ExcelPackage.LicenseContext" value="NonCommercial" />

再來一次

打開Excel

打完收工!

MVC 預設網頁

在 Asp.net sp.net 的 WebForm 裡,我們要進行偵錯時,只要在專案按下右鍵設定為啓始專案

再找到偵錯時要顯示的頁面,按右鍵選擇設定為起始頁

但在MCV的環境下設定的方式就不同了,首先對著專案,按下右鍵,找到屬性

按下屬性後,再找到Web頁簽,並在指定頁上key 下想要開始的網頁

圖示為View/Home/Index.cshtml 改為Home/Index
此時再去按偵錯就可以跑到http://localhost:59694/Home/Index 了



參考網址
https://stackoverflow.com/questions/1333002/how-do-you-set-the-startup-page-for-debugging-in-an-asp-net-mvc-application