Question

我正在使用一些免费的bootstrap模板开发我的网站，我使用asp.net和c＃来实现这个网站。

模板附带表单向导模板页面，其中包含3个步骤，每个步骤都有一些问题。还有3个按钮：next，prev和finish。

向导页面模板使用：

<!-- jQuery Smart Wizard -->
<script src="../vendors/jQuery-Smart-Wizard/js/jquery.smartWizard.js"></script>

我想将表单数据提交到sql数据库，但是我无法控制完成按钮和其他按钮。

<!-- jQuery Smart Wizard -->
<script>
  $(document).ready(function() {
    $('#wizard').smartWizard();

    $('.buttonNext').addClass('btn btn-success');
    $('.buttonPrevious').addClass('btn btn-primary');
    $('.buttonFinish').addClass('btn btn-default');
  });
</script>
<!-- /jQuery Smart Wizard -->

这是我的表格：

<!-- Smart Wizard -->
                <form class="form-horizontal form-label-left" id="add_project_form" runat="server" onsubmit="">

                <div id="wizard" class="form_wizard wizard_horizontal">

                    <ul class="wizard_steps">
                    <li>
                      <a href="#step-1">
                        <span class="step_no">1</span>
                        <span class="step_descr">
                                          Step 1<br />
                                          <small>General Information</small>
                                      </span>
                      </a>
                    </li>
                    <li>
                      <a href="#step-2">
                        <span class="step_no">2</span>
                        <span class="step_descr">
                                          Step 2<br />
                                          <small>Assign User</small>
                                      </span>
                      </a>
                    </li>
                    <li>
                      <a href="#step-3">
                        <span class="step_no">3</span>
                        <span class="step_descr">
                                          Step 3<br />
                                          <small>Create Project</small>
                                      </span>
                      </a>
                    </li>
                    </ul>


                    <div id="step-1">

                      <!-- Project Name -->
                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="project_name">Project Name <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <asp:TextBox id="project_name" required="required" class="form-control col-md-7 col-xs-12" runat="server"></asp:TextBox>
                        </div>
                      </div>

                      <!-- PI name -->
                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="pi_name">PI Name <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <asp:TextBox id="pi_name" required="required" class="form-control col-md-7 col-xs-12" runat="server"></asp:TextBox>
                        </div>
                      </div>

                   </div>

           <div id="step-2">

                      <!-- Assign Developer dropdown -->
                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Assign Developer</label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <asp:DropDownList ID="developers_DropDownList" runat="server" Width="100px">
                          </asp:DropDownList>
                        </div>
                      </div>

                   </div>


                    <div id="step-3">
                       <p>
                            Click on 'Finish' to create the new database.
                       </p>

                    </div>


                </div>
                <!-- End SmartWizard Content -->

              </form>

我知道如何使用c＃中的“onclick”按钮提交表单数据。但在这里，我无法访问按钮。在这种情况下如何提交表格？

我可以向您展示“jquery.smartWizard.js”文件，但它很大。

澄清： 我不知道在这种情况下提交表格的正确方法是什么。 1-我可以将插入数据的代码放入PHP文件的数据库中，并从表单标签中的action =“”调用它吗？ 2-或者我可以将插入数据的代码放入c＃函数的数据库中吗？在这种情况下，如何从我的asp文件中调用此函数以及如何将表单数据传递给此函数？ 3-或者我可以使用js函数将数据插入数据库吗？

请记住：我没有完成按钮的控制

Answer 1

好吧，我假设这个问题已经解决，但是对于其他有问题的人，我会尝试在解决方案或至少是部分解决方案上投下一点光。

首先，您的意图是将数据从HTML表单插入数据库。您的HTML表单如下所示：

     <form class="form-horizontal form-label-left" id="add_project_form" runat="server" onsubmit="">

如果您有一个处理此表单的Web应用程序，它应该向后端发出“发布”请求，如下所示：

    <form class="whatever-your-using" id="whatever-you-like" action="/handle-html-form" method="post">

这将使到服务器/应用程序的发布指向路由/ handle-html-form，该路由应具有从表单中获取数据并将其保存到数据库的功能。

显然，您需要有一个提交按钮才能实际发送表单。我的方法是下载smartWizard.js并将其保存到我自己的项目中

然后我编辑了适合自己目的的文件。例如，这是代码更改的一小段。

原始的smartWizard.js：

    function SmartWizard(target, options) {
    this.buttons = {
       next : $('<a>'+options.labelNext+'</a>').attr("href","#").addClass("buttonNext"),
       previous : $('<a>'+options.labelPrevious+'</a>').attr("href","#").addClass("buttonPrevious"),
       finish  : $('<a>'+options.labelFinish+'</a>').attr("href","#").addClass("buttonFinish")
    };

我的smartWizard.js：

    function SmartWizard(target, options) {
    this.buttons = {
      next : $('<a>'+options.labelNext+'</a>').attr("href","#").addClass("buttonNext"),
      previous : $('<a>'+options.labelPrevious+'</a>').attr("href","#").addClass("buttonPrevious"),
      finish: $('<a>' + options.labelFinish + '</a>').attr({
        type: 'submit',
        name: 'buttonFinish',
        value: 'Submit'
    }).addClass('buttonFinish')
};

我已经将Submit按钮的属性直接添加到finishButton中。这是我发现解决该问题的第一个解决方案。

值得一提的是，smartWizard的整个HTML必须嵌套在form元素内。否则，将保存向导每个步骤中的所有元素。这是一个HTML示例，用于澄清我要说的话：

    <form class="whatever" id="whatever" action="/handle-html-form" method="post">
      <div class="form_wizard wizard_horizontal" id="wizard">
      // Then all the steps below but still inside the form

希望这会有所帮助

将bootstrap向导表单提交到sql database

1 个答案: