将 html jquery 联系表单转换为 asp.net答案

【问题标题】：convert html jquery contact form to asp.net将 html jquery 联系表单转换为 asp.net
【发布时间】：2020-03-08 16:17:19
【问题描述】：

我在 html5 中使用 bootstrap 和 jquery 创建了一个联系表单。此表单具有隐藏的字段，仅当用户选择单选按钮时才会显示。我进行了验证以及表单不需要填写隐藏字段并且正在查找的所有内容。当我需要在表单中添加 php 以便能够发送电子邮件并将它们发送到我的电子邮件时，我被告知我们所在的服务器不支持 PHP，我基本上被告知要转换它全部到 C# (asp.net) 并使所有输入动态而不是静态。

我知道一些基本的 asp.net，比如如何创建动态输入，但我不知道如何将我所做的转换为 asp.net 并保持我在 html5 和 jquery 中构建它的方式。

请帮我看看我应该如何处理这个问题。

(function () {
    'use strict';
    window.addEventListener('load', function () {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function (form) {
            form.addEventListener("submit", function (event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);

})();

$(document).ready(function () {


    $("#firstOption").hide().find(':input').attr('required', false);
    $("#secOption").hide().find(':input').attr('required', false);
    $("#thirdOption").hide().find(':input').attr('required', false);

    $("#sign1").click(function () {
        $("#firstOption").show().find(':input').attr('required', true);
        $("input.notaMust").show().attr('required', false);
        $("#secOption").hide();
        $("#thirdOption").hide();
    });
    $("#sign2").click(function () {
        $("#firstOption").hide();
        $("#secOption").show().find(':input').attr('required', true);
        $("input.notaMust").show().attr('required', false);
        $("#thirdOption").hide();
    });
    $("#sign3").click(function () {
        $("#firstOption").hide();
        $("#secOption").hide();
        $("#thirdOption").show().find(':input').attr('required', true);
    });
    $("#sign4").click(function () {
        $("#firstOption").hide();
        $("#secOption").hide();
        $("#thirdOption").hide();
    });
});

body {
    direction: rtl;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<html lang="">

<head>
  <meta charset="utf-8" />
  <title></title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

  <!-- CSS -->
  <link href="bootstrap/css/bootstrap-reboot.css" rel="stylesheet" />
  <link href="bootstrap/css/bootstrap-grid.css" rel="stylesheet" />
  <link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
  <link href="styles/myStyle.css" rel="stylesheet" />


  <!-- Scripts -->
  <script src="jScripts/jquery-1.12.0.min.js"></script>
  <script src="bootstrap/js/bootstrap.js"></script>
  <script src="jscripts/JavaScript.js"></script>


</head>

<body>
  <main class="my-form">
    <div class="cotainer">
      <div class="row justify-content-center">
        <div class="col-md-8">
          <div class="card">
            <h1>
              הרשמות לעמותה
            </h1>
            <div class="card-body">
              <!--onsubmit="return validform()"-->
              <form name="my-form" class="needs-validation" novalidate method="post" role="form">
                <div class="form-group row">
                  <label for="first_name" class="col-md-4 col-form-label text-md-right">שם פרטי</label>
                  <div class="col-md-6">
                    <input type="text" id="first_name" class="form-control" name="first-name" placeholder="חובה" required>
                  </div>
                </div>
                <div class="form-group row">
                  <label for="last_name" class="col-md-4 col-form-label text-md-right">שם משפחה</label>
                  <div class="col-md-6">
                    <input type="text" id="last_name" class="form-control" name="last-name" placeholder="חובה" required>
                  </div>
                </div>
                <div class="form-group row">
                  <label for="phone_number" class="col-md-4 col-form-label text-md-right">טלפון נייד</label>
                  <div class="col-md-6">
                    <input type="tel" id="phone_number" class="form-control" name="phoneNum" placeholder="חובה" required>
                  </div>
                </div>
                <div class="form-group row">
                  <label for="email_address" class="col-md-4 col-form-label text-md-right">דוא"ל</label>
                  <div class="col-md-6">
                    <input type="email" id="email_address" class="form-control" placeholder="חובה" name="email-address" required>
                  </div>
                </div>
                <p>
                  הרשמה ל:
                </p>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" class="custom-control-input" id="sign1" name="signTo">
                  <label class="custom-control-label" for="sign1">
                                        הרשמה לעמותה
                                    </label>
                </div>

                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" class="custom-control-input" id="sign2" name="signTo">
                  <label class="custom-control-label" for="sign2">
                                        הרשמה לגמלאים
                                    </label>
                </div>

                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" class="custom-control-input" id="sign3" name="signTo">
                  <label class="custom-control-label" for="sign3">
                                        הרשמה לפעילויות העמותה
                                    </label>
                </div>

                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" class="custom-control-input" id="sign4" name="signTo" checked="checked">
                  <label class="custom-control-label" for="sign4">
                                        הרשמה לדיוור ישיר
                                    </label>
                </div>
                <section>
                  <!--הרשמה לעמותה-->
                  <article id="firstOption">
                    <h2>
                      הרשמה לעמותה
                    </h2>
                    <p>על מנת להירשם / להצטרף לעמותה עליך: <br /> 1. למלא את הפרטים בטופס המקוון ולשלוח ע"י לחיצת כפתור (שלח) <br /> 2. להוריד ולמלא את הטופס המצ"ב ולשלוח / לפקסס לגזברות בבית החולים בו הנך עובד/ת</p>
                    <a href="http://www.apni.co.il/download/297/">להורדת קובץ הרשמה לעמותה</a>
                    <p>
                      ** לאחר הצטרפותך לעמותה ייעשה שימוש בייפוי הכוח לצורך גביית דמי חבר שנתיים.
                    </p>
                    <h3>
                      טופס הצטרפות לעמותה
                    </h3>
                    <p>
                      מילוי הטופס ושליחתו מהווה הצהרה: <br />"אני מבקש להיות חבר בעמותה. מטרות העמותה ותקוננה ידועים לי במידה ואתקבל כחבר בעמותה הנני מתחייב לקיים את הוראות התקנון ואת החלטת האסיפה הכללית של העמותה".
                    </p>
                    <div class="form-group">
                      <label for="joinDate" class="col-3 col-form-label">
                                                תאריך הצטרפות לעמותה
                                            </label>
                      <br />
                      <div class="col-md-2">
                        <input class="form-control" type="date" value="2019-08-19" id="joinDate" required>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="id_number" class="col-3 col-form-label text-md-right">תעודת זהות</label>
                      <div class="col-md-3">
                        <input type="text" id="id_number" class="form-control" placeholder="חובה" required>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="year_number1" class="col-3 col-form-label text-md-right">שנת לידה</label>
                      <div class="col-md-3">
                        <input type="text" id="year_number1" class="form-control" placeholder="חובה" required>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="workplace" class="col-3 col-form-label text-md-right">
                                                מקום עבודה
                                            </label>
                      <div class="col-md-3">
                        <input type="text" id="workplace" class="form-control" placeholder="חובה" required>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="job_posit" class="col-3 col-form-label text-md-right">
                                                תפקיד
                                            </label>
                      <div class="col-md-3">
                        <input type="text" id="job_posit" class="form-control" placeholder="חובה" required>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="workplace_adr" class="col-3 col-form-label text-md-right">
                                                כתובת מגורים
                                            </label>
                      <div class="col-md-3">
                        <input type="text" id="workplace_adr" class="form-control" placeholder="חובה" required>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="mikud" class="col-3 col-form-label text-md-right">
                                                מיקוד
                                            </label>
                      <div class="col-md-3">
                        <input type="text" id="mikud" class="form-control notaMust">
                      </div>
                    </div>
                    <p>
                      קורס בבריאות הנפש:
                    </p>
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" class="custom-control-input" id="courseStatus" name="course">
                      <label class="custom-control-label" for="courseStatus">
                                                כן
                                            </label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" class="custom-control-input" id="courseStatus1" name="course" checked="checked">
                      <label class="custom-control-label" for="courseStatus1">
                                                לא
                                            </label>
                    </div>
                    <p>
                      תואר:
                    </p>
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" class="custom-control-input" id="degreeStatus" name="degree" checked="checked">
                      <label class="custom-control-label" for="degreeStatus">
                                                ראשון
                                            </label>
                    </div>

                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" class="custom-control-input" id="degreeStatus2" name="degree">
                      <label class="custom-control-label" for="degreeStatus2">
                                                שני
                                            </label>
                    </div>

                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" class="custom-control-input" id="degreeStatus3" name="degree">
                      <label class="custom-control-label" for="degreeStatus3">
                                                דוקטור
                                            </label>
                    </div>

                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" class="custom-control-input" id="degreeStatus4" name="degree">
                      <label class="custom-control-label" for="degreeStatus4">
                                                ללא
                                            </label>
                    </div>
                    <div class="form-group">
                      <label for="otherEdu" class="col-3 col-form-label text-md-right">
                                                השכלה אחרת
                                            </label>
                      <div class="col-md-3">
                        <input type="text" id="otherEdu" class="form-control notaMust" placeholder="">
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="mustAgree1" class="col-5 col-form-label text-md-right">
                                                יפוי כח בלתי חוזר: אני הח"מ בדירוג האחים מצהיר/ה שהנני חבר/ה בעמותה לסיעוד פסיכיאטרי. <br />על החתום:
                                            </label>
                      <div class="col-md-3">
                        <input type="text" id="mustAgree1" class="form-control" placeholder="חובה" required>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="mustAgree2" class="col-5 col-form-label text-md-right">
                                                בהתאם להסכם הקיבוצי אני, מבקש/ת לשלם לעמותה דמי החבר עבורי החל משנה זו ואילך. <br />על החתום:
                                            </label>
                      <div class="col-md-3">
                        <input type="text" id="mustAgree2" class="form-control" placeholder="חובה" required>
                      </div>
                    </div>

                  </article>
                  <!--הרשמה לגמלאים-->
                  <article id="secOption">
                    <h2>
                      הרשמה לגמלאים
                    </h2>
                    <p>על מנת להרשם / להצטרף לעמותה עליך למלא את הפרטים בטופס המקוון ולשלוח ע"י לחיצת כפתור (שליחה)</p>
                    <a href="http://www.apni.co.il/download/310/">להורדת טופס הרשמה לעמותה - גימלאים</a>
                    <p>ולשליחתו בדואר רגיל</p>
                    <strong>

                                            בהתאם להחלטת הנהלת העמותה תשלום דמי החבר לגמלאי יהיה 50% מהסכום המקובל.
                                            בנוסף, התשלום לגמלאי חבר עמותה עבור כנסים יהיה 50% מתעריף הכנס.

                                        </strong>

                    <p>
                      <br />
                      <b>
                                                את התשלום יש להעביר לכבוד:
                                            </b><br /> העמותה לסיעוד פסיכיאטרי בישראל מרכז לבריאות הנפש לב השרון פרדסיה ת.ד. 90000 נתניה 42100.
                    </p>
                    <div class="form-group">
                      <label for="dateSent" class="col-3 col-form-label">
                                                תאריך שליחת הטופס
                                            </label>
                      <br />
                      <div class="col-md-2">
                        <input class="form-control" type="date" value="2019-08-19" id="dateSent" required>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="id_number1" class="col-3 col-form-label text-md-right">תעודת זהות</label>
                      <div class="col-md-3">
                        <input type="text" id="id_number1" class="form-control" placeholder="חובה" required>
                      </div>
                    </div>
                    <p>
                      מין:
                    </p>
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" class="custom-control-input" id="male" name="gender">
                      <label class="custom-control-label" for="male">
                                                זכר
                                            </label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" class="custom-control-input" id="female" name="gender" checked="checked">
                      <label class="custom-control-label" for="female">
                                                נקבה
                                            </label>
                    </div>
                    <div class="form-group">
                      <label for="year_number" class="col-3 col-form-label text-md-right">שנת לידה</label>
                      <div class="col-md-3">
                        <input type="text" id="year_number" class="form-control" placeholder="חובה" required>
                      </div>
                    </div>

                    <div class="form-group">
                      <label for="home_adr" class="col-3 col-form-label text-md-right">
                                                כתובת מגורים
                                            </label>
                      <div class="col-md-3">
                        <input type="text" id="home_adr" class="form-control" placeholder="חובה" required>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="mikud1" class="col-3 col-form-label text-md-right">
                                                מיקוד
                                            </label>
                      <div class="col-md-3">
                        <input type="text" id="mikud1" class="form-control notaMust">
                      </div>
                    </div>
                  </article>
                  <!--הרשמה לפעילויות-->
                  <article id="thirdOption">
                    <h2>הרשמה לפעילויות העמותה<br /> (כנסים, ימי עיון, קורסים, סדנאות, השתלמויות)</h2>
                    <p>
                      על מנת להרשם לפעילות העמותה עליך למלא את הפרטים בטופס המקוון ולשלוח ע"י לחיצת כפתור (שלח)
                    </p>
                    <strong>
                                            **חשוב - למלא את שם הפעילות הרצויה בצורה ברורה
                                        </strong>
                    <div class="form-group">
                      <label for="home_adr1" class="col-3 col-form-label text-md-right">
                                                כתובת מגורים
                                            </label>
                      <div class="col-md-3">
                        <input type="text" id="home_adr1" class="form-control" placeholder="חובה" required>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="workAdr" class="col-3 col-form-label text-md-right">
                                                מקום עבודה
                                            </label>
                      <div class="col-md-3">
                        <input type="text" id="workAdr" class="form-control" placeholder="חובה" required>
                      </div>
                    </div>

                    <div class="form-group">
                      <label for="activitySelect">סוג הפעילות</label>
                      <select class="form-control col-3" id="activitySelect" required>
                        <option>כנס</option>
                        <option>יום עיון</option>
                        <option>קורס</option>
                        <option>השתלמות</option>
                        <option>סדנא</option>
                        <option>אחר</option>
                      </select>
                    </div>
                    <div class="form-group">
                      <label for="describeActivity">שם הפעילות</label>
                      <textarea class="form-control col-3" id="describeActivity" rows="3" placeholder="חובה" required></textarea>
                    </div>
                    <div class="form-group">
                      <label for="activityDate" class="col-3 col-form-label">
                                                תאריך הפעילות
                                            </label>
                      <br />
                      <div class="col-md-2">
                        <input class="form-control" type="date" value="2019-08-19" id="activityDate" required>
                      </div>
                    </div>
                    <p>
                      חבר עמותה
                    </p>
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" class="custom-control-input" id="membershipy" name="membership" checked="checked">
                      <label class="custom-control-label" for="membershipy">
                                                כן
                                            </label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" class="custom-control-input" id="membershipn" name="membership">
                      <label class="custom-control-label" for="membershipn">
                                                לא
                                            </label>
                    </div>
                  </article>
                </section>
                <!--שליחה-->
                <div class="col-md-6 offset-md-4">
                  <input type="submit" id="sendForm" class="btn btn-primary" value="שליחה">
                </div>

              </form>
            </div>

          </div>
        </div>
      </div>
    </div>
  </main>
</body>

</html>

【问题讨论】：

标签： jquery html asp.net

【解决方案1】：

你为什么不创建一个 ASP.Net 页面来处理表单数据和发送邮件，而这个 html 页面保持原样。我认为这对你来说会容易得多！

我会解释的。现在，您有一个包含所有表单字段和验证代码等内容的 HTML 页面。因此，当用户填写数据并尝试提交数据时，通过 AJAX（jQuery AJAX）将其发送到 ASP.Net 页面（例如：process.aspx）

在process.aspx（ASP.Net 文件）中，您可以读取用户提交的表单数据，进行任何服务器端验证，发送邮件或插入数据库等，然后返回响应。因此，在您的 html 页面（从中进行 AJAX 调用）中，您可以读取此响应并执行特定操作（例如，显示成功/错误消息或重定向到另一个页面等）。因此，您只需编写一个 ASP.Net 页面。您到目前为止编码的内容将保持不变！

所以，我认为如果你花一些时间阅读与 ASP.Net 相关的教程并尝试实现它会更好。当您在实施过程中遇到任何问题时，您可以在此处发布您的具体问题。 :)

关于服务器，可以在 Windows 服务器中安装 PHP（假设它不是共享主机或其他东西）。虽然 PHP 在 Linux 环境下会表现得更好。

希望对你有帮助！

【讨论】：

哇！不知道它可以保留我构建的所有内容并将 asp.net 添加到其中。我将尝试搜索我如何在此表单中实现 ajax 和 asp.net，并希望它会起作用。没学过ajax、json和asp.net到那个lvl