I am having some problems here-Date Picker and all javascript including client validation not working in a Dynamically loaded Partial View
I am working with ASP.NET MVC 3 (Razor) I loaded a partial view by holds a form by clicking on Ajax Link that is located on my view as follows
@Ajax.ActionLink("Students List", "Create", "Student", new AjaxOptions {OnSuccess = "updatePlaceholder", UpdateTargetId = "holder" })
The partial view loads properly, but I discovered that the Telerek DatePicker isn't showing when I click on the button to bring it down and also client side validations arent working also. I followed the approch described here but it still insn't working http://www.telerik.com/help/aspnet-mvc/using-with-partial-views-loaded-via-ajax.html My code is below
HERE IS MY VIEW
@Ajax.ActionLink("Students List", "Create", "Student", new AjaxOptions {OnSuccess = "updatePlaceholder", UpdateTargetId = "holder" })
function updatePlaceholder(context) { // the HTML output of the partial view var html = context.get_data(); // the DOM element representing the placeholder var placeholder = context.get_updateTarget(); // use jQuery to update the placeholder. It will execute any JavaScript statements $(placeholder).html(html); // return false to prevent the automatic update of the placeholder return false; }HERE IS MY PARTIALVIEW
@model MyUniversity.Models.Student
@using (Ajax.BeginForm(new AjaxOptions {UpdateTargetId="holder"})) { @Html.ValidationSummary(true) Student @Html.Telerik().DateTimePicker().Name("EnrollmentDate").Value(DateTime.Now.ToString()) @Html.ValidationMessageFor(model => model.EnrollmentDate)
<p>
开发者_Go百科 <input type="submit" value="Create" />
</p>
</fieldset>
}
@Html.ActionLink("Back to List", "Index")Here is my _Layout.cshtml with the registered scripts
@ViewBag.Title
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftAjax.debug.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js")" type="text/javascript"></script>
@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.telerik.css").Combined(true).Compress(true)))
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
@(Html.Telerik().ScriptRegistrar().Globalization(true).DefaultGroup(group => group.Combined(true).Compress(true)))
I have partial view that is loaded without Ajax. I had trouble making both the validation and Telerik datepicker popup to work. On my partial view I added the three scripts for validation:
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
But with this the popup wouldnt work, so I added these scripts to my _layout.cshtml
just before:
@Html.Telerik().ScriptRegistrar()
I had already registered the following scripts on the _layout.cshtml
page on the top:
<script src="@Url.Content("~/Scripts/MicrosoftAjaxTemplates.debug.js")" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ui/jquery.ui.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ui/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.tabs.js")" type="text/javascript"></script>
<!-- Telerik Extensions for MVC Scripts -->
<script src="@Url.Content("~/Scripts/2011.2.712/telerik.combobox.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/2011.2.712/telerik.grid.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/2011.2.712/telerik.grid.editing.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/2011.2.712/telerik.grid.filtering.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/2011.2.712/telerik.grid.grouping.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/2011.2.712/telerik.grid.reordering.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/2011.2.712/telerik.grid.resizing.min.js")" type="text/javascript"></script>
<script src="../../Scripts/2011.2.712/telerik.datetimepicker.min.js" type="text/javascript"></script>
<script src="../../Scripts/2011.2.712/telerik.datepicker.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
After that all seems to work fine.
精彩评论