如何在 listView 编辑操作中使用 SimpleModal
How to use SimpleModal in listView edit action
我想将 SimpleModal 集成到我的 ListView edit
操作中,因此当用户单击 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>
我认为您正在寻找 link 按钮的 OnClientClick 函数。然后根据SimpleModal Website刚才javascript打开模态是:
$("#element-id").modal()
因此创建一个 JavaScript 函数来打开您的模式并使用它 OnClientClick。可以在 here 中找到这样做的示例。
您需要使用 ajax 调用 link 按钮 Edit Click 事件 为此,您需要将 OnClientClick 函数添加到 link按钮:
例如:
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# 中 代码隐藏
[WebMethod]
public static string GetSample(int param)
{
return GetData(param);
}
如果您的 Response 不为空,则成功,然后打开模式
我想将 SimpleModal 集成到我的 ListView edit
操作中,因此当用户单击 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>
我认为您正在寻找 link 按钮的 OnClientClick 函数。然后根据SimpleModal Website刚才javascript打开模态是:
$("#element-id").modal()
因此创建一个 JavaScript 函数来打开您的模式并使用它 OnClientClick。可以在 here 中找到这样做的示例。
您需要使用 ajax 调用 link 按钮 Edit Click 事件 为此,您需要将 OnClientClick 函数添加到 link按钮:
例如:
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# 中 代码隐藏
[WebMethod]
public static string GetSample(int param)
{
return GetData(param);
}
如果您的 Response 不为空,则成功,然后打开模式