欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-14 09:46:52
方式一:   数据存储模型Model:此方式未用到数据存储模型Model,仅简单的字符串string型数据传递   前台接收显示数据视图View: &...
方式一:

 

数据存储模型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("");

        }

 

    }

复制代码