Asp.net MVC Web.config導頁設定

以下筆記一下而已

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
	<httpProtocol>
		<customHeaders>
			<clear />
			<add name="X-UA-Compatible" value="IE=Edge" />
		</customHeaders>
	</httpProtocol>
	<httpErrors>
		<remove statusCode="502" subStatusCode="-1" />
		<remove statusCode="501" subStatusCode="-1" />
		<remove statusCode="500" subStatusCode="-1" />
		<remove statusCode="406" subStatusCode="-1" />
		<remove statusCode="412" subStatusCode="-1" />
		<remove statusCode="405" subStatusCode="-1" />
		<remove statusCode="404" subStatusCode="-1" />
		<remove statusCode="403" subStatusCode="-1" />
		<remove statusCode="401" subStatusCode="-1" />
		<error statusCode="401" prefixLanguageFilePath="" path="https://easyusingx.blogspot.com/" responseMode="Redirect" />
		<error statusCode="403" prefixLanguageFilePath="" path="https://easyusingx.blogspot.com/" responseMode="Redirect" />
		<error statusCode="404" prefixLanguageFilePath="" path="https://easyusingx.blogspot.com/" responseMode="Redirect" />
		<error statusCode="405" prefixLanguageFilePath="" path="https://easyusingx.blogspot.com/" responseMode="Redirect" />
		<error statusCode="412" prefixLanguageFilePath="" path="https://easyusingx.blogspot.com/" responseMode="Redirect" />
		<error statusCode="406" prefixLanguageFilePath="" path="https://easyusingx.blogspot.com/" responseMode="Redirect" />
		<error statusCode="500" prefixLanguageFilePath="" path="https://easyusingx.blogspot.com/" responseMode="Redirect" />
		<error statusCode="501" prefixLanguageFilePath="" path="https://easyusingx.blogspot.com/" responseMode="Redirect" />
		<error statusCode="502" prefixLanguageFilePath="" path="https://easyusingx.blogspot.com/" responseMode="Redirect" />
	</httpErrors>
</system.webServer>
</configuration>

Asp.net MVC Razor Page Url.Action編碼問題

在Razore Page的裡面使用Url.Action

在JS內會產生連結

連結怎麼點都會錯，仔細一看&被編碼了

外面包一層Html.Raw以免被編碼

這樣連結就會正常

參考資料
Url.Action puts an & in my url, how can I solve this?

Asp.net MVC 上傳圖片自動轉正(23)

最近常有同事說上傳到網頁圖片就會自動的90度旋轉
後來想到有一個名詞上網找了一下
可交換圖檔格式常被簡稱為Exif（Exchangeable image file format）
裡面有個選項是圖像方向於是找了發現非標準
想說是否能抓取EXif取得圖片轉的方向然後將圖片轉回來
很幸運的網路已經有人寫過將之修改

                if (file != null && file.Count() > 0)
                {
                    foreach (var item in file)
                    {
                        if (item != null)
                        {                            
                            //轉成圖片                           
                            System.Drawing.Image img = System.Drawing.Image.FromStream(item.InputStream);
                            //取得旋轉度數
                            foreach (var prop in img.PropertyItems)
                            {
                                if (prop.Id == 0x0112) //value of EXIF
                                {
                                    int orientationValue = img.GetPropertyItem(prop.Id).Value[0];
                                    RotateFlipType rotateFlipType = GetOrientationToFlipType(orientationValue);//取得轉的度數
                                    img.RotateFlip(rotateFlipType);//依度數轉成正的
                                    break;
                                }
                            }

                            //處理圖片 轉二進位 或存到路徑上
                            //byte[] byteImage = imageToByteArray(img);//轉二進位
                            //img.Save.....
                        }
                    }
                }


  public static  RotateFlipType GetOrientationToFlipType(int orientationValue)
        {
            RotateFlipType rotateFlipType = RotateFlipType.RotateNoneFlipNone;

            switch (orientationValue)
            {
                case 1:
                    rotateFlipType = RotateFlipType.RotateNoneFlipNone;
                    break;
                case 2:
                    rotateFlipType = RotateFlipType.RotateNoneFlipX;
                    break;
                case 3:
                    rotateFlipType = RotateFlipType.Rotate180FlipNone;
                    break;
                case 4:
                    rotateFlipType = RotateFlipType.Rotate180FlipX;
                    break;
                case 5:
                    rotateFlipType = RotateFlipType.Rotate90FlipX;
                    break;
                case 6:
                    rotateFlipType = RotateFlipType.Rotate90FlipNone;
                    break;
                case 7:
                    rotateFlipType = RotateFlipType.Rotate270FlipX;
                    break;
                case 8:
                    rotateFlipType = RotateFlipType.Rotate270FlipNone;
                    break;
                default:
                    rotateFlipType = RotateFlipType.RotateNoneFlipNone;
                    break;
            }

            return rotateFlipType;
        }

