MVC後臺數據賦值給前端JS對象

来源:http://www.cnblogs.com/akwwl/archive/2016/03/10/5238975.html
-Advertisement-
Play Games

Controller中的數據,不管是使用的是ViewModel 還是ViewBag.Data,要將他傳遞到View中,這個很容易,但是如果要將它傳遞給JS中的某個對象,這個改如何處理呢? 後臺的數據格式: public class ViewModel { public int ID { get; s


Controller中的數據,不管是使用的是ViewModel 還是ViewBag.Data,要將他傳遞到View中,這個很容易,但是如果要將它傳遞給JS中的某個對象,這個改如何處理呢?

後臺的數據格式:

    public class ViewModel
    {
        public int ID { get; set; }

        public string Name { get; set; }

        public List<string> Data { get; set; }
    }

Controller 傳遞到View的數據:

        public ActionResult Index()
        {
            ViewBag.ID = 1;
            ViewBag.Name = "WWW";
            ViewModel viewModel = new ViewModel()
            {
                ID = 100,
                Name = "WWW",
                Data = new List<string> {"A","B","C","D","E" }
            };
            return View(viewModel);
        } 

前臺JS 中的一個對象

    var viewModel = {
        id: 0,
        name: '',
        data:[]
    }

  

1. 如果需要傳遞整形數字到JS中 

<script>
        [email protected];
        or
        [email protected];
</script>

2.  如果需要傳遞字元串到JS中

<script>        
        viewModel.name='@ViewBag.Name';
        or
        viewModel.name='@Model.Name';  
</script>  

3.如果需要傳遞複雜的數據類型到JS中,如對象,數組,集合等,

<script>
        viewModel.data = @Html.Raw(Json.Encode(Model.Data));
</script>

 

更多方法請參見:http://stackoverflow.com/questions/3850958/pass-array-from-mvc-to-javascript

另外將JS 中的對象傳遞到Controller中,這個直接採用Ajax,就可以實現,詳細請參見  http://stackoverflow.com/questions/16824773/passing-an-array-of-javascript-classes-to-a-mvc-controller

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 序列化是將一個對象轉換成位元組流以達到將其長期保存在記憶體、資料庫或文件中的處理過程。它的主要目的是保存對象的狀態以便以後需要的時候使用。與其相反的過程叫做反序列化。 序列化一個對象 為了序列化一個對象,我們需要一個被序列化的對象,一個容納被序列化了的對象的(位元組)流和一個格式化器。進行序列化之前我們先
  • 註冊用戶有一段時間了,一直很忙,到現在還沒有寫一篇,忽然覺的一定要花點時間記錄和總結一些東西。好吧,就從這裡開始了。 今天客戶提出要點擊菜單(TreeView實現的)的父級節點時,展開節點。心想這個應該是很常見的功能吧,特意google了一下,發現大部分是將的不是js實現的,有些js實現的寫的麻煩,
  • 它們只是不起眼的小技巧。日積月累,它們讓我們的工作、學習更有效率,讓我們更加專註於邏輯本身,它們是.NET程式員的好朋友,它們是Visual Studio的小技巧……我們,真的認識它們嗎? 如果想儘快掌握這些技巧,請打開Visual Studio親自試一下這些技巧,希望找到你喜歡的技巧的。 (圖片來
  • 泛型(generic)是C#語言2.0和通用語言運行時(CLR)的一個新特性。泛型為.NET框架引入了類型參數(type parameters)的概念。類型參數使得設計類和方法時,不必確定一個或多個具體參數,其的具體參數可延遲到客戶代碼中聲明、實現。這意味著使用泛型的類型參數T,寫一個類MyList
  • 可選參數和命名參數 不多說,上代碼,自然懂 class Program { static void Main(string[] args) { var troy = new Troy(); troy.HelloWorld(1);//此時b和c都為0 troy.HelloWorld(1,2);//此時
  • 回到目錄 之前寫的一篇文章,主要針對View視圖,它可以放在N級目錄下,不必須非要在views/controller/action這種關係了,而在程式運行過程中,發現分頁視圖對本功能並不支持,原因很簡單,在RazorViewEngine有不同的屬於來修飾這兩個東西,對於View的查找,通過ViewL
  • 在平時使用軟體或是.NET程式開發的過程中,我們有時會遇到程式關閉後但進程卻沒有退出的情況,這往往預示著代碼中有問題存在,不能正確的在程式退出時停止代碼執行和銷毀資源。這個現象有時並不容易被察覺,但在另一些情況下卻會產生影響軟體功能的Bug。本文列舉可能影響.NET程式進程退出的因素,並用幾個小例子
  • 求兩個數之和。這個問題夠簡單吧!能做對絕對不是問題,問題是你是否能做的比較好。好了,請看題目: Given an array of integers, return indices of the two numbers such that they add up to a specific targ
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...