我现在正在为测试目的这样做,我在这里做的是,对于列中的每一行,我有两个按钮(接受和拒绝)。当我选择“接受”按钮时,我希望删除列中的这两个按钮,并将其替换为文本标签'接受'。如果我选择“拒绝”按钮,我希望删除列中的“接受”和“拒绝”按钮,并将其替换为文本标签'拒绝'。我也在想,如果我选择接受按钮,我希望该行的背景为绿色,同样的东西为红色背景的拒绝按钮。
另一个重要的部分是,我想存储这个表,所以当我再次回到这个页面时,我可以看到我之前做过的事情。所以我创建了一个专栏' Choice'在我的数据库表(测试)中存储该页面上的信息。但老实说,不知道如何正确地做到这一点。所以这就是我迄今所做的。任何帮助表示赞赏。
查看:
<table class="table">
<tr>
<th>
@Html.DisplayName("Choice")
</th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.ActionLink("Accept", "test", "test",
new
{
id = item.testId,
choice = "accept"
},
new
{
@class = "btn btn-success btn-xs"
})
@Html.ActionLink("Decline", "test", "test",
new
{
id = item.testId,
choice = "decline"
},
new
{
@class = "btn btn-danger btn-xs"
})
</td>
</tr>
}
</table>
<script>
$('td > a').on('click', function () {
$(this).closest('tr').addClass('selected');
});
</script>
的CSS:
.selected {
background-color:red;
}
控制器:
public ActionResult test(int id, string choice)
{
...code
return RedirectToAction("Index");
}
答案 0 :(得分:1)
我在Model for Accepted属性中使用了一个可以为空的bool:
namespace SODemo1.Models
{
public class MyModel
{
public int Id { get; set; }
public string Text { get; set; }
public string Description { get; set; }
public bool? Accepted { get; set; }
}
}
查看代码:
@model IEnumerable<SODemo1.Models.MyModel>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table" id="MyTable">
<tr>
<th>
@Html.DisplayNameFor(model => model.Text)
</th>
<th>
@Html.DisplayNameFor(model => model.Accepted)
</th>
<th>
@Html.DisplayNameFor(model => model.Description)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Text)
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td class="Accepted">
@{
if (item.Accepted == null)
{
@Html.ActionLink("Accept", "Edit", "MyModels", new { id = item.Id},
new { @class = "btn btn-success btn-xs" })
@Html.ActionLink("Decline", "Edit", "MyModels", new { id = item.Id},
new { @class = "btn btn-danger btn-xs" })
}
else if (item.Accepted == true)
{
<span>Accepted</span>
}
else if (item.Accepted == false)
{
<span>Declined</span>
}
}
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
@Html.ActionLink("Details", "Details", new { id=item.Id }) |
@Html.ActionLink("Delete", "Delete", new { id=item.Id })
</td>
</tr>
}
</table>
<script type="text/javascript">
$(document).ready(function () {
$('#MyTable td span').each(function () {
if ($(this).text() === 'Declined') {
$(this).closest('tr').css('background-color', 'red');
}
if ($(this).text() === 'Accepted') {
$(this).closest('tr').css('background-color', 'green');
}
});
});
</script>
编辑 - GitHub与工作解决方案here的链接:只需浏览到MyModels
控制器(浏览器中为localhost:xxxx/MyModels
)。
我设法使用jQuery获取按钮/链接:
$('#MyTable td.accepted a').click(function() {
var model = @Html.Raw(Json.Encode(Model));
$.ajax({
url: this.href,
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(model),
success: function(result) {
window.location.reload(true);
}
});
return false;
});
但必须将链接/按钮更改为:
@Html.ActionLink("Accept", "Edit", "MyModels", new { id = item.Id, Accepted = true, Text = item.Text, Description = item.Description },
new { @class = "btn btn-success btn-xs" })
@Html.ActionLink("Decline", "Edit", "MyModels", new { id = item.Id, Accepted = false, Text = item.Text, Description = item.Description },
new { @class = "btn btn-danger btn-xs" })
不是很优雅,但它有效 - 请告诉我你是否找到了更好的方法:)