參考來源
EXIF
Reset Image Orientation using EXIF in C#

Asp.net MVC 設定圖片路徑(22)

也許有些美編會將大圖或背景寫在Css裡
但萬一使用者有需要異動資料夾或是由資料庫撈時就沒辦法
所以如果有需求時會拿到html裡如下

如果需要做可以動態改變時怎麼辦
網路做法有一堆
自己想到一個做法

使用@Url.Action來產生連結這樣就可做多種變化

Asp.net MVC MvcReportViewer

網路上看到的先跟大家分享，有空再實作看看
ASP.NET MVC Html Helpers for ReportViewer Control

Asp.net MVC NuGet 常安裝的(21)

在寫新專案時比較方便加入
===================================================================
.Net Framework
Install-Package Autofac.Mvc5 -Version 4.0.2
Install-Package bootstrap -Version 3.3.7
Install-Package EntityFramework -Version 6.2.0
Install-Package EntityFramework.zh-Hant -Version 6.2.0
Install-Package Fancybox -Version 2.1.5
Install-Package jQuery -Version 1.12.4
Install-Package Microsoft.jQuery.Unobtrusive.Ajax -Version 3.2.5
Install-Package Newtonsoft.Json -Version 7.0.1
Install-Package NPOI -Version 2.4.0
Install-Package PagedList.Mvc -Version 4.5.0
Install-Package System.Linq.Dynamic -Version 1.0.7
Install-Package Microsoft.AspNet.Mvc -Version 5.2.7
===================================================================
.Net Core(2020-11-13)
Model
Install-Package FluentValidation.AspNetCore
Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 3.1.21
Install-Package Microsoft.EntityFrameworkCore.SqlServer.Design
Install-Package Microsoft.EntityFrameworkCore.Tools -Version 3.1.21
Service
Install-Package Dapper
Install-Package Microsoft.AspNetCore.Mvc.Core
Install-Package NPOI -Version 2.5.2
Web
Install-Package X.PagedList.Mvc.Core
===================================================================
libman.json(2020-11-13)

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [   
    {
      "provider": "unpkg",
      "library": "@microsoft/signalr@3.1.4",
      "destination": "wwwroot/microsoft/signalr/"
    },
     {
      "library": "fancybox@3.5.7",
      "destination": "wwwroot/lib/fancybox/"
    },
    {
      "library": "jquery@3.5.1",
      "destination": "wwwroot/lib/jquery/"
    },
    {
      "provider": "unpkg",
      "library": "bootstrap@4.5.3",
      "destination": "wwwroot/lib/bootstrap/"
    },
    {
      "library": "bootstrap-datepicker@1.9.0",
      "destination": "wwwroot/lib/bootstrap-datepicker/"
    }
  ]
}

Asp.net MVC Bootstrap submit confirm Button loading(20)

有時在批次執行一些動作時會持續很久
要怎麼讓按紐變成Loading讓使用者不會重複按

@using (Ajax.BeginForm("action", "controller", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "OnSuccess", OnBegin = "OnBegin" }))
{
 
}

寫兩個function OnBegin OnSuccess
一個是在執行submit前一個在後
加上confirm讓使用者有感

        var btn = $('#MultipleCreate');

        function OnBegin() {
            if (!confirm('確定批次新增嗎??')) return false;
            btn.button('loading');
        }

        function OnSuccess(response) {
            btn.button('reset');
            alert('完成');           
        }

Asp.net MVC jQuery常用範例(19)

因公很久沒寫MVC了都忘了
最近練了許多jQuery的東西想說MVC到時能做結合所以想到先做一個筆記
想到就加摟
1.如何將資料傳到後端(主要是Url.Action)

