用于激活oncl​​ick方法的jQuery函数？

时间：2015-04-30 20:12:57

标签： c# jquery mysql forms asp.net-mvc-4

点击后，我希望我的按钮执行startAjax功能，该功能通过AJAX POST请求将表单数据发送到服务器。

这是我到目前为止所做的：

<script type="text/javascript">
            function startAjax() {
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("Submit", "CreateController")',
                    data: $('#PrivateUser').serialize(),
                    datatype: "json",
                    success: $("Submit1").click(function (data) {
                        $('#result').html(data)
                    })
                });
            }
        </script>
        <button type="button" id="Submit1" value="Submit" onclick="startAjax()">Opret Bruger</button>

这是我在后端使用的，用于将数据存储在数据库中：

 public static MySqlConnection GetConnection(string host, string user, string pwd, string db)
    {
        string conStr = string.Format("server={0};uid={1};pwd={2};database={3}", host, user, pwd, db);
        var con = new MySqlConnection();
        con.ConnectionString = conStr;
        con.Open();
        return con;
    }

    public static MySqlConnection GetDefaultConnection()
    {
        return GetConnection("localhost", "root", "", "EventCrush");
    }

    public ActionResult Submit(string Fornavn, string Efternavn, string Email, int Telfonnummer, string Brugernavn, byte Avatar, string Kodeord, DateTime Fødselsdag)
    {
        var con = GetDefaultConnection();
        MySqlCommand cmd = new MySqlCommand();
        cmd.Connection = con;
        cmd.CommandText = "insert into Private_User values (@Username, @PW, @Birthdate, @FirstName, @LastName, @Eamail, @PhoneNumber)";
        cmd.Prepare();
        cmd.Parameters.AddWithValue("@Username", Brugernavn);
        cmd.Parameters.AddWithValue("@PW", Kodeord);
        cmd.Parameters.AddWithValue("@Birthdate", Fødselsdag);
        cmd.Parameters.AddWithValue("@FirstName", Fornavn);
        cmd.Parameters.AddWithValue("@LastName", Efternavn);
        cmd.Parameters.AddWithValue("@Email", Email);
        cmd.Parameters.AddWithValue("@PhoneNumber", Telfonnummer);
        cmd.ExecuteNonQuery();
        if (con != null) { con.Close(); }
        return View();
    }

我没有收到任何错误，但数据没有存储在数据库中。谁能看到我做错了什么？

编辑：

＆＃13;
＆＃13; 
@{
    ViewBag.Title = "EventCrush - Registrer Privatbruger";
}

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2 right-content"><img src="/Content/img/logo.png" class="animated bounceInDown"></div>
        <div class="col-md-8 center-content">
            <h3 class="">Opret Konto</h3><br>
            <span>
                Med en bruger på EventCrush får du flere muligheder, som f.eks. muligheden for at oprette events!<br>
                Det tager kun 2 minutter, så er du klar!
            </span>
            <br /><br />
            <a href="@Url.Action("CorporateUser","Create")" class="button button-big"><img src="@Url.Content("~/Content/img/ui-icon/corporate-w.png")" style="height:35px;margin-top:-6px;" /> Erhvervskunde, tryk her!</a>
            <br /><br />
        </div>
        <div class="col-md-4"></div>
    </div>
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-4">
            <form id="PrivateUser">
                <div class="form-group">
                    <label class="sr-only">Fornavn</label>
                    <input type="text" class="form-control-1" placeholder="Fornavn *" required>
                </div>
                <div class="form-group">
                    <label class="sr-only">Efternavn</label>
                    <input type="text" class="form-control-1" placeholder="Efternavn *" required>
                </div>
                <div class="form-group">
                    <label class="sr-only">Email</label>
                    <input type="Email" class="form-control-1" placeholder="Email *" required>
                </div>
                <script>    $('.datepicker').datepicker({ language: "da", orientation: "bottom auto" });</script>
                <div class="form-group">
                    <label class="sr-only">Fødselsdag</label>
                    <input class="datepicker form-control-1" placeholder="Fødselsdag *" required data-provide="datepicker" data-date-clearbtn="true" data-date-autoclose="true" data-date-format="mm/dd/yyyy">
                </div>
                <div class="form-group">
                    <label class="sr-only">Password</label>
                    <input type="password" class="form-control-1" placeholder="Kodeord *">
                </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label class="sr-only">Vejnavn</label>
                <input type="text" class="form-control-1" placeholder="Vejnavn *">
            </div>
            <div class="form-group">
                <label class="sr-only">Vejnummer</label>
                <input type="number" class="form-control-1" placeholder="Vejnummer *">
            </div>
            <div class="form-group">
                <label class="sr-only">By</label>
                <input type="text" class="form-control-1" placeholder="By *">
            </div>
            <div class="form-group">
                <label class="sr-only">Postnummer</label>
                <input type="text" class="form-control-1" placeholder="Postnummer *" required>
            </div>
            <div class="form-group">
                <label class="sr-only">Land</label>
                <input type="text" class="form-control-1" placeholder="Land *">
            </div>
            <div class="form-group">
                <label class="sr-only">Telefonnummer</label>
                <input type="number" class="form-control-1" placeholder="Telefonnummer">
            </div>
            <script type="text/javascript">
                function startAjax() {
                    $.ajax({
                        type: "POST",
                        url: '@Url.Action("Submit", "CreateController")',
                        data: $('#PrivateUser').serialize(),
                        datatype: "json",
                        success: $("Submit1").click(function (data) {
                            $('#result').html(data)
                        })
                    });
                }
            </script>
            <button type="button" id="Submit1" value="Submit" onclick="startAjax()">Opret Bruger</button>
            * Skal udfyldes
        </div>
        </form>

        <div class="col-md-2"></div>
    </div>
