DiPix DiPix - 5 months ago 20
Ajax Question

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

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