【问题标题】:Bootstrap modal form doesn't show dataBootstrap 模态表单不显示数据
【发布时间】:2021-02-14 16:24:44
【问题描述】:

我正在开发一个 ASP.NET 网络表单应用程序,但我遇到了一个小问题。 该页面包含一个显示办公记录列表的 GridView 控件,用户可以添加新记录或编辑现有记录。 无论哪种方式,都会启动一个 Bootstrap 模态表单。当用户单击 GridView 中的“编辑”按钮时,它会使用所选行的 DataKey 值加载完整记录,并且应该填充模态表单的字段,然后显示。

问题是,所有这些都有效,除了当表单打开时,字段是空白的。该记录确实从数据库中加载,并且在 ASP.NET 代码中或在调试模式下的 javascript 控制台中都不会发生错误。我是否遗漏了一些关于这应该如何工作的内容?

模态代码如下:

            <div class="modal fade" id="mdlOffice" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel">Add/Edit Office Record</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group row">
                                <label for="tbOfficeName" class="col-md-3 text-right col-form-label">Office Name:</label>
                                <div class="col-md-9 d-flex">
                                    <asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbOfficeName" runat="server"
                                        MaxLength="32" ClientIDMode="static" />
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="tbOfficeMgr" class="col-md-3 text-right col-form-label">Office Manager:</label>
                                <div class="col-md-9 d-flex">
                                    <asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbOfficeMgr" runat="server"
                                        MaxLength="32" ClientIDMode="Static" />
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="tbAddress1" class="col-md-3 text-right col-form-label">Street Address:</label>
                                <div class="col-md-9 d-flex">
                                    <asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbAddress1" runat="server"
                                        MaxLength="32" ClientIDMode="Static" />
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-3">&nbsp;</div>
                                <div class="col-md-9 d-flex">
                                    <asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbAddress2" runat="server"
                                        MaxLength="32" ClientIDMode="Static" />
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="tbCity" class="col-md-3 text-right col-form-label">City:</label>
                                <div class="col-md-3 d-flex">
                                    <asp:TextBox CssClass="form-control input-md rounded w-100" ID="tbCity" runat="server"
                                        MaxLength="32" ClientIDMode="Static" />
                                </div>
                                <label for="tbZIP" class="col-md-3 text-right col-form-label">ZIP Code:</label>
                                <div class="col-md-3 d-flex">
                                    <asp:TextBox CssClass="form-control input-md rounded w-100" ID="tbZIP" runat="server"
                                        MaxLength="32" ClientIDMode="static" />
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="tbPhone" class="col-md-3 text-right col-form-label">Telephone:</label>
                                <div class="col-md-9 d-flex">
                                    <asp:TextBox ID="tbPhone" CssClass="form-control input-md rounded w-50" runat="server" ClientIDMode="Static" />
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="tbLocalRate" class="col-md-3 text-right col-form-label">Local Rate:</label>
                                <div class="col-md-3 d-flex">
                                    <input type="number" id="tbLocalRate" placeholder="0.5" step="0.05" min="0" max="1" runat="server"
                                        class="form-control input-md rounded w-50" />
                                </div>
                                <label for="tbGlobalRate" class="col-md-3 text-right col-form-label">Global Rate:</label>
                                <div class="col-md-3 d-flex">
                                    <input type="number" id="tbGlobalRate" placeholder="0.5" step="0.05" min="0" max="1" runat="server"
                                        class="form-control input-md rounded w-50" />
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="tbLocalRateCap" class="col-md-3 text-right col-form-label">Rate Cap:</label>
                                <div class="col-md-3 d-flex">
                                    <asp:TextBox ID="tbLocalRateCap" ClientIDMode="Static" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$"
                                        value="" data-type="currency" placeholder="$50.00" runat="server"
                                        CssClass="form-control input-md rounded w-50" />
                                </div>

                            </div>
                        </div>
                        <input type="hidden" id="tbID" runat="server" />
                        <div class="modal-footer">
                            <asp:Button ID="btnSave" runat="server" CssClass="btn btn-success" Text="Save Changes" OnClick="BtnSave_Click" />
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel/Close</button>
                        </div>
                    </div>
                </div>
            </div>

ASP.NET 代码隐藏文件中用于将 GridView 中的选定记录加载到模态中的代码如下:

        protected void GvOffices_RowCommand ( object sender, GridViewCommandEventArgs e ) {
            int dataKeyValue = (int)gvOffices.DataKeys[int.Parse(e.CommandArgument.ToString())].Value;
            var ofc=OfficeDB.Get(dataKeyValue, out bool ok, out string err);
            
            tbAddress1.Text = ofc.Address1;
            tbAddress2.Text = ofc.Address2;
            tbCity.Text = ofc.City;
            tbGlobalRate.Value = ofc.GlobalRate.ToString ( );
            tbLocalRate.Value = ofc.LocalRate.ToString ( );
            tbLocalRateCap.Text = string.Format ( "${0}", ofc.LocalRateCap );
            tbOfficeMgr.Text = ofc.OfficeMgr;
            tbOfficeName.Text = ofc.OfficeName;
            tbPhone.Text = ofc.OfficePhone;
            tbZIP.Text = ofc.ZIPCode;
            tbID.Value = ofc.ID.ToString ( );
            
            ScriptManager.RegisterStartupScript ( this, this.GetType ( ), "Pry", "openModal()", true );

        }

同样,所有这些代码都可以正常工作而不会引发任何类型的错误,并且确实会通过自定义对象从数据库中加载记录:

    var ofc=OfficeDB.Get(dataKeyValue, out bool ok, out string err);

