Anyname Donotcare Anyname Donotcare - 2 months ago 7
Ajax Question

How to refresh my server control after INSERT in ajax manner?

How to refresh my server control after INSERT in ajax manner .

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 :

<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>





My web service :

[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;
}

Answer

After inserting using Webmethod you need to retrieve that newly inserted row from db and you need to build the string like the following way

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();
}

Now in CloseInsertDialog Method in Aspx append like this:

 $("#toappend").append(response.d);
Comments