pavilion pavilion - 3 months ago 12
jQuery Question

asp.net mvc changing buttons to text

I'm doing this for a test purpose for now and what I am doing here is that for each row in the column, I have two buttons (Accept and Decline). When I select Accept button, I want those two buttons in the column removed and replaced it with a text label 'Accepted'. If I select Decline button, I want Accept and Decline buttons in the column removed and replaced it with a text label 'Declined'. I am also thinking if I select accept button, I want the background of that row to be green and same thing for decline button with red background.

Another important part is that, I want to store this table so when I come back to this page again I can see what I did before. So I created a column 'Choice' in my database table (test) to store the information on that page. But honestly don't know how to do it properly. So here's what I've done so far. Any help is appreciated.

View:

<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;
}


Controller:

public ActionResult test(int id, string choice)
{
...code
return RedirectToAction("Index");
}

Answer

sorry for the delay. I got it partly working using MVC5, EF6 Code First, Visual Studio 2015 community as that whats I'm using at the moment.

I used a nullable bool in the Model for the Accepted property:

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; }
    }
}

View Code:

@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>

EDIT - GitHub Link with working solution here: just browse to MyModels controller (localhost:xxxx/MyModels in browser).

I managed to get buttons/links working using 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;
    });

But had to change link/buttons to:

@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" })

Not very elegant, but it is working - let me know if you find better way of doing it :)

Comments