How to use SimpleModal in listView edit action

Question

I want to integrate SimpleModal in My ListView edit action so when the user click edit, the modal popup loaded with data through ajax to edit the form .

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

My Bind Code :

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

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

@AnynameDonotcare please add your Listview binding code also — Krsna Kishore, Sep 02 '16 at 15:31

score 1 · Accepted Answer · answered Sep 03 '16 at 04:46

1

You need to use the ajax calling on linkbutton Edit Click event For this you need to add the OnClientClick function to the link button :

Ex:

OnClientClick="GetRecords();"

Here is your GetRecords Code to call the ajax Method

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

In C# Codebehind

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

So On Success if your Response is not empty then open the Modal

answered Sep 03 '16 at 04:46

Krsna Kishore

8,233
4
32
48

Thanks a lot , but i want to clarify that i have already bind my ListView in Page_Load event where `!IsPostback` ,i don't want to make this trip every time i edit the my data ,just when the user click `update`(in the opened popup) i want to refresh only the listview with the updated data(i mean rebind the listview in ajax manner ) . – Anyname Donotcare Sep 03 '16 at 19:54
@AnynameDonotcare how many fields you are updating in the Edit screen and if you want to rebind the Listview why can't you close the modal and call the `Listeview.DataBind();` again . – Krsna Kishore Sep 04 '16 at 04:25
Let's say i want to update two fields for simplification, and after that i want to refresh only the listview again as a result of clicking update in the modal popup ( partial postback) – Anyname Donotcare Sep 04 '16 at 04:33
And i don't want to go to the db every time i want to edit to get the data on the modal which already exist when i have bound the listview. – Anyname Donotcare Sep 04 '16 at 04:36
@AnynameDonotcare yeah i totally get your point , but the question you asked and comments you stating are different .. you asking about how to use Listviewmodal – Krsna Kishore Sep 04 '16 at 04:38
Exactly the integration using ajax not( how to open modal and close it , it's so easy and exist in the documentation) – Anyname Donotcare Sep 04 '16 at 04:40
@AnynameDonotcare so my answer explains to open the modal but , in that modal you need to fill from existing listview and on closing it should update the listview .. am i right? – Krsna Kishore Sep 04 '16 at 04:42
Exactly , that's what i want (using ajax). – Anyname Donotcare Sep 04 '16 at 04:43
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/122601/discussion-between-webruster-and-anyname-donotcare). – Krsna Kishore Sep 04 '16 at 04:44
@AnynameDonotcare if it solved your problem can you mark it as answer – Krsna Kishore Sep 07 '16 at 04:54

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

I think you're looking for the OnClientClick function of the link button. Then according to the SimpleModal Website just the javascript to open the modal is:

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

So make a JavaScript function that opens your modal and use it OnClientClick. An example of doing that can be found here.

edited May 23 '17 at 10:33

Community

1
1

answered Sep 02 '16 at 20:47

Marc T

26
3

How to use SimpleModal in listView edit action

2 Answers2