Panel按钮单击后，Panel ASP.NET中隐藏字段的值为空值

Question

我的HTML中有这样的面板：

<asp:Panel ID="cropPanel" runat="server">
    <div class="col-xs-6">
        <h3 style="text-align:center; text-decoration:solid;">Before image: </h3>
        <img style="width:100%;" id="before" src="" runat="server" />
        <asp:HiddenField ID="X1" runat="server" />
        <asp:HiddenField ID="Y1" runat="server" />
        <asp:HiddenField ID="W1" runat="server" />
        <asp:HiddenField ID="H1" runat="server" />

    </div>

    <!-- After image -->
    <div class="col-xs-6">
        <h3 style="text-align:center; text-decoration:solid;">After image: </h3>
        <img style="width:100%;" id="after" src="" runat="server" />
        <asp:HiddenField ID="X2" runat="server" />
        <asp:HiddenField ID="Y2" runat="server" />
        <asp:HiddenField ID="W2" runat="server" />
        <asp:HiddenField ID="H2" runat="server" />
    </div>
</asp:Panel>

这是使用jQuery / JavaScript获取裁剪图像新尺寸的逻辑，如下所示：

$('#<%=before.ClientID%>').Jcrop({
    onSelect: SelectCropArea

});

function SelectCropArea(c) {
    $('#<%=X1.ClientID%>').val(parseInt(c.x1));
    $('#<%=Y1.ClientID%>').val(parseInt(c.y1));
    $('#<%=W1.ClientID%>').val(parseInt(c.w1));
    $('#<%=H1.ClientID%>').val(parseInt(c.h1));
}
$('#<%=after.ClientID%>').Jcrop({
    onSelect: SelectCropArea2
});

function SelectCropArea2(c) {
    $('#<%=X2.ClientID%>').val(parseInt(c.x2));
    $('#<%=Y2.ClientID%>').val(parseInt(c.y2));
    $('#<%=W2.ClientID%>').val(parseInt(c.w2));
    $('#<%=H2.ClientID%>').val(parseInt(c.h2));
}

当我按下链接按钮事件时：

<asp:LinkButton ID="linkCrop" OnClick="linkCrop_Click" runat="server">Save & Upload</asp:LinkButton>

代码背后：

Rectangle CropAreaBefore = new Rectangle(Int32.Parse(X1.Value), Int32.Parse(Y1.Value), Int32.Parse(W1.Value), Int32.Parse(H1.Value));
Rectangle CropAreaAfter = new Rectangle(Int32.Parse(X2.Value), Int32.Parse(Y2.Value), Int32.Parse(W2.Value), Int32.Parse(H2.Value));

//The `X1/Y1/W1/H1 and X2/Y2/W2/H2 are empty

我在这里做错了什么？

编辑：我检查了是否在jquery中正确设置了值，它们是，这里是显示它的图片：