如何在listView编辑动作中使用SimpleModal
本文关键字：SimpleModal listView 编辑 | 更新日期: 2023-09-27 18:04:45
我想集成SimpleModal在我的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>
我的绑定代码:
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>
您需要使用ajax调用linkbutton Edit Click事件。为此，您需要添加OnClientClick函数到链接按钮:
,
OnClientClick="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();
}
}
In c# Codebehind
[WebMethod]
public static string GetSample(int param)
{
return GetData(param);
}
So On Success如果你的Response不是空的，那么打开Modal
我想你正在寻找链接按钮的OnClientClick函数。然后根据SimpleModal网站只是javascript打开模态是:
$("#element-id").modal()
所以创建一个JavaScript函数来打开你的模式，并使用它OnClientClick。在这里可以找到一个这样做的例子。