javascript - 无法使用 asp.net Web 表单中弹出的 Bootstrap 模式将数据发布到数据库
问题描述
我正在使用 asp.net 网络表单,我想将模式弹出窗口中的数据发布到数据库,这不起作用,但是只是将文本框放在内容页面的正文中,它保存数据就好了,我需要使用模态弹出,因为我想做的所有项目都需要这个。我的代码如下
<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">×</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
网络服务中的网络方法
[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();
}
}
}
解决方案
在您的 kpi 对象中,您拥有kpi.name set = $("#Textbox1").val()
. 但是,这在您的模态中不存在。对于模式中的姓名文本框,ID 是 nametxt。所以kpi.name = $("#nametxt").val();
用来创建你的对象。
推荐阅读
- c# - ConnectionString 属性尚未初始化 IIS 8.5
- java - 来自 Transformer 的 Spring Integration 路由消息
- android - Android Studio 字体问题
- scala - Lagom 框架 - 如何从 Swagger api.json 文件生成 API 框架
- javascript - 如何改变一个字段的VALUE属性用JavaScript实时吗?
- f# - 如果异步 Suave 服务器崩溃,如何重新启动它?
- ruby - 在 Ruby 中,如何使用 JSON 中的键的值作为其值由两个连接值组成的 ruby 哈希的键?
- css - SVG渐变和底层图像的不同响应?
- python - 在 matplotlib 子图之间添加一条垂直线
- python-3.x - 在 Keras 中添加隐藏层的格式。