在 MVC 中将数据从视图发送到控制器

Question

我有一个 VIEW，它将 ViewData 中的数据呈现到表格中，如下所示。

如您所见，每一行都有一个按钮。

我想在单击时将 Row 数据发送到相应按钮的控制器。

我如何做到这一点？

请提供建议和最佳实施方法。

我尝试使用敲除绑定此数据并将其发布到控制器，正如我在此 How to Bind data from Razor to Knockout? 中发布的那样，它不起作用，没有任何绑定。

查看

@{
    var UserWRInfo = (List<InfoEntity>)ViewData["UserWRInfo"];
    var UserOwner = (List<string>)ViewData["UserOwner"];

    <table class="table table-bordered">
        <thead>
            <tr>
                <th ><b>Status</b></th>
                <th ><b>Appropriation</b></th>
                <th ><b>PriorityDate</b></th>
                <th ><b>Location</b></th>
                <th ><b>Source</b></th>
                <th ><b>Owner</b></th>
                <th ><b>Use</b></th>
                <th ><b>StartedBy</b></th>
                <th ><b>RequiredReporting</b></th>
            </tr>
        </thead>

        <tbody>
            @for (int i = 0; i < UserWRInfo.Count; i++)
            {
                <tr>
                    <td><button type="submit" class="btn btn-primary">Start</button></td>
                    <td> @UserWRInfo[i].AppropriationNumber</td>
                    <td> @UserWRInfo[i].PriorityDate.ToString("MM/dd/yyyy")</td>
                    <td> @UserWRInfo[i].Sect @UserWRInfo[i].Township @UserWRInfo[i].Range@UserWRInfo[i].RangeDirectionID</td>
                    <td> @UserWRInfo[i].Source</td>
                    @if (UserWRInfo.Count == UserOwner.Count)
                    {
                        <td> @UserOwner[i].ToString()</td>
                    }
                    else
                    {
                        <td ></td>
                    }

                    <td> @UserWRInfo[i].UseDescription</td>
                    <td></td>
                    <td> @UserWRInfo[i].isAnnualReportRequired</td>
                </tr>

            }

        </tbody>
    </table>
}

Answer 1

试着这样做

<tbody>

    @for (int i = 0; i < UserWRInfo.Count; i++)
{
    <form name="form_@i" method="post" action="Controller/Action">
        <tr>
            <td>
                <input type="hidden" name="@UserWRInfo[i].AppropriationNumber">@*repeate for each attribute*@
            </td>
            <td><button type="submit" class="btn btn-primary">Start</button></td>
            <td> @UserWRInfo[i].AppropriationNumber</td>
            <td> @UserWRInfo[i].PriorityDate.ToString("MM/dd/yyyy")</td>
            <td> @UserWRInfo[i].Sect @UserWRInfo[i].Township @UserWRInfo[i].Range@UserWRInfo[i].RangeDirectionID</td>
            <td> @UserWRInfo[i].Source</td>
            @if (UserWRInfo.Count == UserOwner.Count)
            {
                <td> @UserOwner[i].ToString()</td>
            }
            else
            {
                <td></td>
            }

            <td> @UserWRInfo[i].UseDescription</td>
            <td></td>
            <td> @UserWRInfo[i].isAnnualReportRequired</td>
        </tr>
    </form>
}

</tbody>

Answer 2

我个人会先在 C# 中创建一个视图模型，然后像这样传递给视图：

public class ViewModel //choose a name that fits the data/business case
{

    public IList<UserInfo> UserInfo { get; set; }
}

public class UserInfoViewModel
{
    //Note: your datatypes may vary
    public string Status { get; set; }
    public string Appropriation { get; set; }
    // continue with all other properties ...
}

然后我会将此模型从控制器传递给视图：

public class HomeController
{
     [HttpGet]
     public ActionResult Index()
     {
         var viewModel = new ViewModel();
         viewModel.UserInfo = new List<UserInfo>();
         // build your collection...

         return View(viewModel);
     }
}

从这里开始，我可能会在视图上使用 Knockout.js 或 Angular.js 或其他一些数据绑定框架。以下是使用 Knockout.js 的效果：

// Your View Code Here...
<table class="table table-bordered">
   <!-- table header, etc... -->

   <tbody data-bind="foreach: userInfo">
       <td><button data-bind="click: sendToServer"></td>
       <td data-bind="text: appropriation"></td>

       <!-- add all other fields via data-bind -->

   </tbody>

</table>

@{
     System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
}

<script type="text/javascript">

    var UserInfo = function(json){

        self.Status = ko.observable(json.Status);
        self.Appropriation = ko.observable(json.Approiation);

        // continue with all other properties

        self.sendToServer = function(userData){
           // your ajax to send to server, however, I'd probably inject a data access object
        }

    };


    var ViewModel = function(json) {

        var self = this;
        self.userInfo = ko.observableArray();

        self.setUserInfo = function(){
          //using underscore.js
          _.each(json.UserInfo, function(userInfoJson){
              var userInfo = new UserInfo(userInfoJson);

              self.userInfo.push(userInfo);
          });
        };

    };

    $(document).ready(function(){

        var viewModel = new ViewModel(@Html.Raw(serializer.Serialize(Model));

        viewModel.setUserInfo();

        ko.applyBindings(viewModel);

    });

</script>