[ How to change priority of elements using javascript in ASP.NET MVC? ]

I have to make in my application function for changes the priority of deputy for each consultant. This is what I have already:

View:

@model ML.Domain.DAL.DB_CONSULTANTS
....
<table>
    <tr>
        <th>ID deputy</th>
        <th>Priority</th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    @foreach (var item in Model.DB_CONSULTANT_DEPUTY.OrderBy(x => x.PRIORITY))
    {
        <tr>
            <td>@item.DEPUTY_ID</td>
            <td>@item.PRIORITY</td>
            <td><button class="btn btn-default up" data-consultant-id="@item.CONSULTANT_ID" data-deputy-id="@item.DEPUTY_ID" data-priority="@item.PRIORITY">UP</button></td>
            <td><button class="btn btn-default down" data-consultant-id="@item.CONSULTANT_ID" data-deputy-id="@item.DEPUTY_ID" data-priority="@item.PRIORITY">DOWN</button></td>
            <td><button class="btn btn-default delete" data-consultant-id="@item.CONSULTANT_ID" data-deputy-id="@item.DEPUTY_ID" data-priority="@item.PRIORITY">Remove</button></td>
        </tr>
    }
</table>

Script (atm. only for removing deputy):

<script>
    var url = '@Url.Action("RemoveDeputy", "Consultant")';
    $('.delete').click(function () {
        var container = $(this).closest('tr');
        var data = { consultant_Id: $(this).data('consultant-id'), deputy_Id: $(this).data('deputy-id'), priority: $(this).data('priority') };
        $.post(url, data, function (response) {
            if (response)
            {
                // fadeout, then remove
                container.fadeOut(800, function () {
                    $(this).remove();
                });
            } else
            {
                alert("Error!");
            }
        }).fail(function () {
            alert("Error!");
        });
    });
</script>

Backend:

[HttpPost]
public JsonResult RemoveDeputy(DB_CONSULTANT_DEPUTY model)
{
    consultantRepository.RemoveDeputy(model);
    return Json(true);
}

And I should add to this script simillary function, if user will click button UP or DOWN then same data as for DELETE will send to backend and there I will change Priority for example in this way:

[HttpPost]
public JsonResult ChangePriorityToUp(DB_CONSULTANT_DEPUTY model)
{
    var deputyForChangePriority = db.DB_CONSULTANT_DEPUTY.Find(model.DEPUTY_ID);
    deputyForChangePriority.PRIORITY -= 1;

    if (db.DB_CONSULTANT_DEPUTY.Any(x => x.PRIORITY == deputyForChangePriority.PRIORITY + 1)) // +1 because I decrease before
    {
        var deputyToRefresh = db.DB_CONSULTANT_DEPUTY.First(x => x.PRIORITY == deputyForChangePriority.PRIORITY + 1);
        deputyToRefresh.PRIORITY -= 1;
    }
    db.SaveChanges();
    return Json(true);
}

And of course I have to refresh this table at view :) As you see, I have a problem with make javascript function to do this. I think the rest is enough good.

Answer 1

First change the POST method so that you can use it for changing the PRIORITY either up or down.

[HttpPost]
public JsonResult UpdatePriority(int deputyId, int priority)
{
    var model = db.DB_CONSULTANT_DEPUTY.Find(deputyID);
    if (model != null)
    {
        model.PRIORITY = priority;
        db.SaveChanges();
        return Json(true);
    }
    return Json(null);
}

Then change the html to

@foreach (var item in Model.DB_CONSULTANT_DEPUTY.OrderBy(x => x.PRIORITY))
{
    <tr data-consultant-id="@item.CONSULTANT_ID" data-deputy-id="@item.DEPUTY_ID" data-priority="@item.PRIORITY">
        <td>@item.DEPUTY_ID</td>
        <td>@item.PRIORITY</td>
        <td><button class="btn btn-default up">UP</button></td>
        <td><button class="btn btn-default down">DOWN</button></td>
        <td><button class="btn btn-default delete">Remove</button></td>
    </tr>
}

Then the script will be

var priorityUrl = '@Url.Action("UpdatePriority", "Consultant")';
$('.up, .down').click(function() {
    var row = $(this).closest('tr');
    var deputyId: row.data('deputy-id')
    var priority = row.data('priority')
    if($(this).hasClass('up')) {
        priority++;
    } else {
        priority--;
    }
    $.post(url, { deputyId: deputyId, priority: priority }, function(response) {
        if(response) {
            row.children('td').eq(1).text(priority);
            row.data('priority', priority);
        } else {
            // Oops
        }
    }).fail(function () {
        // Oops
    });
});