如何在listView编辑操作中使用SimpleModal

Question

我想在My ListView 动作中集成SimpleModal,edit这样当用户点击时edit,模态弹出窗口加载数据直到ajax编辑表单.

我的简单列表视图:

 <asp:ListView ID="lv_familyrelation" runat="server" ItemPlaceholderID="RelationContainer" >

            <LayoutTemplate>
                <fieldset id="FieldSet1">
                    <legend>Relations</legend>
                       <div class="container-fluid">
                        <div class="row">
                            <div class="col-lg-4">
                                Code
                            </div>
                            <div class="col-lg-4">
                               Name
                            </div>
                            <div class="col-lg-4">

                            </div>
                          </div>
                    <asp:PlaceHolder ID="RelationContainer" runat="server"></asp:PlaceHolder>
                    <br />
                    <br />
                    <asp:LinkButton ID="lbtnInitInsert" runat="server"
                        CssClass="btn btn-primary btn-md white_cr"><span class="glyphicon glyphicon-plus"></span> </asp:LinkButton>

                </fieldset>
            </LayoutTemplate>
            <ItemTemplate>
                <fieldset>

                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-lg-4">
                                <%#Eval("RELATION_CODE")%>
                            </div>
                            <div class="col-lg-4">
                                <%#Eval("RELATION_NAME")%>
                            </div>
                            <div class="col-lg-4">

                                <asp:LinkButton ID="lbtn_edit" runat="server"
                                    CssClass="btn btn-primary btn-md white_cr"><span class="glyphicon glyphicon-pencil"></span> </asp:LinkButton>

                            </div>
                        </div>
                    </div>

                </fieldset>
            </ItemTemplate>

        </asp:ListView>

---

我的绑定代码:

 protected void Page_Load(object sender, EventArgs e)
        {
            if(!IsPostBack)
              {
                 lv_familyrelation.DataSource = GetRelation();
                 lv_familyrelation.DataBind();
              }
        }

---

来自FireBug:

 <div>

                    <fieldset id="FieldSet1">

                        <legend>Relations</legend>
                        <br>

                        <a id="lv_familyrelation_lbtnInitInsert" class="btn btn-primary btn-md white_cr" href="javascript:__doPostBack('lv_familyrelation$lbtnInitInsert','')"><span class="glyphicon glyphicon-plus"></span> </a>
                        <br>
                        <br>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-lg-4">
                                    Code
                                </div>
                                <div class="col-lg-4">
                                    Name
                                </div>
                                <div class="col-lg-4">
                                </div>

                            </div>
                        </div>


                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-lg-4">
                                1
                            </div>
                            <div class="col-lg-4">
                                Mother
                            </div>
                            <div class="col-lg-4">

                                <a id="lv_familyrelation_lbtn_edit_0" class="btn btn-primary btn-md white_cr" href="javascript:__doPostBack('lv_familyrelation$ctrl0$lbtn_edit','')"><span class="glyphicon glyphicon-pencil"></span> </a>

                            </div>
                        </div>
                    </div>


                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-lg-4">
                                2
                            </div>
                            <div class="col-lg-4">
                               Father
                            </div>
                            <div class="col-lg-4">

                                <a id="lv_familyrelation_lbtn_edit_1" class="btn btn-primary btn-md white_cr" href="javascript:__doPostBack('lv_familyrelation$ctrl1$lbtn_edit','')"><span class="glyphicon glyphicon-pencil"></span> </a>

                            </div>
                        </div>
                    </div>


                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-lg-4">
                                3
                            </div>
                            <div class="col-lg-4">
                                Wife
                            </div>
                            <div class="col-lg-4">

                                <a id="lv_familyrelation_lbtn_edit_2" class="btn btn-primary btn-md white_cr" href="javascript:__doPostBack('lv_familyrelation$ctrl2$lbtn_edit','')"><span class="glyphicon glyphicon-pencil"></span> </a>

                            </div>
                        </div>
                    </div>



                        </div>
                    </div>

                    </fieldset>

        </div>

Answer 1

您需要使用 ajax 调用链接按钮编辑单击事件为此，您需要将 OnClientClick 函数添加到链接按钮：

前任：

OnClientClick="GetRecords();"

这是调用 ajax 方法的GetRecords代码

var param = 1;
 function GetRecords() {
            var params = "{'param': " + param+ "}";
            $.ajax({
                type: "POST",
                url: "ViewBlogs.aspx/GetSample",
                data: params,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });

        }
        function OnSuccess(response) {
            if (response != "") {
                $("#element-id").modal();
            }
        }

在 C#代码隐藏中

[WebMethod]
    public static string GetSample(int param)
    {
        return GetData(param);
    }

因此，如果您的响应不为空，则成功后打开模态框