Category / Section
How to render our controls via ajax partialview in unobtrusive true mode?
1 min read
Description
While rendering our Syncfusion controls inside the partialview which is called through AJAX call in UnobtrusiveJavaScriptEnable true mode. Please follow the below steps,
- We have to set UnobtrusiveJavaScriptEnabled as true in the web.config page
<configuration> <appSettings> <add key="webpages:Version" value="3.0.0.0" /> <add key="webpages:Enabled" value="false" /> <add key="ClientValidationEnabled" value="true" /> <add key="UnobtrusiveJavaScriptEnabled" value="true" /> <add key="vs:EnableBrowserLink" value="false" /> </appSettings> </configuration>
- You need to refer the dependent Script and CSS files in the _Layout.cshtml.
[HTML]
<link href="@Url.Content("~/Content/ej/web/Default-theme/ej.widgets.all.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>
<script src="@Url.Content("~/Scripts/jsrender.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.easing.1.3.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.globalize.min.js")"></script>
<script src="@Url.Content("~/Scripts/ej/ej.web.all.js")"></script>
<script src="@Url.Content("~/Scripts/ej/ej.unobtrusive.min.js")"></script>
- Then initialize our control by using the “ej.widget.init” method in the AJAX success function.
[HTML]
<div id="updatePartialview"></div>
[JavaScript]
<script>
function onclick() {
$.ajax({
url: '/Dialog/Buttonview',
success: onSuccess
});
}
function onSuccess(result) {
$("#updatePartialview").html(result);
ej.widget.init($("#updatePartialview"));
}
</script>
