ASP.NET MVC之从视图传递数据到控制器

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

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

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

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

后台处理数据控制器Controller：

public class TransportDataController : Controller
    {
        //
        // GET: /TransportData/
 
        public ActionResult Index()
        {
 
            return View();
 
        }
 
        public string GetFrontViewData(string frontViewData)
        {
 
            //handle frontViewData code
 
            return frontViewData;
 
        }
    }

 

2.数据存储模型Model：此方式用到数据存储模型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("");
        }
    }

3.传递数组到后台

//前台请求
$(function () {
            var value = ["C#", "JAVA", "PHP"];
            $("input[type='button']").click(function () {
                $.ajax(
                    {
                        url: "/Home/List",
                        type: "Get",
                        data: { valuelist: value },
                        traditional: true,  //必须设置该属性，否则控制器中获取不到值
                        success: function (data) {
                            alert("Success");
                        }
                    });
            });

        });

//后台代码
public ActionResult List(List<string> valuelist)
{
    return View();
}

4. 传递单个Model

// 前台code
@using (Html.BeginForm())
    {
        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Price, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Price)
                @Html.ValidationMessageFor(model => model.Price)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Color, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Color)
                @Html.ValidationMessageFor(model => model.Color)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="提交" class="btn btn-default" />
            </div>
        </div>

    }

//实体code
public class Products
    {

        public int Id { get; set; }

        [DisplayName("产品名称")]
        [Required(ErrorMessage = "此项不能为空")]
        public string Name { get; set; }


        [DisplayName("产品价格")]
        [Required(ErrorMessage = "此项不能为空")]
        public string Price { get; set; }

        [DisplayName("产品颜色")]
        [Required(ErrorMessage = "此项不能为空")]
        public string Color { get; set; }

    }

//后台code
public ActionResult Add(Products product)
{
       return View();
}

5. 传递多个Model

//前台code
$("input[type='submit']").click(function () {
                var promodes = [];
                promodes.push({ Id: "0", Name: "手机", Color: "白色",Price:"2499" });
                promodes.push({ Id: "1", Name: "耳机", Color: "黑色", Price: "268" });
                promodes.push({ Id: "2", Name: "充电器", Color: "黄色",Price: "99" });
                $.ajax(
                    {
                        url: "/Home/List",
                        type: "Post",
                        data: JSON.stringify(promodes),  //必须对数组进行序列化
                        contentType:"application/json",  //设置contentType的值为"application/json",默认为"application/json"
                        success: function (data) {
                            alert("Success");
                        }
                    });
            });
//后台code
 public ActionResult List(List<Products> valuelist)
 {
       return View();
 }