ASP.NET MVC中從前台頁面視圖（View）傳遞數據到后台控制器（Controller）方式

方式一：

數據存儲模型Model：此方式未用到數據存儲模型Model，僅簡單的字符串string型數據傳遞

前台接收顯示數據視圖View：

<div style="height:300px; width:100%">
        <div style="margin-left:100px;margin-top:50px;">
            <input id="testData" type="text" style="width:200px;" /><br />
            <input id="submitButton" type="button" style="height: 25px; width: 75px;margin-top:35px;" value="submit">
        </div>
</div>

<script type="text/javascript">

        $(function () {
            $("#submitButton").click(function () {
                var data = $('#testData').val();
                $.post("/TransportData/GetFrontViewData", { frontViewData: data }, function () {
                    alert("submit data is OK!");
                });
            });
        })
       
</script>

后台處理數據控制器Controller：

public class TransportDataController : Controller
    {
        //
        // GET: /TransportData/

        public ActionResult Index()
        {
            return View();
        }
        public string GetFrontViewData(string frontViewData)
        {
            //handle frontViewData code

            return frontViewData;
        }
    }

傳輸中數據樣式截圖：

　　前台視圖View輸入測試值：

　　后台控制器Controller獲得此值：

 

方式二：

（借鑒：劉哇勇的部落格）

數據存儲模型Model：

public class Model
    {
        public string rtoNumber { set; get; }
        public string approver { set; get; }
        public string modifier { set; get; }
        public string comment { set; get; }
    }

前台接收顯示數據視圖View：

<div id="container">
        <table id="table">
            <tr>
                <td><label>RTONumber</label><input name="rtoNumber" /></td>
                <td><label>Approver</label><input name="approver" /></td>
                <td><label>Modifier</label><input name="modifier" /></td>
                <td><label>Comment</label><textarea name="comment" cols="30" rows="4"></textarea></td>
            </tr>
        </table>
        <input id="submit" type="button" value="submit"/>
</div>

<script type="text/javascript">
        $(function () {
            $('#submit').click(function () {
                var model = [];
                var subModel = [];
                $.each($("table tr"), function (i, item) {
                    var RTONumber = $(item).find("[name=rtoNumber]").val();
                    var Approver = $(item).find("[name=approver]").val();
                    var Modifier = $(item).find("[name=modifier]").val();
                    var Comment = $(item).find("[name=comment]").val();

                    model.push({ rtoNumber: RTONumber, approver: Approver, modifier: Modifier, comment: Comment, checkBoxValue: subModel });
                });
                $.ajax({
                    url: '/TransportModelData/getModelInfo',
                    data: JSON.stringify(model),
                    type: 'POST',
                    contentType: 'application/json;charset=utf-8',
                    async: false,
                    success: function (data) {
                        //window.location.href = "/RequestStatus/RequestDetail?requestID=" + data.RequestID;
                        alert("Postting data is over!");
                    }
                });
            });
        });
</script>

后台處理數據控制器Controller：

public class TransportModelDataController : Controller
    {
        //
        // GET: /TransportModelData/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult getModelInfo(List<Model> model)
        {
            string rtoNumber = model[0].rtoNumber;
            string modifier = model[0].modifier;
            string comment = model[0].comment;
            string approver = model[0].approver;

            return Content("");
        }

    }

傳輸中數據樣式截圖：

　　前台視圖View輸入測試值：

　　后台控制器Controller獲得此值：

 

（根據楓上善若水評論改寫）

此前輩建議：只傳一組數據時，沒必要用each遍歷。此外，jquery查找元素盡量精確，這樣可以提升查找效率！

只修改了View部分代碼，其他代碼沒變：

　　前台接收顯示數據視圖View：

