1、需求
【包装列表】包含:包装名称 长 宽 高 体积 箱内数量 装箱数(装箱数表示这种包装共有几箱)
其中【体积】应该由长宽高自动计算得来。
2、设计思路
长宽高字段都为NumberBox编辑框,给这三个字段都设置OnBlur事件即编辑任何一个字段后失去焦点就触发自动计算。
3、前端代码
<tr>
<td class="f-widget-header label">长(cm)
</td>
<td class="f-widget-content content">
<f:NumberBox ID="letxt_length" runat="server" EnableBlurEvent="true" OnBlur="price_Blur"></f:NumberBox>
</td>
<td class="f-widget-header label">宽(cm)
</td>
<td class="f-widget-content content">
<f:NumberBox ID="letxt_width" runat="server" EnableBlurEvent="true" OnBlur="price_Blur"></f:NumberBox>
</td>
</tr>
<tr>
<td class="f-widget-header label">高(cm)
</td>
<td class="f-widget-content content">
<f:NumberBox ID="letxt_height" runat="server" EnableBlurEvent="true" OnBlur="price_Blur"></f:NumberBox>
</td>
<td class="f-widget-header label">体积(cm³)
</td>
<td class="f-widget-content content">
<f:NumberBox ID="letxt_volume" runat="server" Readonly ="true"></f:NumberBox>
</td>
</tr>
EnableBlurEvent设置为true表示OnBlur权限为开启,此时输入OnBlur="",可以选择自动创建事件。
4、后端计算代码
//自动计算包装体积 体积 = 长X宽X高
protected void price_Blur(object sender, EventArgs e)
{
var length = ConvertEx.ToDecimal(letxt_length.Text);
var width = ConvertEx.ToDecimal(letxt_width.Text);
var height = ConvertEx.ToDecimal(letxt_height.Text);
var volume = length * width * height;
letxt_volume.Text = ConvertEx.ToString(volume);
}
事件名是price_Blur因为代码抄的价格自动计算的,还没有改,letxt_volume.Text即为体积需要显示的文本。
5、效果展示
体积字段已设置为只读,不可直接输入修改,数字计算得来