ASP.NET文本框和jQuery UI DatePicker在执行回发时丢失值

Question

我有一个应用程序，它在ASP.NET文本框控件上使用jQuery UI DatePicker。

控件按预期工作，但我注意到当您从服务器调用（通过提交按钮）回发时，应用程序中输入的值会丢失。

想知道你们是否经历过这种情况？有什么措施可以防止这种情况发生吗？

<asp:TextBox runat="server" ID="txtCallsMadeFrom" class="field" EnableViewState="true">

var callsMadeFromId = '#<%=txtCallsMadeFrom.ClientID %>';
jQuery(callsMadeFromId).datepicker({ showOn: "button", buttonImage: "../images/calendar.gif", altFormat: 'dd/mm/yy', buttonImageOnly: true, onSelect: function () { } });

- mallows98

---

我有点惊讶... 我在我的应用程序中使用了一个日期选择器，在阅读了你的问题后，我检查了一下我的文本框是否在 postback 后保留了日期.. 它确实保留了，即使我在代码中加入了 EnableViewState="false"。 - Jishnu A P

我可以打赌他的控件被配置为ReadOnly="true"，因此导致了这种行为。我之前遇到过同样的问题 ;) - Flo.

Answer 1

我也遇到了这个问题，即使尝试在页面或控件上设置视图状态，也没有起作用。使用隐藏字段的方法需要我管理日期字段和隐藏字段之间的同步，因为用户正在更改日期。所以我决定在document.ready中再次设置日期，就像这篇文章中所说的那样，希望这能有所帮助。 http://www.himanshusaxena.net/asp-net-text-box-with-jquery-ui-date-picker-value-lost-on-a-post-back/

- Himanshu Kumar

Answer 2

您可以考虑将文本框的值保存在隐藏字段中。我在使用Jquery选项卡控件时也会这样做，因为它们在回传期间还会忘记选择哪个选项卡。

- Johnny DropTables

---

谢谢Johnny！我会采用这种方法。 :) - mallows98

抱歉，您的答案是错误的。我尝试重写 onunload() 事件，并将值放入文本框日历中，但数据丢失了。 - Ahmad Hindash

Answer 3

请确保您没有将<%@ Page EnableViewState="false"%>放在...如果您这样做了，您仍然可以通过<asp：TextBox runat="server" ID="txtCallsMadeFrom" class="field" ViewStateMode="Enabled">来打开个别控件的视图状态。

- Jishnu A P

---

谢谢@TheSuperTramp！我会记下来的。 - mallows98

Answer 4

这是我所做的。它可以在更新面板内或外工作，并在回发时保留值。

<script>
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) {
    $("#<%= txtTime.ClientID %>").timepicker({timeformat: 'HH:mm' }); 
    $( "#<%= txtDatePicker.ClientID %>" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});
</script>

这是我的更新面板中文本框的部分XAML代码。

<asp:UpdatePanel ID="UpdatePanel1" runat="server" style="margin-left: -4px" >
    <ContentTemplate>
    <table>
    <tr>
    //other controls.
    .
    .
    .
    <td><asp:TextBox ID="txtDatePicker" runat="server" Width="130px"></asp:TextBox></td>
    <td><asp:TextBox ID="txtTime" runat="server" Width="115" ></asp:TextBox></td>
    </tr>
    </table>
    </ContentTemplate>
</asp:UpdatePanel>

希望这能帮到其他人！

- Kim

Answer 5

使用这个解决方案，您不需要任何jQuery技巧。 您必须始终以 MM/DD/YYYY 格式将日期发送到每个 postback 的 TextBox 中，无论你是否使用 DD/MM/YYYY。

解决方案：

在 ASPX 中：

<script type="text/javascript">
$(function () {
    $("#txtFechaIni").datepicker();
    $('#txtFechaIni').datepicker('option', { dateFormat: 'dd/mm/yy' });            
});
</script>
<asp:TextBox ID="txtFechaIni" runat="server" MaxLength="10"></asp:TextBox>

在C#的codebehind中，使用Page_LoadComplete事件来在每次postback时将日期转换为MM/DD/YYYY格式。我使用这个事件是因为它是在Page_Unload之前执行的最后一件事情，这样你就不必在每个事件中都转换日期了。

protected void Page_LoadComplete(object sender, EventArgs e)
{
    if (txtFechaIni.Text.Length == 10)
    {
        //Transform DD/MM/YYYY to MM/DD/YYYY.
        txtFechaIni.Text = txtFechaIni.Text .Substring(3, 2) + "/" + txtFechaIni.Text .Substring(0, 2) + "/" + txtFechaIni.Text .Substring(6, 4)
    }
}

希望能对某些人有所帮助。

- Leo88