Question

我希望将SimpleModal集成到我的ListView edit操作中，以便当用户点击edit时，模态弹出窗口通过ajax加载数据来编辑表单。< / p>

我的简单列表视图：

 <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调用编辑 Click事件为此，您需要将OnClientClick函数添加到链接按钮：

例如：

OnClientClick="GetRecords();"

以下是 GetRecords 代码，用于调用ajax方法

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

如果你的Response不为空，那么在成功时打开模态

Answer 2

我认为您正在寻找链接按钮的OnClientClick功能。然后根据SimpleModal Website只需打开模态的javascript：

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

所以制作一个JavaScript函数打开你的模态并使用它OnClientClick。可以找到这样做的一个例子here。

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

2 个答案: