Develop Reference

two way data binding between view and controller mvc5

I am writing the web application which allows you to optimize SQL query.
I have such a view:
<div id="codeeditor" style="margin-right:20px; float:left" >
<script>
var editor = CodeMirror(document.getElementById("codeeditor"), {
mode: "sql",
theme: "dracula",
tabSize: 5,
lineNumbers: true,
});
editor.setSize(500, 500);
</script>
<input type="submit" value="start" id="btnClick" />
</div>
<div id="codeeditor1">
<script>
var editor1 = CodeMirror(document.getElementById("codeeditor1"), {
mode: "sql",
theme: "dracula",
tabSize: 5,
lineNumbers: true,
});
editor1.setSize("45%", 500);
</script>
</div>
#section scripts{
<script type="text/javascript">
$(document).ready(function () {
$("#btnClick").click(function () {
var f = {};
f.url = '#Url.Action("Demo", "Home")';
f.type = "POST";
f.dataType = "json";
f.data = JSON.stringify({ sourceSqlCode: editor.getValue() });
f.contentType = "application/json";
editor1.setValue(#ViewBag.readyQuery);
f.success = function (response) {
alert("success");
};
f.error = function (response) {
alert("err");
};
$.ajax(f);
});
});
</script>
}
Here is my controller which handles button clicking
[HttpPost]
public ActionResult Demo(string sourceSqlCodee)
{
//here I use my libraries and optimize query
ViewBag.readyQuery= optimizedQuery;
return View();
}
All I need Is to pass query to controller by clicking the button and pass it back to the view after modifying into the codeeditor1
It simply doesn't work because scripts are being run earlier than my controller method. How can I do that? Thanks!

I think you should just return a string in your controller action, like:
[HttpPost]
public string Demo(string sourceSqlCode)
{
//here I use my libraries and optimize query
return optimizedQuery;
}
Then, in your AJAX success method, do something like:
f.success = function (response) {
editor1.setValue(response);
};

Data model is not getting deserialised in controller

Here is my model class
public class ProductModel
{
public Product {set;set;} // Product is one more class
}
I am using below javascript code to get partial view but 'model' is not getting deserialised in controller...What I am missing?
Storing data in a HTML attribute as shown below
JavaScriptSerializer serializer = new JavaScriptSerializer();
var jsonObject = serializer.Serialize(obj)
<span data-singleproduct="#jsonObject" id="#mprodid" class="ShowProductModal">Find out more..</span>
Used jQuery to call partial page and popup
$('.ShowProductModal').on('click', function () {
var model = $(this).data('singleproduct');
//I can see data of variable model here in developer tool
$("#ProductModal").dialog({
autoOpen: true,
position: { my: "center", at: "top+350", of: window },
width: 1000,
resizable: false,
title: '',
modal: true,
open: function () {
$(this).load('ShowProductModal', model );
},
buttons: {
}
});
return false;
});
Here is my controller code
public PartialViewResult ShowProductModal(ProductModel product)
{
return PartialView("ProductModal", product);
}
product always comes as null!!!
If I change ProductModel to Product , then it will work... ! CAN SOMEONE HELP ME?
public PartialViewResult ShowProductModal(Product product)
{
return PartialView("ProductModal", product);
}

You should try
$(this).load('ShowProductModal', { product: model });
And declare your method like this:
[HttpPost]
public PartialViewResult ShowProductModal([FromBody] JObject data)
{
var product = data["product"].ToObject<ProductModel>();
return PartialView("_SC5ProductModal", product);
}

performcallback gridview after combobox filtering

