私のJavaScript:
/* Modal */
function DefaultModal() {
$(".ModalBox").dialog("open");
}
$(function () {
// Modal.
$(".ModalBox").dialog({
autoOpen: false,
height: 410,
resizable: false,
draggable: false,
width: 602,
modal: true,
open: function (type, data) {
// include modal into form
$(this).parent().appendTo($("form:first"));
},
buttons: {
"Confirm": function () {
}
},
close: function () {
//clear all text.
$(this).find(':text').val('');
}
});
});
モーダルを呼び出す方法は 2 つあります。
これは完璧に動作します:
<li><a href="javascript:void(0)" onclick="DefaultModal();">ADD contact</a></li>
これはそうではありません。一時テーブルからモーダルに編集するボタンが 1 つ必要です。
<asp:GridView ID="gvContato" runat="server" AutoGenerateColumns="False" OnRowCommand="RunComm"
DataKeyNames="IDCliente" AllowPaging="True" PageSize="10" Width="600px">
<Columns>
<asp:BoundField DataField="IDCliente" Visible="false" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
<asp:BoundField DataField="Email" HeaderText="E-mail" SortExpression="Email" />
<asp:ButtonField ButtonType="Button" CommandName="Edit" Text="Edit">
<ItemStyle HorizontalAlign="Center" />
</asp:ButtonField>
</Columns>
</asp:GridView>
protected void RunComm(object sender, GridViewCommandEventArgs e)
{
int IDSelecionado = (int)gvContato.DataKeys[Convert.ToInt32(e.CommandArgument)].Values[0];
switch (e.CommandName)
{
case "Edit":
if (IDSelecionado > 0)
{
ScriptManager.RegisterClientScriptBlock(this.upModalContato, this.upModalContato.GetType(), "Modal", "DefaultModal();", true);
}
break;
}
}
私の編集ボタンはこれを行っています:
彼は私のダイアログを開くだけでなく、それを私の体に表示します(モーダルとしてだけでなく、私のグリッドビューの下のDIVとしても)。それに加えて、情報を保存せずに(編集ボタンを使用して)ダイアログを開いたり閉じたりし続けると、すべてのテキストボックスにコンマが作成され続けます。JavaScriptで配列を行うときのように。
どうしてか分かりません!?
何か案は?ここで自分を理解できるようにしたかどうかはわかりません。そうでない場合は、行方不明だと言ってください。
ありがとうございます。それでは、お元気で。
編集:
PS: 私は UpdatePanel を使用しています!
EDIT2:タイプミス
EDIT3:なぜ私はこれをやっているのですか?
私の目標:
- データベースからのデータ (実際のデータ) を含む 1 つのグリッド ビューを読み込みます。
- 私のモーダル(一時データ)から保存されたこのグリッドビュー一時データに入れます。
- 一時データを永久に (モーダルで) 除外/編集します。
- 一時的に、実際のデータを (モーダルで) 除外/編集します。
すべての変更後、データベースに最終データ (一時データと実データ) を保存しました。
これを達成するために、データをビューステートに保存しています(私はひどいことを知っていますが、現時点ではアイデアがありません)
@NerdFuryソリューションに従って、私はこれを作成しました:(これはまだ必要として機能しません!彼はモーダルを開きますが、フィールドにデータをロードしません。このコードも、html 本文でテーブル (モーダル) を開きます。データ。)
Cシャープ:
protected void btnEditModal_Click(object sender, EventArgs e)
{
this.ddlDepartamentoContato.SelectedIndex = 1;
this.ddlCargoContato.SelectedIndex = 2;
this.ckAprovadorContato.Checked = true;
}
html:
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnEditModal" runat="server" Text="Edit" OnClientClick="DefaultModal();" CausesValidation="false" OnClick="btnEditModal_Click" />
</ItemTemplate>
</asp:TemplateField>
しかし、私はまだモーダルに問題があり、ダイアログが開きますが、テーブルも画面に表示されます。ボタンイベントでいくつかの静的データを使用して、それが機能しているかどうかを確認しました。彼はこのデータをモーダルではなくテーブルにロードしました。
PS: 私は考えました (少なくとも私は信じています)、問題は何ですか。
asp:UpdatePanel
コードから削除すると、データが読み込まれ、すべてが問題なく動作しますが、ポストバックが行われ、モーダルはほとんど表示されません! 彼は私の画面で「まばたき」するだけです。
私の実際のコードを見てください:
<asp:UpdatePanel ID="upModalContact" runat="server">
<ContentTemplate>
<table>
<tr>
<td>
<ul id="contatoModalButtonList">
<li><a href="javascript:void(0)" onclick="DefaultModal();">Add contact</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<asp:GridView ID="gvContact" runat="server" AutoGenerateColumns="False" OnPageIndexChanging="gvContact_PageIndexChanging"
DataKeyNames="IDCliente" AllowPaging="True" PageSize="10" Width="600px">
<Columns>
<asp:BoundField DataField="IDClient" Visible="false" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
<asp:BoundField DataField="Email" HeaderText="E-mail" SortExpression="Email" />
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnEditContactmodal" runat="server" Text="Edit" CausesValidation="false" OnClick="btnEditModal_Click" OnClientClick="DefaultModal();" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
と
<table class="ModalBox" title="Contact">
<tr>
<td colspan="2">
<p class="validateTips"> Fields required (*).</p>
</td>
</tr>
<tr>
<td align="left" width="130px">
<asp:Label Text="Name:" runat="server" ID="lblNameContact" />
</td>
<td>
<asp:TextBox runat="server" ID="txtNameContact" CssClass="classNameContact" Width="400px" MaxLength="50" /> <label>*</label>
</td>
</tr></table>