I am working on project Using ASP.Net MVC Razor views. I am using a partial view , that contains Telerk Datepicker and Dropdownlist , I am usig Jquery Ajax and append method s to get the partial view. The datepicker and Dropdownlist are not working in partial views that are called using jquery. I have seen the posts related to this.
http://www.telerik.com/community/forums/aspnet-mvc/datepicker/date-picker-and-all-javascript-including-client-validation-not-working-in-a-dynamically-loaded-partial-view.aspx
and
http://www.telerik.com/help/aspnet-mvc/using-with-partial-views-loaded-via-ajax.html
I registerd the scripts as well. But the problem is still not solved.
The code is like this .
Partial View:
<div>
@(Html.Telerik().DatePicker()
.Name(
"DatePicker")
.HtmlAttributes(new { id = "DatePicker_wrapper" })
.Value(Model.DOS))
</div>
<div>
@(Html.Telerik().DropDownList()
.Name(
"DOSStatus")
.BindTo(@ViewBag.ddlcontents)
.HtmlAttributes(new { style = "width: 60px" })
)
</div>Jquery In main View:
($(".defualtButton").live("click",function () {
$.ajax
({
url: "Home/DatePartialView",
contentType: 'application/json; charset=utf-8',
success: function (result) {
$(".addContent").append(result)
}
});
});
Controller:
public
class HomeController : Controller
{
// GET: /Home/
private DateContainerEntities1 db = new DateContainerEntities1();
private List<string> DDLContents = new List<string>();
// Controller constructor
public
HomeController()
{
DDLContents.Add("Open");
DDLContents.Add("Close");
ViewBag.ddlcontents = new SelectList(DDLContents);
}
public ActionResult Index()
{
return View(db.DateContainers);
}
public PartialViewResult DatePartialView() {
DateContainer dt = new DateContainer();
return PartialView(dt);
}
<!DOCTYPE html>
<html>
< head>
<title>@ViewBag.Title</title> <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/jquery.validate.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> <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group
.Add("telerik.common.css")
.Add("telerik.default.css")
.Combined(true).Compress(true)));
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
</head>
<body>
@RenderBody()
@(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
.Add("telerik.common.min.js")
.Add("telerik.calendar.min.js")
.Add("telerik.datepicker.min.js")
.Add("telerik.timepicker.min.js")
.Add("telerik.datetimepicker.min.js")
.Add("telerik.list.min.js")
)) ;
</body>
</html>
Every thing is working Fine , but only Date picker and dropdownlist are not coming in partial views. Please help to solve the problem.
Please help as early as possible.
Please provide the solution ASAP.
Thanks.