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

前后端交互与数据存储技术

最新推荐文章于 2023-06-06 16:57:58 发布

duanwenzhi00

最新推荐文章于 2023-06-06 16:57:58 发布

阅读量8.5k

点赞数 2

分类专栏： MVC 文章标签： MVC ASP.NET View Controller

MVC 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了在Web应用中使用数据存储模型和控制器处理前端数据传递的过程，包括简单的字符串传递方式和复杂模型对象的处理，展示了如何通过JavaScript和C#实现前后端的数据交互。

方式一：

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

        }
    }

方式二：

（借鉴：刘哇勇的部落格）

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