come implementare un modulo html all’interno di un asp.net pagina web – due moduli in questione asp.net

vedere questo codice html :

<!--   PAGE - 5  -->
                <div class="section cc_content_5" id="page5" style="display: none;">
                    <div class="pad_content">
                        <div class="right grid_1">
                            <h1>
                                Contact Address
                            </h1>
                            <img src="Images/photo_5.jpg" alt=""><br />
                            <br />
                            <strong>The Companyname Inc</strong> 8901 Marmora Road,<br />
                            Glasgow, D04 89GR.<br />
                            Telephone: +1 800 123 1234<br />
                            Fax: +1 800 123 1234<br />
                            E-mail: <a href="mailto:#">www.copanyname.com</a><br />
                        </div>
                        <div class="left grid_2">
                            <h1>
                                Contact Form
                            </h1>
                            <div id="note">
                            </div>
                            <div id="fields">
                                <form id="ajax-contact-form" action="javascript:alert('success!');">
                                <label>
                                    Name:</label><input class="textbox" name="name" value="" type="text">
                                <label>
                                    E-Mail:</label><input class="textbox" name="email" value="" type="text">
                                <label>
                                    Subject:</label><input class="textbox" name="subject" value="" type="text">
                                <label>
                                    Comments:</label><textarea class="textbox" name="message" rows="5" cols="25"></textarea>
                                <label>
                                    Captcha</label><img src="Images/captcha.php" style="margin: 3px 0px; width: 200px;
                                        height: 32px;">
                                <div class=" clear">
                                </div>
                                <label>
                                    &nbsp;</label><input class="textbox" name="capthca" value="" type="text">
                                <div class=" clear">
                                </div>
                                <label>
                                    &nbsp;</label><input class="pin" name="submit" value="Submit" type="submit">
                                </form>
                                <div class="clear">
                                </div>
                            </div>
                        </div>
                        <div class="clear">
                        </div>
                    </div>
                </div>

e i loro script :

<script type="text/javascript">
    $(document).ready(function () {
        $("#ajax-contact-form").submit(function () {
            var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact.php", data: str, success: function (msg) {
                if (msg == 'OK') //Message Sent? Show the 'Thank You' message and hide the form
                { result = '<div class="notification_ok">Your message has been sent. Thank you!<br /> <a href="#" onclick="freset();return false;">send another mail</a></div>'; $("#fields").hide(); } else
                { result = msg; } $("#note").html(result);
            }
            }); return false;
        });
    });
    function freset()
    { $("#note").html(''); document.getElementById('ajax-contact-form').reset(); $("#fields").show(); }
</script>

voglio davvero sapere come posso mettere nella mia pagina 5 asp.net modulo web?
come si può non avere un modulo all’interno di default asp.net pagina web del modulo.
così che cosa posso fare per pagina 5?

grazie in anticipo

  • la via più semplice da utilizzare è di provare a utilizzare webmethod e ottenere il valore da codebehind e interagire con il database per inviare i dati.

 

