我有一个VIEW,它将ViewData中的数据呈现如表所示。
正如您所看到的,每行都有一个按钮。
我想在点击时将Row数据发送到控制器以获得相应的按钮。
我如何实现这一目标?
请帮助您实施此建议和最佳方法。
我尝试使用knockout来绑定这些数据并将其发布到控制器,因为我在此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>
}
答案 0 :(得分:0)
尝试这样做
<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>
答案 1 :(得分:0)
我个人首先在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>