如何以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;
        }

如何以ajax方式在INSERT后刷新我的服务器控件

在使用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);