can you help me to fix my problem, I made gridview, and I use combobox to filter data in gridview and get gridview performcallback after filter, but gridview not callback after filter. how can I do ? Help me Please?
this is some code :
controller gridview filter :
[HttpPost]
public ActionResult FilterTypePro(String typePro)
{
//Session["typePro"] = typePro;
var model = Model._ProposalObject.ListDataProposal();
if (typePro != null && typePro != string.Empty)
{
model = Model._ProposalObject.ListDataProposal(typePro);
}
return PartialView("_gvPartialViewProposals", model);
}
and this is code to get value filter combobox :
function OnClickFilter(type) {
type = cbTypeProposal.GetValue();
$.ajax({
type: "POST",
cache: false,
async: false,
url: '#Url.Action("FilterTypePro", "App")',
data: { 'typePro': type },
success: function (data) {
/*gvPartialViewProposals.AdjustControl();
try {
gvPartialViewProposals.PerformCallback();
}
catch(er){
}*/
gvPartialViewProposals.Refresh(data);
}
});
}
and this is code to view cshtml :
groupItem.Items.Add(item =>
{
item.Caption = "Type Of Proposal";
item.Width = 400;
item.SetNestedContent(() =>
{
ViewContext.Writer.Write("<table><tr><td>");
Html.DevExpress().ComboBox(cmbSettings =>
{
cmbSettings.Name = "cbTypeProposal";
cmbSettings.Width = 100;
cmbSettings.Properties.DropDownStyle = DropDownStyle.DropDownList;
cmbSettings.ShowModelErrors = true;
cmbSettings.Properties.Items.Add("ATL", "ATL");
cmbSettings.Properties.Items.Add("BTL", "BTL");
cmbSettings.Properties.ClientSideEvents.SelectedIndexChanged = "function(s, e) { OnClickFilter();}";
}).Render();
ViewContext.Writer.Write("</td></tr></table>");
});
}); ;
}).GetHtml();
I hope you can help me.

Modify your javascript function as follows:
function OnClickFilter(type){
type = cbTypeProposal.GetValue();
gvPartialViewProposals.PerformCallback({
'typePro': type
});
}
Modify your grid settings as follows:
settings.Name = "gvPartialViewProposals";
settings.CustomActionRouteValues = new { Controller = "App", Action = "FilerTypePro" };

Jquery Context Menu ajax fetch menu items

