如何以ajax方式在INSERT后刷新我的服务器控件
本文关键字:刷新 我的 服务器控件 INSERT ajax 方式 | 更新日期: 2023-09-27 18:05:57
如何在INSERT后以ajax方式刷新服务器控件。
My .aspx:
<form id="form1" runat="server">
<div>
<asp:ListView ID="lv_familyrelation" runat="server" ItemPlaceholderID="RelationContainer" ItemType="DomainClasses.FAMILYRELATION">
<LayoutTemplate>
<fieldset id="FieldSet1">
<legend>Relations</legend>
<br />
<a id="lbtnInitInsert" class="btn btn-primary btn-md white_cr" onclick="EditForInsert(this);"><span class="glyphicon glyphicon-plus-sign"></span></a>
<br />
<br />
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">
Code
</div>
<div class="col-lg-4">
Insert
</div>
<div class="col-lg-4">
</div>
</div>
</div>
<asp:PlaceHolder ID="RelationContainer" runat="server"></asp:PlaceHolder>
</fieldset>
</LayoutTemplate>
<ItemTemplate>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 code">
<%#:Item.RELATION_CODE%>
</div>
<div class="col-lg-4 name">
<%#:Item.RELATION_NAME%>
</div>
<div class="col-lg-4">
<a id="lbtn_edit" class="btn btn-primary btn-md white_cr" onclick="Edit(this);"><span class="glyphicon glyphicon-pencil"></span></a>
</div>
</div>
</div>
</ItemTemplate>
</asp:ListView>
</div>
<div id="insertForm" class="container-fluid editForm">
<div class="row">
<div class="col-lg-6">
Add
</div>
<div class="col-lg-6">
<a onclick="CloseInsertDialog(); return false;" style="cursor: pointer;">Close</a>
</div>
</div>
<div class="row">
<div class="col-lg-6">
Code
</div>
<div class="col-lg-6">
Name
</div>
</div>
<div class="row">
<div class="col-lg-12 code_ins">
<asp:TextBox ID="txt_relation_code_ins" runat="server"></asp:TextBox>
</div>
<div class="col-lg-12 name_ins">
<asp:TextBox ID="txt_relation_name_ins" runat="server"></asp:TextBox>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<input type="submit" id="btn_close" value="Close" onclick="CloseInsertDialog(); return false;" />
<input type="submit" id="btn_insert" value="Add" onclick="Insert(); return false;" />
</div>
</div>
</div>
脚本:
<script type="text/javascript">
var row;
var id, name;
function Edit(editButton) {
row = $(editButton).parent().parent();
id = $('.code', row).text().trim();
name = $('.name', row).text().trim();
row.addClass("highlightRow");
DisplayEditDialog();
return false;
}
function DisplayEditDialog() {
$("#lbl_relation_code").text(id);
$("#txt_relation_name").val(name);
$("#editForm").show();
}
function EditForInsert(editButton) {
$("#insertForm").show();
return false;
}
function Insert(e) {
name = $("#txt_relation_name_ins").val();
id = $("#txt_relation_code_ins").val();
$.ajax({
type: "POST",
url: "FamilyRelationService.asmx/Insert",
data: "{'id':'" + id + "', 'name':'" + name + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var result = response.d;
if (result > 0) {
CloseInsertDialog();
}
else {
alert('Error...');
}
},
failure: function (msg) {
alert(msg);
}
});
return false;
}
function CloseInsertDialog() {
$("#insertForm").hide();
}
</script>
我的web服务:
[WebMethod]
public int Insert(int id, string name)
{
int result = -1;
try
{
using (HRCTX ctx = new HRCTX())
{
using (FamilyRelationRepository familyRelationRepo = new FamilyRelationRepository(ctx))
{
FAMILYRELATION family = new FAMILYRELATION
{
RELATION_CODE = id,
RELATION_NAME = name,
State = StateInterface.State.Added
};
familyRelationRepo.InsertOrUpdate(family);
result = ctx.Save();
}
}
}
catch (Exception ee)
{
throw;
}
return result;
}
在使用Webmethod插入之后,您需要从db中检索新插入的行,并且您需要像下面这样构建字符串
aspx.cs
[WebMethod]
public static string GetNewlyInsertedRecord()
{
return NewlyInsertt();
}
public static string NewlyInsertt()
{
dt = GetNewRecord();
foreach (DataRow r in dt.Rows)
{
sb.Append(
@"<div class='row'>
< div class='col-lg-4 code'>" +
r["Code"] +
@"</div>
<div class='col-lg-4 name'>" +
r["Name"] +
@"</div>
<div class='col-lg-4'>
<a onclick = 'Edit(this);' class='btn btn-primary btn-md white_cr' id='lbtn_edit'><span class='glyphicon glyphicon-pencil'></span></a> "
);
}
return sb.ToString();
}
现在在CloseInsertDialog方法在Aspx追加如下:
$("#toappend").append(response.d);