2 Replies
  1. 7

    Non si può avere due forme all’interno di un asp.net pagina e sia il lavoro sul codice dietro.

    Le alternative che si hanno.

    1. Luogo la seconda forma prima o dopo il asp.net forma
    2. Non impostare il secondo modulo, basta leggere i dati di input che è interessante in codice dietro.
    3. Creare dinamicamente il modulo alla fine della pagina utilizzando il javascript e post-it.

    Perché qui vedo che anche a te post di php e penso che si desidera mantenere il vecchio codice con asp.net, add them after the closing form of the asp.net form.

    <form id="AspForm" runat="server">
    ...
    </form>
    <form id="ajax-contact-form"  method="post" action="contact.php" >
    ...
    </form>

    Più Estreme

    Perché è tutto pronto uso di javascript è possibile fare questo trucco. Copia e incolla tutto il contenuto in una forma alla fine della pagina e post-it.

        <form id="AspForm" runat="server">
        ...
          <div id="ajax-contact-infos" >
           <label>
              Name:</label><input class="textbox" name="name" value="" type="text">
           <label>
           <input class="pin" name="submit" value="Submit" 
             type="button" onclick="SubmitThisForm();return false;" >
            ...
          </div>
        </form>
        <form id="ajax-contact-form"  method="post" action="contact.php" >
           <div id="PlaceOnMe" ></div>
        </form>

    e javascript copia appena prima di postare come

    <script type="text/javascript">
        function SubmitThisForm()
        {
                //here I copy (doublicate) the content of the data that I like to post
                // in the form at the end of the page and outside the asp.net
            jQuery("#PlaceOnMe").html(jQuery("#ajax-contact-infos"));
                //Now we submit it as its your old code, with out change anything
            jQuery("#ajax-contact-form").submit();
        }
    
        //here is the old code.
        $(document).ready(function () {
            $("#ajax-contact-form").submit(function () {
                var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact.php", data: str, success: function (msg) {
                    if (msg == 'OK') //Message Sent? Show the 'Thank You' message and hide the form
                    { result = '<div class="notification_ok">Your message has been sent. Thank you!<br /> <a href="#" onclick="freset();return false;">send another mail</a></div>'; $("#fields").hide(); } else
                    { result = msg; } $("#note").html(result);
                }
                }); return false;
            });
        });
        function freset()
        { $("#note").html(''); document.getElementById('ajax-contact-form').reset(); $("#fields").show(); }
    </script>

    Tutto questo con il minimo di modifiche. È possibile come mai l’ottimizzazione, ma questa è l’idea generale.

    • grazie per la risposta, quando devo aggiungere il secondo modulo, dopo asp.net forma in modo dinamico?
    • +1 per una buona soluzione, l’unica volta che si tratta di un dolore è quando si desidera che il modulo per essere in un posto preciso sulla asp.net pagina.
    • Beh, si può usare il javascript per spostarlo appena prima che il post. Tutto ciò che è lavoro in giro per il post a php.
    • così funziona quando ho messo questo jquery “jQuery(“#PlaceOnMe”).html(jQuery(“#ajax-contatti-info”));” sull’evento click del pulsante di invio?
    • Devo aggiornare nuovamente la risposta. Vedere il nuovo aggiornamento. Spero che questo lavoro con un minimo di errori perchè non posso testarlo.
    • penso che funziona come un fascino / grazie uomo…
    • Cool 🙂 ! Ho fatto qualcosa di simile per gli altri casi (per spostare il contenuto della pagina)

  2. 2

    Si dispone di un numero di opzioni; la nidificazione forme, il peggio è qualcosa che/non funzionerà a seconda del browser.

    Si può, come @Aristos ha detto, hanno una forma dopo l’altro. Questa è una buona soluzione, ma non è necessariamente la migliore in termini di design del tuo sito.

    La seconda è che si potrebbe incorporare il modulo di contatto su una normale pagina HTML, quindi di includere il tuo genitore pagina in un iframe o simili. Questo permetterebbe di aggirare i problemi di form annidati, ma potrebbe non darvi il comportamento che si desidera in termini di esperienza utente.

    La terza è che il tuo modulo di contatto potrebbe essere più adatto ad essere un Controllo Utente

    Si dovrebbe mettere tutti i tuoi modulo di contatto dei campi nel file ascx e gestire il clic del pulsante per l’invio di questo comando. Dopo l’elaborazione di questo presentare, è possibile sostituire il controllo utente con un semplice messaggio per ringraziare l’utente per il loro contributo.

    Si può anche mettere tutte le richieste di convalida del modulo in questo. Il ASCX potrebbe essere qualcosa del genere:

    <asp:Panel runat="server" id="ContactPanel">
    <div class="left grid_2">
            <h1>
                Contact Form
            </h1>
            <div id="note">
            </div>
            <div id="fields">
                <label for="<%=InputContactName.ClientID%>">Name:</label>
                <asp:TextBox runat="server" id="InputContactName" value="" />
                <!-- Rest of Form goes here -->
                <div class=" clear">
                </div>
                <asp:Button runat="server" id="ContactFormSubmit" OnClick="ContactFormSubmit_Click" Text="Send Feedback" />
                <label>&nbsp;</label><input class="pin" name="submit" value="Submit" type="submit">
                <div class="clear"></div>
            </div>
        </div>
    </div>
    </asp:Panel>
    <asp:Panel runat="server" id="ThanksPanel" Visible="false">
        <p>Thank you for your feedback. We'll try not to ignore it. But it is Friday. So we might. At least until Monday.</p>
    </asp:Panel>

    Nel ContactFormSubmit_Click pulsante, si può semplicemente prendere il testo dal tuo modulo di contatto, nascondere la ContactPanel, e mostra il ThanksPanel.

    Davvero semplice, e incapsulato via in un controllo utente.

    • bello un altro modo / mi sto godendo…

Lascia un commento