<script type="text/javascript">
        $(function () {
            $('#submit').click(function () {
                var model = [];

                var RTONumber = $("input[name=rtoNumber]").val();
                var Approver = $("input[name=approver]").val();
                var Modifier = $("input[name=modifier]").val();
                var Comment = $("textarea[name=comment]").val();

                model.push({ rtoNumber: RTONumber, approver: Approver, modifier: Modifier, comment: Comment });

                $.ajax({
                    url: '/TransportModelData/getModelInfo',
                    data: JSON.stringify(model),
                    type: 'POST',
                    contentType: 'application/json;charset=utf-8',
                    async: false,
                    success: function (data) {
                        //window.location.href = "/RequestStatus/RequestDetail?requestID=" + data.RequestID;
                        alert("Postting data is over!");
                    }
                });
            });
        });
</script>

測試數據值與結果和方式二相同，如上截圖。

 

（根據約個十月天評論改寫）

此前輩建議：前后台Model與View中屬性值對應，可以按照約定的數據模型來傳遞，不用List<>!

 只修改了View、Controller部分代碼，其他代碼沒變：

　　前台接收顯示數據視圖View：

<script type="text/javascript">
        $(function () {
            $('#submit').click(function () {
                var RTONumber = $("input[name=rtoNumber]").val();
                var Approver = $("input[name=approver]").val();
                var Modifier = $("input[name=modifier]").val();
                var Comment = $("textarea[name=comment]").val();

                $.ajax({
                    url: '/TransportModelData/getModelInfo',
                    data: {
                        rtoNumber:RTONumber,
                        approver: Approver,
                        modifier: Modifier,
                        comment:Comment
                    },
                    type: 'POST',

                    dataType:'json',
                    //contentType: 'application/json;charset=utf-8',

                    async: false,
                    success: function (data) {
                        //window.location.href = "/RequestStatus/RequestDetail?requestID=" + data.RequestID;
                        alert("Postting data is over!");
                    }
                });
            });
        });
</script>

　　后台處理數據控制器Controller：

public class TransportModelDataController : Controller
    {
        //
        // GET: /TransportModelData/

        public ActionResult Index()
        {
            return View();
        }
        //public ActionResult getModelInfo(Model model)
        //{
        //    string rtoNumber = model.rtoNumber;
        //    string modifier = model.modifier;
        //    string comment = model.comment;
        //    string approver = model.approver;

        //    return Content("");
        //}
        public bool getModelInfo(Model model)
        {
            bool result = model == null ? false : true;
            string rtoNumber = model.rtoNumber;
            string modifier = model.modifier;
            string comment = model.comment;
            string approver = model.approver;

            return result;
        }

    }

測試數據值與結果和方式二相同，如上截圖。

注意：此方式需注意的地方是以前“contentType:'application/json;charset=utf-8'”改換成了“dataType:'json'”，因為后台Controller中的接收數據方法返回值類型由“ActionResult”改換成了“bool”。如果不改“contentType:'application/json;charset=utf-8'”為“dataType:'json'”的話，后台Controller中是無法得到前台View傳來的數據的！

 

本人用到及此，下次遇到再續寫，謝謝！（有錯有缺陷請指導）

 

在此添加一段話（給評論的）：

首先這篇文章能有這么多評論，是大家真心話！在此謝過技術性評論！！！！！

我寫這不是誤導新人好吧！說他誤導新人，這有點過了吧！你想想看，你技術是大牛型的，大神級的，寫的代碼再好再優考慮更全面有什么用，新手看了就能會嗎！我這是我實踐出來的，可行的，我一步一步走出來的，一步一步學來的！最起碼新手照抄照搬可以立馬就會，有缺陷有錯誤后期遇到可以慢慢改啊，這就是成長！我承認大神們寫得好，可是看不懂不會用，還是沒用的，那是夠不着的，學習不就是從簡單的一步一步來嘛！不可能一口吃個大胖子是不是！

所以大家技術性相關的評論我很歡迎，這對我有好處啊學的更多！非技術性評論的就不要說那些話，想想挺傷人的不是！自己考慮一下！

我是菜鳥，你可以跟我比菜嗎？不能！正是因為我寫的不好，所以才要寫出來，讓大家指導的不是嗎！大家的評論好的，有建設性的都是我值得學習的...

更多知識分享：微笑空間站