javascript - 无法使用 asp.net Web 表单中弹出的 Bootstrap 模式将数据发布到数据库

Question

我正在使用 asp.net Web 表单，我希望汤姆将模式弹出的数据发布到数据库，这不起作用，但是只需将文本框放在内容页面的正文中即可，它保存的数据就很好，我需要使用模态弹出窗口，因为我想做的所有项目都需要这个。我的代码如下

<script type="text/javascript">

    $(document).ready(function () {

        insertkpi();
    });


    function insertkpi() {
        $('#savebtn').click(function () {
            var kpi = {};
            kpi.Name = $('#TextBox1').val();
            kpi.initiative = $('#TextBox2').val();
            kpi.perfomance = $('#TextBox3').val();
            kpi.progress = $('#TextBox4').val();
            kpi.BaseTarget = $('#TextBox5').val();
            kpi.streachTarget = $('#TextBox6').val();
            kpi.Period = $('#TextBox7').val();

            $.ajax({
                url: 'addKpi.aspx/submitkpi',
                method: 'POST',
                contentType: 'application/json; charset=utf-8',
                data: '{item: ' + JSON.stringify(kpi) + '}',
                success: function () {
                    displayKPI();

                },

                error: function (xhr, status, p3, p4) {
                    console.debug(xhr);
                    var err = "Error " + " " + status + " " + p3;
                    if (xhr.responseText && xhr.responseText[0] == "{")
                        err = JSON.parse(xhr.responseText).message;
                    alert(err);
                }

            });
        });
    }


</script>

模态div

 <div class="modal" id="kpimodal" data-keyboad="false" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">New KPI</h4>
                <button class="close" data-dismiss="modal">&times;</button>
                </div>
            <div class="modal-body" id="subdata">

                <div class="form-group">
                    <label id ="namlb">Name</label>
                    <input type="text" class="form-control" runat="server" placeholder ="name" id="nametxt" />
                </div>
                <div class="form-group">
                    <label id ="inlb">Initiative</label>
                    <input type="text" class="form-control" runat="server" placeholder ="initiative" id="inittxt" />
                </div>
                <div class="form-group">
                    <label id ="perflb">Perfomance</label>
                    <input type="text" class="form-control" runat="server" placeholder ="perfomance" id="perftxt" />
                </div>
                <div class="form-group">
                    <label id ="proglb">Progress</label>
                    <input type="text" class="form-control" runat="server" placeholder ="progress" id="progtxt" />
                </div>
                <div class="form-group">
                    <label id ="baselb">Base Target</label>
                    <input type="text" class="form-control" runat="server" placeholder ="base Target" id="basetxt" />
                </div>
                <div class="form-group">
                    <label id ="streachlb">Streach Target</label>
                    <input type="text" class="form-control" runat="server" placeholder ="streach target" id="strtxt" />
                </div>
                <div class="form-group">
                    <label id ="perlb">Target Period</label>
                    <input type="text" class="form-control" runat="server" placeholder ="Period" id="periodtxt" />
                </div>

                </div>
            <div class="modal-footer">
                <button class="btn-primary" runat="server" id="savebtn">Save</button>
                <button class="btn-primary" data-dismiss="modal">Cancel</button>
                </div>
            </div>
    </div>

输入新的 KPI

Web 服务中的 Web 方法

 [WebMethod]
    public static string submitkpi(insertkpi item)
    {
        string constring = System.Configuration.ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString;
        using (SqlConnection conn = new SqlConnection(constring))
        {
            using (SqlCommand cmd = new SqlCommand("INSERT INTO KPIs (Name,Initiative,perfomance,progress,BaseTarget,streachTarget,Period) Values(@Name,@Initiative,@perfomance,@progress,@BaseTarget,@streachTarget,@Period)", conn))
            {
                try
                {
                conn.Open();
                cmd.Parameters.AddWithValue("@Name", item.Name);
                cmd.Parameters.AddWithValue("@Initiative", item.Initiative);
                cmd.Parameters.AddWithValue("@perfomance", item.perfomance);
                cmd.Parameters.AddWithValue("@progress", item.progress);
                cmd.Parameters.AddWithValue("@BaseTarget", item.BaseTarget);
                cmd.Parameters.AddWithValue("@streachTarget", item.streachTarget);
                cmd.Parameters.AddWithValue("@Period", item.Period);


                cmd.ExecuteNonQuery();
                }
                catch (Exception )
                {

                }
                finally
                {
                    conn.Close();
                }

            }
        }

Answer 1

在您的 kpi 对象中，您有 kpi.name set = $("#Textbox1").val()。但是，这在您的模态中不存在。对于模式中的姓名文本框，ID 为 nametxt。因此，请使用 kpi.name = $("#nametxt").val(); 创建对象。