I have a jquery context menu on my landing page where I have hardcode menu items. Now I want to get the menu items from server. Basically the idea is to show file names in a specified directory in the context menu list and open that file when user clicks it...
This is so far I have reached..
***UPDATE***
C# code
[HttpPost]
public JsonResult GetHelpFiles()
{
List<Manuals> manuals = null;
var filesPath = Server.MapPath(#"\HelpManuals");
var standardPath = new DirectoryInfo(filesPath);
if (standardPath.GetFiles().Any())
{
manuals = standardPath.GetFiles().Select(x => new Manuals
{
Name = GetFileNamewithoutExtension(x.Name),
Path = x.Name
}).ToList();
}
return Json(manuals, JsonRequestBehavior.AllowGet);
}
private string GetFileNamewithoutExtension(string filename)
{
var extension = Path.GetExtension(filename);
return filename.Substring(0, filename.Length - extension.Length);
}
JavaScript Code
$.post("/Home/GetHelpFiles", function (data) {
$.contextMenu({
selector: '#helpIcon',
trigger: 'hover',
delay: 300,
build: function($trigger, e) {
var options = {
callback: function(key) {
window.open("/HelpManuals/" + key);
},
items: {}
};
$.each(data, function (item, index) {
console.log("display name:" + index.Name);
console.log("File Path:" + index.Path);
options.items[item.Value] = {
name: index.Name,
key: index.Path
}
});
}
});
});
Thanks to Matt. Now, the build function gets fire on hover.. but im getting illegal invocation... and when iterating through json result, index.Name and this.Name gives correct result. But item.Name doesn't give anything..

to add items to the context menu dynamically you need to make a couple changes
$.contextMenu({
selector: '#helpIcon',
trigger: 'hover',
delay: 300,
build: function($trigger, e){
var options = {
callback: function (key) {
var manual;
if (key == "adminComp") {
manual = "AdminCompanion.pdf";
} else {
manual = "TeacherCompanion.pdf";
}
window.open("/HelpManuals/" + manual);
},
items: {}
}
//how to populate from model
#foreach(var temp in Model.FileList){
<text>
options.items[temp.Value] = {
name: temp.Name,
icon: 'open'
}
</text>
}
//should be able to do an ajax call here but I believe this will be called
//every time the context is triggered which may cause performance issues
$.ajax({
url: '#Url.Action("Action", "Controller")',
type: 'get',
cache: false,
async: true,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (_result) {
if (_result.Success) {
$.each(_result, function(item, index){
options.items[item.Value] = {
name: item.Name,
icon: 'open'
}
});
}
});
return options;
}
});
so you use build and inside of that define options and put your callback in there. The items defined in there is empty and is populated in the build dynamically. We build our list off of what is passed through the model but I believe you can put the ajax call in the build like I have shown above. Hopefully this will get you on the right track at least.

I solved this problem the following way.
On a user-triggered right-click I return false in the build-function. This will prevent the context-menu from opening. Instead of opeing the context-menu I start an ajax-call to the server to get the contextMenu-entries.
When the ajax-call finishes successfully I create the items and save the items on the $trigger in a data-property.
After saving the menuItems in the data-property I open the context-menu manually.
When the build-function is executed again, I get the items from the data-property.
$.contextMenu({
build: function ($trigger, e)
{
// check if the menu-items have been saved in the previous call
if ($trigger.data("contextMenuItems") != null)
{
// get options from $trigger
var options = $trigger.data("contextMenuItems");
// clear $trigger.data("contextMenuItems"),
// so that menuitems are gotten next time user does a rightclick
// from the server again.
$trigger.data("contextMenuItems", null);
return options;
}
else
{
var options = {
callback: function (key)
{
alert(key);
},
items: {}
};
$.ajax({
url: "GetMenuItemsFromServer",
success: function (response, status, xhr)
{
// for each menu-item returned from the server
for (var i = 0; i < response.length; i++)
{
var ri = response[i];
// save the menu-item from the server in the options.items object
options.items[ri.id] = ri;
}
// save the options on the table-row;
$trigger.data("contextMenuItems", options);
// open the context-menu (reopen)
$trigger.contextMenu();
},
error: function (response, status, xhr)
{
if (xhr instanceof Error)
{
alert(xhr);
}
else
{
alert($($.parseHTML(response.responseText)).find("h2").text());
}
}
});
// This return false here is important
return false;
}
});

I have finally found a better solution after reading jquery context menu documentation, thoroughly..
C# CODE
public JsonResult GetHelpFiles()
{
List<Manuals> manuals = null;
var filesPath = Server.MapPath(#"\HelpManuals");
var standardPath = new DirectoryInfo(filesPath);
if (standardPath.GetFiles().Any())
{
manuals = standardPath.GetFiles().Select(x => new Manuals
{
Name = GetFileNamewithoutExtension(x.Name),
Path = x.Name
}).ToList();
}
return Json(manuals, JsonRequestBehavior.AllowGet);
}
HTML 5
<div id="dynamicMenu">
<menu id="html5menu" type="context" style="display: none"></menu>
</div>
JavaScript Code
$.post("/Home/GetHelpFiles", function (data) {
$.each(data, function (index, item) {
var e = '<command label="' + item.Name + '" id ="' + item.Path + '"></command>';
$("#html5menu").append(e);
});
$.contextMenu({
selector: '#helpIcon',
trigger: 'hover',
delay: 300,
items: $.contextMenu.fromMenu($('#html5menu'))
});
});
$("#dynamicMenu").on("click", "menu command", function () {
var link = $(this).attr('id');
window.open("/HelpManuals/" + link);
});

Here's my solution using deferred, important to know that this feature is supported for sub-menus only
$(function () {
$.contextMenu({
selector: '.SomeClass',
build: function ($trigger, e) {
var options = {
callback: function (key, options) {
// some call back
},
items: JSON.parse($trigger.attr('data-storage')) //this is initial static menu from HTML attribute you can use any static menu here
};
options.items['Reservations'] = {
name: $trigger.attr('data-reservations'),
icon: "checkmark",
items: loadItems($trigger) // this is AJAX loaded submenu
};
return options;
}
});
});
// Now this function loads submenu items in my case server responds with 'Reservations' object
var loadItems = function ($trigger) {
var dfd = jQuery.Deferred();
$.ajax({
type: "post",
url: "/ajax.php",
cache: false,
data: {
// request parameters are not importaint here use whatever you need to get data from your server
},
success: function (data) {
dfd.resolve(data.Reservations);
}
});
return dfd.promise();
};

Exporting all data from Kendo Grid datasource

I followed that tutorial about exporting Kendo Grid Data : http://www.kendoui.com/blogs/teamblog/posts/13-03-12/exporting_the_kendo_ui_grid_data_to_excel.aspx
Now I´m trying to export all data (not only the showed page) ... How can I do that?
I tried change the pagezise before get the data:
grid.dataSource.pageSize(grid.dataSource.total());
But with that my actual grid refresh with new pageSize. Is that a way to query kendo datasource without refresh the grid?
Thanks

A better solution is to generate an Excel file from the real data, not from the dataSource.
1]
In the html page, add
$('#export').click(function () {
var title = "EmployeeData";
var id = guid();
var filter = $("#grid").data("kendoGrid").dataSource._filter;
var data = {
filter: filter,
title: title,
guid: id
};
$.ajax({
url: '/Employee/Export',
type: "POST",
dataType: 'json',
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
success: function (result) {
window.location = kendo.format("{0}?title={1}&guid={2}", '/Employee/GetGeneratedExcel', title, id);
}
});
});
2]
Add a method "Export" to the controller:
[HttpPost]
public JsonResult Export(KendoGridFilter filter, string guid)
{
var gridRequest = new KendoGridRequest();
if (filter != null)
{
gridRequest.FilterObjectWrapper = filter.Filters != null ? filter.ToFilterObjectWrapper() : null;
gridRequest.Logic = filter.Logic;
}
var query = GetQueryable().AsNoTracking();
var results = query.FilterBy<Employee, EmployeeVM>(gridRequest);
using (var stream = new MemoryStream())
{
using (var excel = new ExcelPackage(stream))
{
excel.Workbook.Worksheets.Add("Employees");
var ws = excel.Workbook.Worksheets[1];
ws.Cells.LoadFromCollection(results);
ws.Cells.AutoFitColumns();
excel.Save();
Session[guid] = stream.ToArray();
return Json(new { success = true });
}
}
}
3]
Also add the method "GetGeneratedExcel" to the controller:
[HttpGet]
public FileResult GetGeneratedExcel(string title, string guid)
{
// Is there a spreadsheet stored in session?
if (Session[guid] == null)
{
throw new Exception(string.Format("{0} not found", title));
}
// Get the spreadsheet from session.
var file = Session[guid] as byte[];
string filename = string.Format("{0}.xlsx", title);
// Remove the spreadsheet from session.
Session.Remove(title);
// Return the spreadsheet.
Response.Buffer = true;
Response.AddHeader("Content-Disposition", string.Format("attachment; filename={0}", filename));
return File(file, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", filename);
}
Also see this project on github.
See this live example project where you can export the Employees to Excel. (Although this returns filtered data, but you can modify the code to ignore the kendo grid filter and always return all data.

Really old question but:
To export all the pages use excel.allPages:
$("#grid").kendoGrid({
toolbar: ["excel"],
excel: {
allPages: true
},
// ....
});
See Example

Grid toolbar
..
.ToolBar(toolbar =>
{
toolbar.Template(
#<text>
#Html.Kendo().Button().Name("grid-export").HtmlAttributes(new { type = "button", data_url = #Url.Action("Export") }).Content("Export").Events(ev => ev.Click("exportGrid"))
</text>);
})
..
Endpoint export function
public FileResult Export([DataSourceRequest]DataSourceRequest request)
{
DemoEntities db = new DemoEntities();
byte[] bytes = WriteExcel(db.Table.ToDataSourceResult(request).Data, new string[] { "Id", "Name" });
return File(bytes,
"application/vnd.ms-excel",
"GridExcelExport.xls");
}
a javascript function to generate grid remote export url with all specified parameters
function exportGrid() {
var toolbar = $(this.element);
var gridSelector = toolbar.closest(".k-grid");
var grid = $(gridSelector).data("kendoGrid");
var url = toolbar.data("url");
var requestObject = (new kendo.data.transports["aspnetmvc-server"]({ prefix: "" }))
.options.parameterMap({
page: grid.dataSource.page(),
sort: grid.dataSource.sort(),
filter: grid.dataSource.filter()
});
url = url + "?" + $.param({
"page": requestObject.page || '~',
"sort": requestObject.sort || '~',
"pageSize": grid.dataSource.pageSize(),
"filter": requestObject.filter || '~',
});
window.open(url, '_blank');
}
For detailed solution see my sample project on Github
where u can export grid server side with current configuration (sorting, filtering, paging) using helper function