如何在ASP.NET MVC中使用JavaScript更改元素的优先级?

问题描述

我必须在我的应用程序功能中更改每位顾问的代理人优先级.这是我已经拥有的:

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

查看:

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

后端:

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

我应该添加此脚本类似功能，如果用户单击 UP 或 DOWN 按钮，则将发送与 DELETE 相同的数据到后端，然后我将以这种方式更改优先级":

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

当然，我必须在视图中刷新此表:)如您所见，make javascript函数在执行此操作时遇到问题.我认为剩下的就足够了.

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.

推荐答案

首先更改POST方法，以便您可以使用它来向上或向下更改 PRIORITY .

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

然后将html更改为

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

然后脚本将是

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

这篇关于如何在ASP.NET MVC中使用JavaScript更改元素的优先级?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！