ASP.NET MVC中从前台页面视图（View）传递数据到后台控制器（Controller）方式

方式一：

 

数据存储模型Model：此方式未用到数据存储模型Model，仅简单的字符串string型数据传递

 

前台接收显示数据视图View：

 

 

<p style="height:300px; width:100%">

        <p 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">

        </p>

</p>

 

复制代码

<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：

 

 

复制代码

<p 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"/>

</p>

复制代码

 

复制代码

<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("");

        }

 

    }

复制代码