これについて頭を悩ませています。行コマンドが起動しない理由がわかりません。
ページ読み込み時に空のグリッドがあります。ボタンをクリックすると、保存ボタンのあるモーダルが起動します。保存ボタンは、新しい行をデータテーブルにバインドしてグリッドに追加します。新しい行のリンクボタンをクリックすると=>行コマンドが起動しません。
以前のプロジェクトでこれを何度も行ってきましたが、これまでこの問題は発生していませんでした。Modal内のブートストラップバリデータが原因なのかな。
これは私のhtmlです:
<asp:UpdatePanel runat="server" ID="gridPanel" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView runat="server" ID="batchDetailGrid" CssClass="table table-responsive"
OnRowCommand="batchDetailGrid_RowCommand1">
<Columns>
<asp:TemplateField >
<ItemTemplate>
<asp:LinkButton id="cmdDelete" runat="server" class="btn "
CommandName ="DeleteRecord"
CommandArgument="<%# CType(Container,GridViewRow).RowIndex %>"
Text="" ToolTip="Delete Record">
<i class="glyphicon glyphicon-remove"></i>
</asp:LinkButton>
<asp:LinkButton ID="cmdEdit" CssClass="btn" runat="server"
CommandName ="EditRecord"
CommandArgument="<%# CType(Container,GridViewRow).RowIndex %>"
ToolTip="Edit Record">
<i class="glyphicon glyphicon-pencil"></i>
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="cmdCreate" EventName="click" />
<asp:AsyncPostBackTrigger ControlID="batchDetailGrid" EventName="rowcommand" />
</Triggers>
</asp:UpdatePanel>
<!-- Modal -->
<div class=" modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Card Details</h4>
</div>
<div class="modal-body">
<!--First Name Surname-->
<div class="form-group">
<asp:Label runat="server" CssClass="control-label col-md-2">First Name</asp:Label>
<div class="col-md-4">
<input type="text" name="firstname" id="firstname" class="form-control"
data-bv-notempty="true"
data-bv-notempty-message="First Name cannot be blank" />
</div>
<asp:Label runat="server" CssClass="control-label col-md-2">Surname</asp:Label>
<div class="col-md-4">
<input type="text" name="surname" id="surname" class="form-control"
data-bv-notempty="true"
data-bv-notempty-message="Surname cannot be blank"/>
</div>
</div>
<!--NRC-->
<div class="form-group">
<asp:Label runat="server" CssClass="control-label col-md-2">NRC</asp:Label>
<div class="col-md-4">
<input type="text" name="NRC" id="NRC" class="form-control"
data-bv-notempty="true"
data-bv-notempty-message="NRC cannot be blank"/>
</div>
</div>
<!--Current Card-->
<div class="form-group">
<asp:Label runat="server" CssClass="control-label col-md-2">Current Card</asp:Label>
<div class="col-md-4">
<input type="text" name="card" id="card" class="form-control"
data-bv-notempty="true"
data-bv-notempty-message="Current Card cannot be blank"/>
</div>
</div>
<!--Action-->
<div class="form-group">
<asp:Label runat="server" CssClass="control-label col-md-2">Requested Action</asp:Label>
<div class="col-md-4">
<input type="text" name="action" id="action" class="form-control"
data-bv-notempty="true"
data-bv-notempty-message="Action cannot be blank"/>
</div>
</div>
<!--Reason-->
<div class="form-group">
<asp:Label runat="server" CssClass="control-label col-md-2">Reason</asp:Label>
<div class="col-md-4">
<input type="text" name="reason" id="reason" class="form-control"
data-bv-notempty="true"
data-bv-notempty-message="Reason cannot be blank"/>
</div>
</div>
<!--Date requested-->
<div class="form-group">
<asp:Label runat="server" CssClass="control-label col-md-2">Date Requested</asp:Label>
<div class="col-md-4">
<input type="text" name="dtrequested" id="dtrequested" class="form-control"/>
</div>
</div>
<!--Re-issue Required-->
<div class="form-group">
<div class="col-md-offset-2 col-md-4">
<asp:CheckBox runat="server" ID="chkIssue" Checked="true" CssClass="checkbox" Text="Re-issue required" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<asp:UpdatePanel ChildrenAsTriggers="true" UpdateMode="Conditional" runat="server" ID="btnPanel">
<ContentTemplate>
<asp:Button runat="server" ID="cmdCreate" Text="Create Request" CssClass="btn btn-primary" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
これはjqueryです:
<script>
$(function () {
$('.btn').tooltip();
$('#cmdNewCard').click(function(){
$('#myModal').modal('show');
});
});
</script>
<script>
$(function () {
$('#dtrequested').datepicker({
autoclose: true
});
});
</script>
<script>
$(function () {
$('#form1').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
dtrequested: {
message: 'The Date is not valid',
validators: {
notEmpty: {
message: 'The date is required and cannot be empty'
},
date: {
format: 'MM/DD/YYYY',
message: 'The value is not a valid date'
}
}
},
}
})
.on('success.form.bv', function (e) {
var $form = $(e.target),
validator = $form.data('bootstrapValidator'),
submitButton = validator.getSubmitButton();
});
$('#dtrequested').on('change', function (e) {
// Validate the date when user change it
$('#form1').bootstrapValidator('revalidateField', 'dtrequested');
});
});
</script>
これは、cmdCreate_click のサーバー コードと、起動していない rowCommand です。
Private Sub loadGrid(Optional index As Integer = 0)
With batchDetailGrid
.AutoGenerateColumns = True
.DataSource = ViewState("Batch")
.PageIndex = index
.DataBind()
End With
End Sub
Protected Sub batchDetailGrid_RowCommand1(sender As Object, e As GridViewCommandEventArgs)
MsgBox("")
If (e.CommandName = "EditRecord") Then
MsgBox("editing")
Dim index As Integer = (e.CommandArgument)
Dim row As GridViewRow = batchDetailGrid.Rows(index)
ScriptManager.RegisterStartupScript(Page, GetType(Page), "Modal", "$(#myModal).modal('show');", True)
End If
End Sub