@section scripts {

    
}

        [HttpPost]
        public ActionResult TestGet(string q)
        {
            return Content(q);
        }

Asp.net MVC Html.ActionLink & Url.Action https(SSL)(18)

記錄一下摟

 
@Html.ActionLink("關於", "About", "Home", "https", "", "", new { id = "1" ,test="000"}, new { @class="abc"})
@Url.Action("About","Home",null,"https","")

Asp.net MVC NuGet安裝指定套件的版本(17)

VS有個很強的功能就是NuGet相信很多人都知了就不再多說
至於沒用過的可試試，只要在專案上按下右鍵如下圖及可搜尋及安裝

但像jQuery有很多版本確不想要安裝到最新的版本那怎麼辦?
到jquery點選下面的版本
會有一行 PM > Install-Package jQuery -Version 1.10.2
到VS > 工具 > 程式庫套件管理員 >套件管理主控台 > 點一下就會出現主控台視窗 將剛的那一樣貼上執行即可

Asp.net MVC 必裝NuGet套件Elmah(16)

先廢話一下
今天不是實作了，完成前面幾項功能其實就差不多可以做出一個基本網站了
但這樣還不夠尤其實是錯誤訊息相當重要
因為程式總是會有例外
所以必需靠這些訊息來判斷那裡有問

---

安裝NuGet套件方式 點我前往
相關教學 點我前往
點我前往
其實就幾個重點
1.elmah.mvc.route最好設定不要使用預設
2.如果開啟遠端如下，一定要設定elmah.mvc.requiresAuthentication

3.以下是幾個設定在相關教學裡有保哥說的很詳細

參考網址
點我前往
點我前往

Asp.net MVC 實作抓最大排序及繫結的方法(15)

先廢話一下
其實很簡單但是有時會無法繫結

---

Controller部份先

//抓最大值
int Sort =  (from u in db.TabContent 
  where u.TabID==tabid
  select u.Sort).DefaultIfEmpty().Max(x => x == null ? 0 : x);
ViewBag.Sort = Sort + 1;

以上這部份很簡單沒問題吧

        

            @Html.LabelFor(model => model.Sort, new { @class = "control-label col-md-2" })
            

                @Html.TextBoxFor(model => model.Sort)
                @Html.ValidationMessageFor(model => model.Sort)
            
        

程式碼自動產生會這樣
但如何修改成能抓ViewBag

        

            @Html.LabelFor(model => model.Sort, new { @class = "control-label col-md-2" })
            

                @Html.TextBox("Sort",null, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Sort)
            
        

改成用弱型別是一個方法記得"Sort"這樣就能抓到ViewBag了
而且最好以欄位名稱命名
這樣在Model Binding時就能抓到值喔
不然會抓不到資料有興趣可以試試 參考網址

Asp.net MVC 實作jQuery+Html.DropDownList更換頁面資料(14)

先廢話一下
這功能蠻實用的原本還想說用AjaxBeginForm但不知該如何寫
雖然寫出來了但應該還有許多可以地方可以加強

---

Controller部份先抓產生下拉選單的資料

        public ActionResult Index( )
        {
            ViewBag.TabData = new SelectList(db.Tab, "TabID", "TabName"); //產生下拉選單
            return View();
        }

View的部份也放一個@Html.DropDownList接收下拉選單
也放一個DIV來準備給jQuery用

@Html.DropDownList("TabData", null, null, new { id = "ddTabData" })

然後產原本產生的Index裡的Table另外開一個_List.schtml裡
所以這時畫面應該只剩一個下拉選單
我們要讓下拉後變更整個Table裡的資料
怎麼做當然就是去呼叫剛的頁面
要動態更新DOM我只會jQuery哈

去呼叫@(Url.Action("GetList", "TabContent", null))

  public ActionResult GetList(int tid = 1)
        {
            var tabcontent = db.TabContent.Where(u => u.TabID == tid).Include(t => t.Account).Include(t => t.Account1).Include(t => t.Tab);
            return View("_List",tabcontent.ToList() );
        }

這樣就會回傳一整個Table回來
但_List.cshtml裡除了原本宣告model要放

@{    
    if (IsAjax)
    {
        Layout = null;
    }    
}

上面這句也要加，不加差在那邊各位可以自己測試!!
參考網址

