简体   繁体   English

jQuery的Bootbox和ASP.NET页面的Bootstrap-如何提交表单

[英]bootbox with jQuery and Bootstrap with ASP.NET page - how to submit form

If I have a .net page with bootstrap min and some other js files on the page, it won't run the js files. 如果我的.net页面上包含bootstrap min和页面上的其他js文件,则它将不会运行js文件。 However, if I move the < form ...> to the end of the file the bootbox javascript works perfectly. 但是,如果将<form ...>移到文件末尾,则bootbox javascript会完美运行。

This won't work until you move the form to the end of the file. 除非您将表单移到文件末尾,否则这将不起作用。 How come? 怎么会? I want to use a confirm button to make sure the user actually wants to submit the form but I'm starting with this simple example. 我想使用一个确认按钮来确保用户确实想要提交表单,但是我从这个简单的例子开始。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Untitled Page</title>
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"
    rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="span12">
        <h2>
          Bootbox.Js - Creativity Tuts</h2>
        <button class="btn btn-danger">
          Alert Box!</button>
      </div>
    </div>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <script src="js/bootbox.min.js"></script>

  <script type="text/javascript">
        $(document).ready(function(){
            $('.btn').on('click', function(){
                bootbox.prompt("Enter your name", function(res){
                    if(res == null){
                        alert("Prompt cancelled by user.");
                    }else{
                        alert("Hi: "+res);
                    }
                });    
            });
        });

  </script>

  <form id="form1" runat="server">
  </form>
</body>
</html>

Another approach is: 另一种方法是:

ASPX Page: ASPX页面:

<asp:Button ID="btnProcess" runat="server" Text="Process"
OnClick="btnProcess_Click"
OnClientClick="return ShowConfirm(this.id);" />

Javascript: 使用Javascript:

var confirmed = false;

function ShowConfirm(controlID)
{
    if (confirmed) { return true; }

    bootbox.confirm("Are you sure want to continue?", function (result) {
        if (result) {
            if (controlID != null) {
                var controlToClick = document.getElementById(controlID);
                if (controlToClick != null) {
                    confirmed = true;
                    controlToClick.click();
                    confirmed = false;
                }
            }
        }

    });

    return false;

}

You can add a function to a script at the top of the page "" like the following: 您可以在“”页面顶部的脚本中添加函数,如下所示:

    <script type="text/JavaScript">
    function PassToServerSide() {
        bootbox.confirm("Are you sure?", function (result) {
            if (result)
                __doPostBack('__EVENTTARGET', '__EVENTARGUMENT');
        });
    }
</script>

and then capture the post back at the server side by using something like the following: 然后使用类似以下的内容在服务器端捕获该帖子:

protected void Page_Load(object sender, EventArgs e)
{
    string parameter = Request["__EVENTARGUMENT"];
    switch (Request.Form["__EVENTTARGET"])
    {
        ...
    }
}

To assign the javascript function to the asp button ue the following: 要将javascript函数分配给asp按钮,请执行以下操作:

        cmdButton.OnClientClick = "PassToServerSide();return false;";

Make sure to add "return false" other wise the button will case a post back it self 确保以其他方式添加“ return false”,否则按钮将自行退回信息

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM