【发布时间】: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"> </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 => 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