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

Question

我要整合SimpleModal在 My ListView edit 操作中，因此当用户单击 edit 时，模态弹出窗口通过 ajax 加载数据以编辑表单。

我的简单 ListView :

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

---

我的绑定(bind)代码:

 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 调用 linkbutton Edit Click 事件 为此，您需要将 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);
    }

So On Success 如果你的 Response 不为空则打开 Modal