Jak korzystać SimpleModal w ListView edycji akcji

Question

Chcę zintegrować SimpleModal Moje ListView edit działania tak, gdy użytkownik kliknij edit, modalne okienko z danymi załadowany przez ajax edytować formularz.

mój prosty 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> 

---

mój kod Bind:

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

---

Od 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

Trzeba użyć ajax wzywającą LinkButton Edit zdarzenia Click Do tego trzeba dodać funkcję OnClientClick przycisku link:

Ex:

OnClientClick="GetRecords();" 

Oto twoi GetRecords Kod wywołania metody ajaxowej:

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

W języku C# kodzie

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

Tak na sukces, jeśli odpowiedź nie jest pusta otwórz modalnych

Answer 2

Myślę, że szukasz funkcji OnClientClick przycisku łącza. Następnie, zgodnie z SimpleModal Website tylko javascript, aby otworzyć modalnego:

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

Więc dokonać funkcji JavaScript, który otwiera swoje modal i używać go OnClientClick. Przykład tego można znaleźć here.