Asp.net MVC 實作AutoMapper後加上PagedList(13)

先廢話一下
今天終於將MVC課程上完了
接下來就要多練習

---

上篇文章提到AutoMapper可自動轉型
但試了很久就是沒法轉成PagedList
還好運氣不錯找到一篇文章>

public ActionResult Index()
{
	Mapper.CreateMap(); 
        var OrderList = db.Account.OrderBy(o => o.AccountID);//設定OrderBy List
        var PagedList = OrderList.ToPagedList(p, 2);//分頁的 List
        var viewmodel = Mapper.Map, IEnumerable>(PagedList.ToArray()); // 分頁列表轉換成ViewModel
        var query = new StaticPagedList(viewmodel, PagedList.GetMetaData()); // reconsitute a new IPagedList containing the viewmodels
        return View(query);       
}

說真的我還真看不太懂最後一行那句
但這樣在View中是完全不需要更改的
寫到現在這樣CRUD最底層都差不多寫好了
簡單的專案也差不多快完成了
參考網址
點我

Asp.net MVC 實作AutoMapper Mapping Model and ViewModel(12)

先廢話一下
第一次寫MVC檢視一下程式碼
發覺定義了太多ViewModel
只要新增一個欄位後View Controller Model居然都需要改
天阿這一定不會是我想要的
相信寫MVC的人覺對不會想發生這種問題

---

Google搜尋後發覺有一個好的套件
AutoMapper在NuGet裡搜尋就能找到安裝
來看一下原本的程式碼

public ActionResult Index()
{
 var query = from u in db.Account
                    select new AccountVM
                    {
                        AccountID = u.AccountID,
                        AccountName = u.AccountName,
                        IsUsed = u.IsUsed,
                        LoginIP = u.LoginIP,
                        LoginDate = u.LoginDate,
                        Name = u.Name,
                        Email = u.Email
                    };

         return View(query);
}

看以上程式碼只要加一個欄位每次都要跑來修改
唉~對於最內部系統的人最痛苦的事就是新增欄位了
來看一下使用AutoMapper

public ActionResult Index()
{
        Mapper.CreateMap();
        List account = db.Account.ToList();
        List< AccountVM> query = Mapper.Map<  List< Account>,List< AccountVM>>(account);   
        return View(query);
}

這樣不管怎麼增加欄位都不需要在Controller修改了
只是目前不知會不會有什麼Bug 參考網址
點我

Asp.net MVC 實作DropDownList繫結資料庫selected(11)

先廢話一下
DropDownList很簡單阿
WebForm用selectvalue=xxx就好
但MVC的DropDownList讓我研究了一早上

---

大部份在網路上找的都是建立或者連動DropDownList
可能是我搜尋功力差找不到繫結資料庫又能Select的方法
自己想了一個很瞎的方式
就是自己判斷抓出來的值跟DropDownList有沒有一樣
然後把Select變True
只是不知這樣是否為最佳的寫法
以下是View程式碼

@{                    
 List list = (List)ViewBag.TabColumnName;
 foreach (var s in list )
 {
     if (item.TabColumnName.Equals(s.Value))
  {
   s.Selected = true;
  }
  else
  {
   s.Selected = false;
  }            
 }
}              
@Html.DropDownListFor(modelItem => item.TabColumnName, list)  

Controller如下

ViewBag.TabColumnName =TabColumnVM.getTabColumnName(); 

Asp.net MVC 實作TempData應用自訂Error(10)

先廢話一下
大部份都會設計刪Master時Detail也順便刪
依需求所以做個不一樣的
如果Detail是有資料時就提示不能刪除Master
這樣好像讓資料更安全點

---

使用TempData來紀錄錯誤的訊息
為何用TempData因為他只會被使用一次
所以在post錯誤時傳給Get一次顯示

  public ActionResult Delete(short? id)
        {            
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
     //重點在這裡接收後顯示錯誤
            if (TempData["CustomError"] != null)
            {
                ModelState.AddModelError(string.Empty, TempData["CustomError"].ToString());
            }

            //Account account = db.Account.Find(id);
            var query = from u in db.Tab where u.TabID == id;

            if (query == null)
            {
                return HttpNotFound();
            }
            return View(query);
        }

        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public ActionResult DeleteConfirmed(short? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }

            string Sql = " TabID == @0";
            var query1 = (from u in db.TabColumn.Where(Sql, id)
                          select u).ToList();
            if (query1.Count() > 0)
            {               
  //有錯時丟給Get顯示
                TempData["CustomError"] = "頁籤內有欄位所以不可刪除";
                return RedirectToAction("Delete",null, id);
            }

            Tab query = db.Tab.Find(id);
            db.Tab.Remove(query);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