</div>
<!-- Content: End -->
＆＃13;
＆＃13;
＆＃13;

编辑 - 呈现HTML

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>EventCrush - Registrer Privatbruger - My ASP.NET MVC Application</title>
    <link href="/Content/eventcrushcss/css" rel="stylesheet"/>

    <script src="/Scripts/eventcrushjs/jquery-ui.js"></script>
<script src="/Scripts/eventcrushjs/jquerymin.js"></script>
<script src="/Scripts/eventcrushjs/bootstrap.js"></script>
<script src="/Scripts/eventcrushjs/bootstrapmin.js"></script>
<script src="/Scripts/eventcrushjs/fileinputmin.js"></script>
<script src="/Scripts/eventcrushjs/headroom.js"></script>
<script src="/Scripts/eventcrushjs/jQuery.headroommin.js"></script>
<script src="/Scripts/eventcrushjs/bootstrap-datepickerdamin.js"></script>
<script src="/Scripts/eventcrushjs/bootstrap-datepickermin.js"></script>
<script src="/Scripts/eventcrushjs/bootstrap-datepicker.js"></script>

    <!-- JQ -->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

    <body>
        <!-- Top Header: Start-->
        <nav class="navbar navbar-default navbar-fixed-top animated fadeIn">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <li><a class="navbar-brand" href="/"><img src="/Content/img/logo.png" class="animated fadeIn" style="height:35px;" /></a></li>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a data-toggle="modal" data-target=".login-modal" href="#"><img src="/Content/img/ui-icon/login-g.png" style="height:20px;"> Login</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="/Home/Search_Event"><img src="/Content/img/ui-icon/search-g.png" style="height:20px;" /> Find Event</a></li>
                        <li><a href="/Create/PrivateUser"><img src="/Content/img/ui-icon/user-g.png" style="height:20px;" />Opret Konto / Opret Event</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Top-Header: End -->
        <!-- Login Modal: Start -->
        <div class="modal fade login-modal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-sm center-content" style="margin-top:200px;">
                <div class="modal-content" style="padding:30px;">
                    <h2>Velkommen tilbage</h2>
                    <form>
                        <div class="form-group">
                            <label class="sr-only">Email</label>
                            <input type="email" class="form-control-1" placeholder="Email" required>
                        </div>
                        <div class="form-group">
                            <label class="sr-only">Kodeord</label>
                            <input type="password" class="form-control-1" placeholder="Kodeord" required>
                        </div>
                        <button type="submit" class="button">Login</button>
                        <a href="#" class="button">Glemt Kodeord?</a> <br><br>
                        <a href="create-event.php" class="button">Admin Login</a>
                    </form>
                </div>
            </div>
        </div>
        

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2 right-content"><img src="/Content/img/logo.png" class="animated bounceInDown"></div>
        <div class="col-md-8 center-content">
            <h3 class="">Opret Konto</h3><br>
            <span>
                Med en bruger på EventCrush får du flere muligheder, som f.eks. muligheden for at oprette events!<br>
                Det tager kun 2 minutter, så er du klar!
            </span>
            <br /><br />
            <a href="/Create/CorporateUser" class="button button-big"><img src="/Content/img/ui-icon/corporate-w.png" style="height:35px;margin-top:-6px;" /> Erhvervskunde, tryk her!</a>
            <br /><br />
        </div>
        <div class="col-md-4"></div>
    </div>
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-4">
            <form id="PrivateUser">
                <div class="form-group">
                    <label class="sr-only">Fornavn</label>
                    <input name="Fornavn" type="text" class="form-control-1" placeholder="Fornavn *" required>
                </div>
                <div class="form-group">
                    <label class="sr-only">Efternavn</label>
                    <input name="Efternavn" type="text" class="form-control-1" placeholder="Efternavn *" required>
                </div>
                <div class="form-group">
                    <label class="sr-only">Email</label>
                    <input name="Email" type="Email" class="form-control-1" placeholder="Email *" required>
                </div>
                <script>    $('.datepicker').datepicker({ language: "da", orientation: "bottom auto" });</script>
                <div class="form-group">
                    <label class="sr-only">Fødselsdag</label>
                    <input name="Fødselsdag" class="datepicker form-control-1" placeholder="Fødselsdag *" required data-provide="datepicker" data-date-clearbtn="true" data-date-autoclose="true" data-date-format="mm/dd/yyyy">
                </div>
                <div class="form-group">
                    <label class="sr-only">Password</label>
                    <input name="Password" type="password" class="form-control-1" placeholder="Kodeord *">
                </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label class="sr-only">Vejnavn</label>
                <input name="Vejnavn" type="text" class="form-control-1" placeholder="Vejnavn *">
            </div>
            <div class="form-group">
                <label class="sr-only">Vejnummer</label>
                <input name="Vejnummer" type="number" class="form-control-1" placeholder="Vejnummer *">
            </div>
            <div class="form-group">
                <label class="sr-only">By</label>
                <input name="By" type="text" class="form-control-1" placeholder="By *">
            </div>
            <div class="form-group">
                <label class="sr-only">Postnummer</label>
                <input name="Postnummer" type="text" class="form-control-1" placeholder="Postnummer *" required>
            </div>
            <div class="form-group">
                <label class="sr-only">Land</label>
                <input name="Land" type="text" class="form-control-1" placeholder="Land *">
            </div>
            <div class="form-group">
                <label class="sr-only">Telefonnummer</label>
                <input name="Telefonnummer" type="number" class="form-control-1" placeholder="Telefonnummer">
            </div>
            <script type="text/javascript">
                $("#Submit1").on("click", function (e) {
                    $.ajax({
                        type: "POST",
                        url: '/CreateController/Submit',
                        data: $('#PrivateUser').serialize(),
                        datatype: "json",
                        success: function (data) {
                            $('#result').html(data)
                        }
                    });
                    e.preventDefault(); //prevent the form from submitting
                });
            </script>
            <button type="button" id="Submit1" value="Submit">Opret Bruger</button>
            * Skal udfyldes
        </div>
        </form>

        <div class="col-md-2"></div>
    </div>
