jQuery不会将表单输入传递给我的方法

时间:2015-05-01 19:07:42

标签: jquery html mysql asp.net-mvc-4 visual-studio-2013

经过一番奋斗和一些Stackoverflow的帮助后,我终于让我的jQuery正确执行并调用我的提交方法。现在它只传递空值,我似乎无法通过我的输入值。

这是我的HTML,底部是jQuery:

@{
    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 id="Fornavn" type="text" class="form-control-1" placeholder="Fornavn *" required>
                </div>
                <div class="form-group">
                    <label class="sr-only">Efternavn</label>
                    <input id="Efternavn" type="text" class="form-control-1" placeholder="Efternavn *" required>
                </div>
                <div class="form-group">
                    <label class="sr-only">Email</label>
                    <input id="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 id="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 id="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 id="Vejnavn" type="text" class="form-control-1" placeholder="Vejnavn *">
            </div>
            <div class="form-group">
                <label class="sr-only">Vejnummer</label>
                <input id="Vejnummer" type="number" class="form-control-1" placeholder="Vejnummer *">
            </div>
            <div class="form-group">
                <label class="sr-only">By</label>
                <input id="By" type="text" class="form-control-1" placeholder="By *">
            </div>
            <div class="form-group">
                <label class="sr-only">Postnummer</label>
                <input id="Postnummer" type="text" class="form-control-1" placeholder="Postnummer *" required>
            </div>
            <div class="form-group">
                <label class="sr-only">Land</label>
                <input id="Land" type="text" class="form-control-1" placeholder="Land *">
            </div>
            <div class="form-group">
                <label class="sr-only">Telefonnummer</label>
                <input id="Telefonnummer" type="number" class="form-control-1" placeholder="Telefonnummer">
            </div>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#Submit1").on("click", function (e) {
                        $.ajax({
                            type: "POST",
                            url: '@Url.Action("Submit", "Create")',
                            data: $('#PrivateUser').serialize(),
                            datatype: "json",
                            success: function (data) {
                                var str = '@ViewData';
                                alert(str);
                                $('#result').html(data)
                            }
                        });
                        e.preventDefault(); //prevent the form from submitting
                    });
                });
            </script>
            <button type="submit" id="Submit1" value="Submit">Opret Bruger</button>
            * Skal udfyldes
        </div>
        </form>

        <div class="col-md-2"></div>
    </div>
</div>
<!-- Content: End -->

这是我的方法控制器:

 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, string Telfonnummer, string Brugernavn, string Kodeord)
    {
        var con = GetDefaultConnection();
        MySqlCommand cmd = new MySqlCommand();
        cmd.Connection = con;
        cmd.CommandText = "insert into Private_User values (@Username, @PW, @FirstName, @LastName, @Email, @PhoneNumber)";
        cmd.Prepare();
        cmd.Parameters.AddWithValue("@Username", Brugernavn);
        cmd.Parameters.AddWithValue("@PW", Kodeord);
        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();
    }

运行时我收到此错误:

  

列数与第1行的值计数不匹配

我在方法的断点处运行它,可以看到它都是空值。

有人能看出为什么jQuery没有传递任何信息吗?

1 个答案:

答案 0 :(得分:0)

在你的html中,你必须将所有输入放在带有namee值的表单中(你要输入id,class,....但是没有name属性,这是必需的,因为它将是服务器端变量的名称....和jquery使用$ .serialize创建数组数据使用此名称。)