ASP.NET MVC jQueryUI datepicker在使用AJAX.BeginForm时无法正常工作

时间:2009-03-26 16:42:03

标签: asp.net-mvc jquery-ui-datepicker

我有一个ASP.NET MVC Partial View,它包含一个配置为使用JQueryUI中的datepicker的Html.TextBox。这是通过确保样式设置为.datepicker来完成的。这一切都很好。但是我已经将表单更改为Ajax.BeginForm并包含一个Ajax.ActionLink,它在单击链接后显示它。由于添加此日期选择器不会显示。事实上,从控制器返回部分视图后,现在甚至没有调用以前工作过的JavaScript。即使我在部分视图本身中使用JavaScript / JQuery,它仍然不使用它。我真的很困惑,请有人帮忙吗?

以下示例

<div id="claims">
        <div id="divViewClaims">
            <% Html.RenderPartial("ViewClaim", Model.Claims ?? null); %>
        </div>
        <br /><br />
        <div id="claim">
            <% Html.RenderPartial("AddEditClaim", new Claim()); %>          
        </div>
    </div>

动作链接,当clickon调用Controller Action返回PartialView时,在OnSuccess上调用的JavaScript会触发,但之前没有任何其他内容,这些内容之前已被document.ready函数连接起来。我的所有脚本都是单独的文件,并在母版页中引用。

<%= Ajax.ActionLink(string.Format("Add A{0} Claim", Model.Count > 0 ? "nother" : string.Empty), "AddClaim", "Driver", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "claim", OnSuccess="showAddClaim" }, new { @class = "ControlLink" })%>

控制器操作

public ActionResult AddClaim()
{
      return PartialView("AddEditClaim", new Claim());
}

部分视图,显示样式设置为datepicker的文本框

<% var ajaxOptions = new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divViewClaims", InsertionMode = InsertionMode.Replace, OnSuccess="hideAddClaim" }; %>
        <% using (Ajax.BeginForm("AddEditClaim", "Claim", ajaxOptions, new { @name = "ClaimControl", @id = "ClaimControl" }))
           { %>

    <fieldset>  
        <legend><%= Model.Id==0?"Add":"Edit" %> Claim</legend> 
        <p>
            <label for="Title">Claim Date</label>
            <%= Html.TextBox("Date", Model.Date.ToString().TrimEnd('0', ':', ' ') ?? "", new { @class = "datepicker" })%>  
        </p>

我很感激你的帮助。

2 个答案:

答案 0 :(得分:3)

如果在document.ready之后创建元素,则应将元素重新匹配为jQuery。

查看jQuery Live

答案 1 :(得分:1)

对我有用的是使用AjaxOptions中的OnSuccess属性。所以,你的代码可能是这样的:

using (Ajax.BeginForm("AddEditClaim", "Claim", ajaxOptions, new { @name = "ClaimControl", @id = "ClaimControl", OnSuccess="the_javascript_function_below" })

其中the_javascript_function是执行此操作的函数的名称:

$(".datepicker").datepicker();