不过,我不明白为什么没有填充表单字段。请帮忙?

【问题讨论】:

  • 我看不到,@model 我也看不到 @Html.DisplayFor(x =&gt; x.something)
  • 这是一个 ASP.NET WebForms 应用,不是 MVC 或 Razor
  • 这里的问题很多。一方面,您不能弹出模型表单,然后会发生任何回发。 (浏览器页面向上移动到服务器 - 运行代码,然后将整个页面重新发送回客户端以重新绘制。任何回发都会吹出您刚刚启动的对话框。然后显示对话框表单再次,在该对话框表单中的任何回发都会使对话框崩溃。jQuery.ui 对话框更干净,更灵活,它们的工作效率比引导对话框好 100 倍。我强烈建议使用 jquery.ui(但同样的回发规则也适用于 jquery .ui 对话)。
  • 我认为只是导航到新页面(使用 server.redirect 代替 response.rediect 会更好地编辑详细信息(原因是您可以继续使用标准按钮和回发事件-如果您使用 BS 对话框表单,则不能使用回发或服务器逻辑(除非您使用 ajax 调用)。鉴于我的 cmets?我会看看您发布的内容 - 看看我是否可以制作一个解决方案,但是除非您想编写大量 JavaScipt 并在该对话框表单中使用 ajax 命令,否则您会打一场失败的战斗。
  • 你必须在后面的代码运行之后弹出对话框——而不是之前!!!

标签: c# asp.net bootstrap-4


【解决方案1】:

好吧,事实证明答案是将模式代码包装在 UpdatePanel 控件中,如下所示:

            <asp:UpdatePanel ID="updModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                <ContentTemplate>
                    <div class="modal fade" id="mdlOffice" tabindex="-1" role="dialog">
                        <div class="modal-dialog modal-dialog-centered modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel">Add/Edit Office Record</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="form-group row">
                                        <label for="tbOfficeName" class="col-md-3 text-right col-form-label">Office Name:</label>
                                        <div class="col-md-9 d-flex">
                                            <asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbOfficeName" runat="server"
                                                MaxLength="32" ClientIDMode="static" />
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="tbOfficeMgr" class="col-md-3 text-right col-form-label">Office Manager:</label>
                                        <div class="col-md-9 d-flex">
                                            <asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbOfficeMgr" runat="server"
                                                MaxLength="32" ClientIDMode="Static" />
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="tbAddress1" class="col-md-3 text-right col-form-label">Street Address:</label>
                                        <div class="col-md-9 d-flex">
                                            <asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbAddress1" runat="server"
                                                MaxLength="32" ClientIDMode="Static" />
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-md-3">&nbsp;</div>
                                        <div class="col-md-9 d-flex">
                                            <asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbAddress2" runat="server"
                                                MaxLength="32" ClientIDMode="Static" />
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="tbCity" class="col-md-3 text-right col-form-label">City:</label>
                                        <div class="col-md-3 d-flex">
                                            <asp:TextBox CssClass="form-control input-md rounded w-100" ID="tbCity" runat="server"
                                                MaxLength="32" ClientIDMode="Static" />
                                        </div>
                                        <label for="tbZIP" class="col-md-3 text-right col-form-label">ZIP Code:</label>
                                        <div class="col-md-3 d-flex">
                                            <asp:TextBox CssClass="form-control input-md rounded w-100" ID="tbZIP" runat="server"
                                                MaxLength="32" ClientIDMode="static" />
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="tbPhone" class="col-md-3 text-right col-form-label">Telephone:</label>
                                        <div class="col-md-9 d-flex">
                                            <asp:TextBox ID="tbPhone" CssClass="form-control input-md rounded w-50" runat="server" ClientIDMode="Static" />
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="tbLocalRate" class="col-md-3 text-right col-form-label">Local Rate:</label>
                                        <div class="col-md-3 d-flex">
                                            <input type="number" id="tbLocalRate" placeholder="0.5" step="0.05" min="0" max="1" runat="server"
                                                class="form-control input-md rounded w-50" />
                                        </div>
                                        <label for="tbGlobalRate" class="col-md-3 text-right col-form-label">Global Rate:</label>
                                        <div class="col-md-3 d-flex">
                                            <input type="number" id="tbGlobalRate" placeholder="0.5" step="0.05" min="0" max="1" runat="server"
                                                class="form-control input-md rounded w-50" />
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="tbLocalRateCap" class="col-md-3 text-right col-form-label">Rate Cap:</label>
                                        <div class="col-md-3 d-flex">
                                            <asp:TextBox ID="tbLocalRateCap" ClientIDMode="Static" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$"
                                                value="" data-type="currency" placeholder="$50.00" runat="server"
                                                CssClass="form-control input-md rounded w-50" />
                                        </div>

                                    </div>
                                </div>
                                <input type="hidden" id="tbID" runat="server" />
                                <div class="modal-footer">
                                    <asp:Button ID="btnSave" runat="server" CssClass="btn btn-success" Text="Save Changes" OnClick="BtnSave_Click" />
                                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel/Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>

然后,在代码隐藏中,将这行代码添加到 GridView 控件的 RowCommand 事件中,就在调用脚本代码以显示模式之前:

    updModal.Update ( );

这允许我从代码隐藏中填充表单的字段并在单击 GridView 时显示它们。

感谢你们中的一些人给我的反馈。祝你有美好的一天!

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-01-30
    • 2018-01-03
    • 2019-01-09
    • 1970-01-01
    • 2016-04-06
    • 2019-07-27
    • 1970-01-01
    • 2021-09-19
    相关资源
    最近更新 更多