I forum Ricerca FAQ
Fai una domanda
Ultimo messaggio
lucano78
lucano78
il 6 febbraio 2017 alle 11:33
10 messaggi dal 04 gennaio 2012
Buongiorno ragazzi,
come è possibile far si che da un action controller, si possa aprire un popUp modale JQuery?
In una webform normale, utilizzavo il comando ClientScript.RegisterStartupScript e richiamavo il javascript, ma in MVC non trovo il modo. Avete qualche suggerimento?
Grazie.
RispondiQuoting
BrightSoul
BrightSoul
il 7 febbraio 2017 alle 08:02
11.886 messaggi dal 09 febbraio 2002
Contributi
Ciao,
si realizza in tre passi:
  • nella tua view razor, metti il codice javascript che serve ad aprire la modale. Tipicamente si mette nella section "scripts", in modo che appaia in fondo al body, dopo l'inclusione di tutti gli altri file javascript necessari (come jquery e bootstrap). Ecco un esempio:
    @section Scripts{
<script>
//Qui codice per l'apertuta della modale
</script>
}
  • Ora, sappiamo che questo codice non dovrà apparire sempre (altrimenti la modale si presenterebbe in ogni caso), quindi avvolgi il contenuto dei tag <script></script> qui sopra con un @if(ViewBag.ShowModal){ ... }
  • Dall'action, valorizza ViewBag.ShowModal = true; quando vuoi che la modale appaia.


ciao,
Moreno
Modificato da BrightSoul il 07 febbraio 2017 08.03 -
Enjoy learning and just keep making
RispondiQuoting
sax92
sax92
il 7 febbraio 2017 alle 21:56
15 messaggi dal 18 gennaio 2017
Giusti ieri ho dovuto affrontare lo stesso problema senza arrivare a una soluzione, nel senso, click un bottone che mi deve si aprire la modal ma anche richiamare un action che mi ritorna dei dati, cone fa l action a tornare dati alla modal. Mi sfugge la logica.
RispondiQuoting
BrightSoul
BrightSoul
l'8 febbraio 2017 alle 07:55
11.886 messaggi dal 09 febbraio 2002
Contributi
Ciao,
in quel caso, gestisci l'evento click del bottone usando una funzione javascript. Ad esempio, usando jQuery, gestisco il click di un bottone che ha id "bottone":
$("#bottone").on("click", function() {
  //qui codice javascript
});


All'interno della funzione javascript farai due cose:
  • Aprire la modale;
  • Inviare una richiesta Ajax al server per farti restituire i dati. Quando i dati tornano, li mostri nella modale che era già stata aperta.


Nel breve frangente in cui la modale è aperta e la richiesta Ajax è ancora in corso, mostra un'icona di caricamento all'interno della modale, che subito dopo verrà rimpiazzata dai dati ottenuti con la richiesta.

ciao,
Moreno
Enjoy learning and just keep making
RispondiQuoting
sax92
sax92
l'8 febbraio 2017 alle 09:41
15 messaggi dal 18 gennaio 2017
Scusa ma sono agli inizi e mi è ancora poco chiaro.

Ho una tabella con delle info, su ogni riga c'è un edit
<td><button id="editUser" class="btn btn-warning" value="Modifica" data-toggle="modal" data-target="#myModal" title="Modifica"> <span class="glyphicon glyphicon-edit"></span></button></td>

Il click di questo pulsante dovrebbe richiamara la modal e riempire i campi con i dati di quella persona, in questo caso solo campo email ad esempio.

Poi ho la funzione del click che non so bene come va scritta

@section Scripts{
    <script>
        //funzione click edit user
        
       $("#editUser").on("click", function () {
            var emailVal = $('#emailVal').val();
            $.ajax({
                url: '/GestioneUtenti/GestioneUtenti',
                contentType: 'application/html; charset=utf-8',
                data: { email: idVal },
                type: 'GET',
                dataType: 'html'

            })
       .success(function (result) {
           $('#products').html(result);
           $('#')
       })
       .error(function (xhr, status) {
           alert(status);
       })
        });
    </script>
}


#emailval è il th della tabella con la mail

La modal è scritta cosi:



<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                @using (Html.BeginForm())
                {
                    <div>@Html.LabelFor(m => m.Email)</div>

                    @Html.HiddenFor(model => model.Email);

                    <div>
                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control ", @required = "required", })
                      
                    </div>
                    <br />
                }
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>


e infine il controller:



 public ActionResult GestioneUtenti()
        {
            var model = new VW_UtenteViewModel();

            using (DBDocShareEntities1 db = new DBDocShareEntities1())
            {
                model.listaUtenti = db.VW_Utente.ToList();
            }
            return View(model);
        }


Mi saresti di grande aiuto, grazie in anticipo
RispondiQuoting
sax92
sax92
l'8 febbraio 2017 alle 09:42
15 messaggi dal 18 gennaio 2017
scusa ho sbagliato non posso chiamare quell action dovrei chiamarne un altra che mi torna un unico oggetto utente e non la lista di utenti.
RispondiQuoting
BrightSoul
BrightSoul
il 9 febbraio 2017 alle 23:23
11.886 messaggi dal 09 febbraio 2002
Contributi
Ciao,


Ho una tabella con delle info, su ogni riga c'è un edit

Ok, allora c'è un problema: i bottoni non possono avere tutti lo stesso id "editUser". In HTML non puoi avere due o più elementi che portano lo stesso id. Dovresti usare l'attributo class, che invece ammette duplicati.

Ad esempio:
<td><button class="btn btn-warning edituser" value="Modifica" data-toggle="modal" data-target="#myModal" title="Modifica"> <span class="glyphicon glyphicon-edit"></span></button></td>


E poi gestisci gli eventi click di quei bottoni usando l'apposito selettore ".edituser", anziché "#editUser"

$(".edituser").on("click", function () {
 //Ottengo il riferimento al bottone cliccato
 var bottone = this;
 ...
});


L'altro problema riguarda questa riga di codice:
var emailVal = $('#emailVal').val();

Anche qui, se ci sono molteplici elementi con id "emailVal", non è dato sapere quale ti verrà restituito. Dovresti fare in modo che il valore dell'email sia scritto sul bottone stesso che è stato cliccato, così che sia facile recuperarlo. Puoi usare un data- attribute per questo. Ecco un esempio:
https://jsfiddle.net/wj1hnfo9/

ciao,
Moreno
Enjoy learning and just keep making
RispondiQuoting

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.