在View裡記得加以下才會顯喔

@Html.ValidationSummary(true)

參考網址

Asp.net MVC 實作TextBoxFor DataFormat(9)

先廢話一下
多實作多健康

---

一般會在Model裡設定DataFormat

[DisplayName("時間")]
[DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:yyyy-MM-dd HH:mm:ss}", ApplyFormatInEditMode = false)]
public Nullable pDate { get; set; }

以上在list用DisplayFor都沒什麼問題
但TextBoxFor時如果MS-SQL是中文版的還是會出現上午、下午這種字眼當然驗證就不會過了
改成如下就能正常顯示yyyy-MM-dd HH:mm:ss

@Html.TextBoxFor(model => model.LoginDate, "{0:yyyy-MM-dd HH:mm:ss}", new { @class = "form-control", @readonly = "readonly" })

參考網址
點我

Asp.net MVC 實作使用TryUpdateModel更新資料(8)

先廢話一下
最近真的越寫MVC越上癮了
雖然因為很不熟一直卡
但是做出來的成就感特別好
有些東西做出來但是還是有些詳細的原理還需了解

---

終於做到需要開始CRUD了
首先針對會員資料做更動
最先遇到的是修改欄位後有些欄位不更新
找了兩篇相當好的文章 點我 點我
使用TryUpdateModel有10個多型能使用
重點再於第四個參數
為不更新的欄位名稱
沒輸入密碼時不更新>

  [HttpPost]
        [ValidateAntiForgeryToken]
       
        public ActionResult Edit(int Id, AccountEdit Form)
        {
            if (ModelState.IsValid)
            {              
                Account query = db.Account.Find(Id);               
                List list = new List();

                //  沒打 是空時 時不更新
                if (Form.Password == null || Form.Password.ToString().Equals(""))
                {
                    list.Add("Password");
                }
           
                if (TryUpdateModel(query,"",null,list.ToArray()))
                {
                    try
                    {
                        // 有打時 不是空 這段必需要寫在TryUpdateModel
                        if (Form.Password != null && !Form.Password.ToString().Equals(""))
                        {                            
                            query.Password =  PublicFunction.EncodeStringMD5(Form.Password); 
                        }                      

                        db.SaveChanges();
                    }
                    catch (Exception ex)
                    {
                        string e = ex.Message.ToString();
                        throw;
                    }
                   
                    return RedirectToAction("Index");
                }
                return View(query);
            }
            return View(Form);          
        }
       

有個特別的地方就是要輸入時才更新密碼部份
原本寫在TryUpdateModel外面感謝保哥指導
"TryUpdateModel會蓋掉 model的資料"
"因為他在這時後才做 Model Binding"
所以要寫在TryUpdateModel裡面
參考網址
點我
點我
微軟官方

Asp.net MVC 實作一個View多個Model(7)

先廢話一下
這功能看似簡單
但不知如何架構跟下語法可能會寫不出來

---

先在ViewModels裡建一個Class裡面有三個IEnumerable

public class TabContainerVM
    public class TabContainerVM
    {
        public IEnumerable tab { get; set; }
        public IEnumerable tabcolumn { get; set; }
        public IEnumerable tabrow { get; set; }
    }

在Controller裡把資料自行加入到model裡後回傳

  public ActionResult TabContainer()
        {
            var tab = from u in db.Tab                      
                      select u;

            var tabcolumn = from u in db.TabColumn
                            select u;

            var tabrow = from u in db.TabRow
                         select u;

            var model = new TabContainerVM
            {
                tab = tab,
                tabcolumn = tabcolumn,
                tabrow = tabrow
            };

            return PartialView("_TabContainer",model);
        }

view的話就能使用

@model  ViewModels.TabContainerVM


@foreach (var tab in Model.tab)
{
 

 @foreach (var tab in Model.tabcolumn )
 {
  //do something
  

 }
 
}

參考網址 點我