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

Question

我希望在我的ListView的edit操作中集成SimpleModal，这样当用户点击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>

- Anyname Donotcare

---

@任意名称不重要 请添加您的ListView绑定代码。 - Krsna Kishore

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# 中，Codebehind。

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

如果响应不为空，则打开模态框。

- Krsna Kishore

---

非常感谢，但我想澄清一下，我已经在Page_Load事件中绑定了我的ListView，其中包括!IsPostback，我不想每次编辑数据时都进行这个操作，只有当用户点击“更新”（在打开的弹出窗口中）时，我才想以Ajax方式刷新仅带有更新数据的ListView（即重新绑定ListView）。 - Anyname Donotcare

@任意名称不重要 你在编辑屏幕中更新了多少个字段，如果你想重新绑定Listview，为什么不能关闭模态框并再次调用Listeview.DataBind();。 - Krsna Kishore

假设我想要更新两个字段以简化操作，之后我希望在模态弹出窗口中点击更新按钮后只刷新列表视图（部分回传）。 - Anyname Donotcare

@任意名称不在乎，所以我的答案解释了如何打开模态框，但是在该模态框中，您需要从现有的列表视图中填写，并在关闭时更新列表视图..我说得对吗？ - Krsna Kishore

如果这个解决方案解决了你的问题，你可以将其标记为答案，@任意名称不在乎。 - Krsna Kishore

Answer 2

我认为您正在寻找链接按钮的OnClientClick函数。然后根据SimpleModal网站，只需使用JavaScript打开模态框即可：

$("#element-id").modal() 

因此，编写一个JavaScript函数来打开您的模态框，并在OnClientClick中使用它。可以在这里找到执行此操作的示例。

- Marc T