Как сделать флажок ASP. NET MVC в представлении, чтобы вызвать метод действия в контроллере? - PullRequest
Новая
       9

Как сделать флажок ASP. NET MVC в представлении, чтобы вызвать метод действия в контроллере?

0 голосов
/ 15 апреля 2020

Я ищу метод в моем контроллере, который будет запущен, когда пользователь нажимает на флажок в моем представлении.

Я посмотрел на аналогичный ответ на этот вопрос, однако ни одно из решений не сработало.

Моя разметка вида выглядит следующим образом: 

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(Model => Model.Answers)
        </th>
        <th>
            @Html.DisplayName("Number of Votes")
        </th>
        <th>
            @Html.DisplayName("Tick to Vote")
        </th>
    </tr>

    @foreach (var item in Model.Answers)
    {
        <tr>
            <td>
                @item.Answer
            </td>
            <td>
                @item.AnsCount
            </td>
            <td>
                <div class="checkbox">
                @Html.Hidden("myURL", Url.Action("AddVote", "PollModelsController"))
                <input type="checkbox" name="Vote" id="Vote" unchecked />
                </div>
            </td>
        </tr>
    }
</table>

<script>
    $(document).ready(function () {
        $('#Vote').change(function () {
            sendToController();
        });
    });

    function sendToController() {
        $.ajax({
            type: "POST",
            url: "myURL",
            data: ?,
            dataType: "bool",
            success: function (data) {
                alert(data);
            },
            error: function (data) {
                alert(data);
            }
        })
    };
</script>

Код моего контроллера выглядит следующим образом: 

public ActionResult AddVote(PollAnswersModel answer)
        {
            if (answer.Active.Equals("True"))
            {
                answer.Active = true;
                answer.AnsCount =+ 1;
            }
            return Redirect(Request.UrlReferrer.PathAndQuery);
        }

В контроллере я хочу добавить голосование в переменную AnsCount, когда пользователь нажимает на флажок. Затем она обновит страницу sh, чтобы показать новое количество голосов, которое будет иметь опция.

1 Ответ

0 голосов
/ 16 апреля 2020

Вы должны связать событие ': флажок' флажка в javascript с ajax вызовом действия вашего контроллера. Если вызов ajax выполнен успешно, вы затем используете js для перезагрузки страницы.

Если вы не хотите использовать js, тогда включите ваш флажок для ввода (type = submit) и встроить его в форму. Когда пользователь нажимает на ввод, форма будет добавлена ​​к выбранному действию, которое в свою очередь возвращает this.View («MyViewName»).

Edit

Вот пример использования JQuery, основанный на вашем редактировании:

HTML / JS: 

<div class="checkbox">
   @if(answer.HasVotes)
{
<input type="checkbox" name="Vote" id="Vote" checked data-id="@item.Id" />
}
else
{
<input type="checkbox" name="Vote" id="Vote" unchecked data-id="@item.Id" />
}   
</div>
<script>
   $(document).ready(function () {
   $('#Vote').change(function () {
        var $this = $(this);
        var answerId = $this.data('id');
        var url = null;
        if($this.is('checked')){
           url = `/UpVote?answerId=${answerId}`;
        }
        else{
           url = `/DownVote?answerId=${answerId}`;
        }
        $.ajax({
        type: 'POST',
        url: url ,
        success: function (data) {
            location.reload();
        },
        error: function (data) {
            alert(data);
        }
    })
   });
});
</script>

Контроллер: 

public IActionResult Index()
{
     return this.View(new AnswerViewModel(this.AnswerRepository.GetAll()));
}

[HttpPost]
public IActionResult UpVote(Guid answerId)
{
     //Retrieve the answer that has been voted for
     Answer answer = this.AnswerRepository.FindById(answerId);
     //Add the vote
     answer.UpVote();
     //Save changes
     this.AnswerRepository.SaveChanges();
     // Return 200 OK
     return this.Ok();
}

[HttpPost]
public IActionResult DownVote(Guid answerId)
{
     //Retrieve the answer that has been voted for
     Answer answer = this.AnswerRepository.FindById(answerId);
     //Add the vote
     answer.DownVote();
     //Save changes
     this.AnswerRepository.SaveChanges();
     // Return 200 OK
     return this.Ok();
}

Что произойдет, что после нажатия кнопки-флажка для действия UpVote / DownVote будет сделан вызов Ajax, передав ему аргументы, необходимые для получения ответа и его подтверждения (в данном случае я передал идентификатор ответа, сохраненный в атрибут html). Если действие выполнено успешно, он вернет 200 OK, что, в свою очередь, заставит JS выполнить функцию успеха. Последний перезагружает страницу, и ваша страница повторно отображается с обновленными ответами, показывая конечному пользователю ответы, за которые проголосовали.

...