Update page(View) automatically in Asp.Net MVC

Asked

Viewed 2,052 times

4

Guys, in my application that manages Courses, i have a sign-up screen, where the student clicks on the button "enrollment" and enrolls in the course, and the amount of vacancies field is decreasing. The problem is that my View does not update after the student clicks the button "enrollment". I have to press the update button browser so that the View be updated. How do I make this View is automatically updated after clicking the button "enrollment"?.

My View

@model IEnumerable<MeuProjeto.Models.Curso>

<h2>Catálago de Cursos</h2>

@Html.ValidationSummary(true)
@TempData["MensagemErro"]

<table class="table table-hover">
    <tr>
        <th>
            Curso
        </th>
        <th>
            Sigla
        </th>
        <th>
            Ementa
        </th>
        <th>
            Inicio
        </th>
        <th>
            Fim
        </th>
        <th>
            Turno
        </th>
        <th>
            Status
        </th>
        <th>
            Quantidade de Vagas
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
           <td>
                @Html.DisplayFor(modelItem => item.Nome_Curso)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Sigla)
            </td>
            <td>
                <a href="@Url.Action("Ementa", "Curso")" data_toggle="modal" data_target="#modalaviso">Ementa</a>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Dt_Inicio)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Dt_Fim)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Turno)
            </td>
            <td>
                <input type="text" name="Status" id="Status" value="@Html.DisplayFor(modelItem => item.Status)" readonly class="Status" />
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Qtd_Vagas)
            </td>
            <td>
                <div class="btn-group">
                    <div class="col-md-offset-2 col-md-10">
                        @if (item.Qtd_Vagas > 0)
                        {
                       <input type="submit" value="Inscrição" name="detalhes" class="inscricao btn btn-success" data_toggle="modal" data_target="#modalAviso" data-inscricaoid="@item.Id"/>
                        }
                        else
                        {
                            <input type="submit" value="Não há vagas" name="detalhes" class="inscricao btn btn-default" disabled="disabled"/>
                        }
                    </div>
                </div>
            </td>
        </tr>

    }

</table>
<div class="form-group">

    <a href="@Url.Action("Index", "Home")"><input type="button" value="Voltar" class="btn btn-danger" /></a>

</div>
<br />


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script>
        $(document).ready(function() {
            $(".inscricao").click(function() {
                $.ajax({
                    type: "POST",
                    url: "Inscricao/",
                    data: {inscricaoId: $(this).data("inscricaoid")},
                    success: function() {
                            $(this).attr("disabled", "disabled");
                        }
                });
            });
        });
    </script>
}
javascript c# asp.net-mvc asp.net-mvc-5

  • Have you debugged your jquery function? It seems that Document.ready is not acting for the second time. Debug what happens when you click the button and post here to better help. I say this because I’ve had similar problems with Document.ready and I was able to solve it.I’m not claiming to be this, so posting the debug result is very important to the site’s staff.

2 answers

1

hello,

You can return a Json by stating the amount of vacancies for your View. Following example :

http://www.guj.com.br/27920-como-obter-objeto-json-de-retorno-da-requisicao-ajax-jquery-aspnet-mvc-

HTML :

@model IEnumerable<MeuProjeto.Models.Curso>


<h2>Catálago de Cursos</h2>

@Html.ValidationSummary(true)
@TempData["MensagemErro"]

<table class="table table-hover">
    <tr>
        <th>
            Curso
        </th>
        <th>
            Sigla
        </th>
        <th>
            Ementa
        </th>
        <th>
            Inicio
        </th>
        <th>
            Fim
        </th>
        <th>
            Turno
        </th>
        <th>
            Status
        </th>
        <th>
            Quantidade de Vagas
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
           <td>
                @Html.DisplayFor(modelItem => item.Nome_Curso)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Sigla)
            </td>
            <td>
                <a href="@Url.Action("Ementa", "Curso")" data_toggle="modal" data_target="#modalaviso">Ementa</a>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Dt_Inicio)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Dt_Fim)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Turno)
            </td>
            <td>
                <input type="text" name="Status" id="Status" value="@Html.DisplayFor(modelItem => item.Status)" readonly class="Status" />
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Qtd_Vagas, new { id = "qtdVagas" + "@item.Id" })
            </td>
            <td>
                <div class="btn-group">
                    <div class="col-md-offset-2 col-md-10">
                        @if (item.Qtd_Vagas > 0)
                        {
                       <input type="submit" value="Inscrição" name="detalhes" class="inscricao btn btn-success" data_toggle="modal" data_target="#modalAviso" data-inscricaoid="@item.Id"/>
                        }
                        else
                        {
                            <input type="submit" value="Não há vagas" name="detalhes" class="inscricao btn btn-default" disabled="disabled"/>
                        }
                    </div>
                </div>
            </td>
        </tr>

    }

</table>
<div class="form-group">

    <a href="@Url.Action("Index", "Home")"><input type="button" value="Voltar" class="btn btn-danger" /></a>

</div>
<br />

Javascript:

<script>
        $(document).ready(function() {
            $(".inscricao").click(function() {

                var id = $(this).data("inscricaoid");

                $.ajax({
                    type: "POST",
                    url: "Inscricao/",
                    data: {inscricaoId: id},
                    success: function() {
                            $(this).attr("disabled", "disabled");
                        },
                    done: function(data){
                         $("#qtdVagas" + id).text(data.qtd)
                    }
                });
            });
        });
    </script>

Action MVC:

public ActionResult Inscricao(int id)
    {
        int quantidadeVagas;
        //Seu código
        ....        

        //Pega a quantidade de vagas
        quantidadeVagas = new SeuRepositorio().GetQuantidadeVagas(id)

        //Retorno
        return Json(quantidadeVagas);
    }

  • You will only have to perform an extra treatment if you have no more vacancies. @if (item.Qtd_vacancies > 0). Just add a "Hide" to this part.

  • I already have a treatment of the amount of vacancies @luã, just need the page update automatically by clicking the "registration".

  • The solution I gave you is to update the amount of vacancies, in case your action just return a json and in your ajax update the amount. Something was missing ?

  • It didn’t work @Luã, I still have to press F5 to refresh the page.

  • Did no java script error occur? Because with these changes the number of vacancies has to be updated in the done method. done: Function(data){ $("#qtdVagas" + id). text(date.Qtd) }

-3

One solution is to reload the page with Javascript

document.location.reload(true);

Browser other questions tagged javascript c# asp.net-mvc asp.net-mvc-5

You are not signed in. Login or sign up in order to post.