asp.net mvc将按钮更改为文本

时间:2016-09-02 08:12:25

标签: jquery asp.net-mvc

我现在正在为测试目的这样做,我在这里做的是,对于列中的每一行,我有两个按钮(接受和拒绝)。当我选择“接受”按钮时,我希望删除列中的这两个按钮,并将其替换为文本标签'接受'。如果我选择“拒绝”按钮,我希望删除列中的“接受”和“拒绝”按钮,并将其替换为文本标签'拒绝'。我也在想,如果我选择接受按钮,我希望该行的背景为绿色,同样的东西为红色背景的拒绝按钮。

另一个重要的部分是,我想存储这个表,所以当我再次回到这个页面时,我可以看到我之前做过的事情。所以我创建了一个专栏' 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");
    }

1 个答案:

答案 0 :(得分:1)

抱歉抱歉。我使用MVC5,EF6 Code First,Visual Studio 2015社区部分工作,因为我现在正在使用它。

我在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" })

不是很优雅,但它有效 - 请告诉我你是否找到了更好的方法:)