Index.cshtml
<div id="main">
@Html.EJ().Button("click").Text("Render Grid")
</div>
<script type="text/javascript">
$("#click").click(function () {
$.ajax
({
url: "/Home/Productpartial",
type: 'GET',
success: function (data) {
$("#main").html(data);
}
});
});
</script>
_partial.cshtml
@{
Html.EJ()
.Autocomplete("SelectID")
.Datasource((IEnumerable<object>)ViewBag.data)
.WatermarkText("Select Customer ID")
.AutocompleteFields(f => f.Key("CustomerID").Text("CustomerID"))
.Render();
}
@(Html.EJ().Grid<Object>("Grid")
.Datasource((IEnumerable<Object>)ViewBag.data)
.AllowPaging()
.. .
. . .
)
@Html.EJ().ScriptManager()@*for non-unobtrusive mode, it must be given in partial view*@
namespace SampleApp.Controllers
{
public class HomeController : Controller
{
[HttpGet]
public ActionResult Productpartial()
{
var DataSource = new NorthwindDataContext().OrdersViews.ToList();
ViewData["data"] = DataSource;
return PartialView("_partial", ViewData);
}
}
} |
Web.config
<appSettings>
. . .
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
_layout.cshtml
<!DOCTYPE html>
<html>
<head>
. . . . ..
<script src="~/Scripts/ej/ej.web.all.min.js"></script>
<script src="~/Scripts/ej/ej.unobtrusive.min.js"></script>
</head>
<body>
@RenderBody()
@(Html.EJ().ScriptManager())
</body>
</html>
Index.cshtml
<div id="main">
@Html.EJ().Button("click").Text("Render Grid")
</div>
<script type="text/javascript">
$("#click").click(function () {
$.ajax
({
url: "/Home/Productpartial",
type: 'GET',
success: function (data) {
$("#main").html(data);
ej.widget.init($("#main")); // Initiate control rendering
}
});
});
</script>
_partial.cshtml
@{
Html.EJ()
.Autocomplete("SelectID")
.Datasource((IEnumerable<object>)ViewBag.data)
.WatermarkText("Select Customer ID")
.AutocompleteFields(f => f.Key("CustomerID").Text("CustomerID"))
.Render();
}
@(Html.EJ().Grid<Object>("Grid")
.Datasource((IEnumerable<Object>)ViewBag.data)
.AllowPaging()
.. .
. . .
)
|