</div>
<!-- Content: End -->
        <!-- Footer: Start -->
        <div style="height:800px"></div>
    </body>
    <script type="text/javascript">
        $(".navbar-fixed-top").headroom();
    </script>
</body>
<script type="text/javascript">window.__vwd_mapping_data={"map":[{"sourceFile":"~/Views/Create/PrivateUser.cshtml"},{"sourceFile":"~/Views/Shared/_Layout.cshtml"}]};</script>
<!-- Visual Studio Browser Link -->
<script type="text/javascript" src="/__vwd/js/artery"></script>
<!-- End Browser Link -->
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

您需要更改ajax调用中的语法，特别是您的submit参数。此外，您正在失去AJAX调用的好处，因为当您单击按钮时，HTML将自动提交您的表单。

您应该从按钮中删除内联事件：

<button type="button" id="Submit1" value="Submit">Opret Bruger</button>

然后在jQuery中分配事件处理程序：

$(document).ready(function() {
    $("#Submit1").on("click", function(e) {
        $.ajax({
            type: "POST",
            url: '@Url.Action("Submit", "Create")',
            data: $('#PrivateUser').serialize(),
            datatype: "json",
            success: function (data) {
                $('#result').html(data)
            }
        });
        e.preventDefault(); //prevent the form from submitting
    });
});

e.preventDefault();会阻止您的网页提交（您不需要再次通过AJAX进行此操作）。或者您可以使用不会自动提交表单的<input type="button">。

答案 1 :(得分：0)

我认为问题源于您的Ajax，URL似乎不正确。应该如下，正确命中你的控制器：

/Home/Validate
  • 主页，将成为控制器。
  • 验证，将是Controller内的请求。

一旦你打电话，就应该按照预期解决。

相关问题
最新问题