Related
I have a c# application which displays a webgrid populated by a database. When I double click on a grid element, jquery captures the double click, determines the row of the grid, finds the ID column and does an ajax call to pass the ID back to my controller. Ajax is instructed to expect html as the response.
When the controller receives the ID from the view, it reads the record from the database with that ID, populates a list with a set of fields, and passes that list as a parameter to a partial view.
The partial view returns html to the ajax call. The html includes a form where the database fields are displayed in text boxes so the user can update the data. There is a submit button and a cancel button at the bottom of the form.
The is the ajax code:
$("body").on("dblclick", "#WebGrid td", function () {
var row = $(this).closest("tr");
var FirstName = row.find("td").eq(1).text();
var LastName = row.find("td").eq(2).text();
var ID = row.find("td").eq(0).text();
$.ajax({
url: "/Home/Details",
type: "POST",
data: { ID: ID, FirstName: "", LastName: "", EmailAddress: "", EmailType: "" },
dataType: "html",
success: function (result) {
$('#dialog').html(result);
$('#dialog').dialog('open');
},
failure: function (result) {
alert("FAILURE " + result.responseText);
},
error: function (result) {
alert("ERROR " + result.responseText);
}
});
return false;
});
And this is how I define the division that the returned html gets placed into:
<div id="dialog" style="display: none">
</div>
And this is the function that I have:
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
title: "Update"
});
});
When I run the application, and I double click on a grid item and the partial view gets passed back to the ajax call, the dialog division gets displayed correctly with the data from the database.
The problem is when I click on the Cancel button nothing happens. And I do not get the 'cancel button clicked' message on the console. I have this code to capture the click of the cancel button:
$("#btnCancel").on('click', function (event) {
console.log("cancel button clicked");
$('#dialog').hide;
toastr.warning("Your update has been cancelled");
clear();
display();
});
Any suggestions? Thank you.
edit:
Here is the entire code of the initial View where the grid is rendered:
#model List<CodingChallengeV4.ViewModels.ContactPassData>
#{
ViewBag.Title = "UpdateAllData";
}
#{
Layout = null;
WebGrid grid = new WebGrid(source: Model, canPage: true, canSort: false);
}
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js">
</script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<!-- Latest compiled JavaScript -->
<!-- add thids links for the error message-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>
<style type="text/css">
.Grid {
border: 1px solid #ccc;
border-collapse: collapse;
}
.Grid th {
background-color: #F7F7F7;
font-weight: bold;
}
.Grid th, .Grid td {
padding: 5px;
width: 150px;
border: 1px solid #ccc;
}
.Grid, .Grid table td {
border: 0px solid #ccc;
}
.Grid th a, .Grid th a:visited {
color: #333;
}
</style>
<h2>Update All Contacts</h2>
#grid.GetHtml(
htmlAttributes: new { #id = "WebGrid", #class = "Grid" },
columns: grid.Columns(
grid.Column(header: "", format:#<text><div class="edit" data-id="#item.passedID" data-propertyname="passedID">#item.passedID</div></text>),
grid.Column(header: "First Name", format:#<text><div class="edit" data-id="#item.passedID" data-propertyname="passedfName">#item.passedfName</div></text>),
grid.Column(header: "Last Name", format:#<text><div class="edit" data-id="#item.passedID" data-propertyname="passedlName">#item.passedlName</div></text>),
grid.Column(header: "eMail Address", format:#<text><div class="edit" data-id="#item.passedID" data-propertyname="passedeMail">#item.passedeMail</div></text>),
grid.Column(header: "eMail Type", format:#<text><div class="edit" data-id="#item.passedID" data-propertyname="passedeMailTypeString">#item.passedeMailTypeString</div></text>)
)
)
<div id="dialog" style="display: none;" >
</div>
<script>
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
title: "View Details"
});
});
$(document).ready(function () {
$('#toast-container').find('.toast-top-center').removeClass('.toast-top-center');
toastr.options = {
"closeButton": true,
'autoWidth': false,
"debug": false,
"newestOnTop": true,
"progressBar": true,
"positionClass": "toast-center-center",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "3000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
$("#btnCancel").on('click', function (event) {
console.log("cancel button was clicked");
$('#dialog').dialog('hide');
toastr.warning("Your update has been cancelled");
clear();
display();
});
$("body").on("dblclick", "#WebGrid td", function () {
var row = $(this).closest("tr");
var FirstName = row.find("td").eq(1).text();
var LastName = row.find("td").eq(2).text();
var ID = row.find("td").eq(0).text();
$.ajax({
url: "/Home/Details",
type: "POST",
data: { ID: ID, FirstName: "", LastName: "", EmailAddress: "", EmailType: "" },
dataType: "html",
success: function (result) {
$('#dialog').html(result);
$('#dialog').dialog('open');
},
failure: function (result) {
alert("FAILURE " + result.responseText);
},
error: function (result) {
alert("ERROR " + result.responseText);
}
});
return false;
});
});
</script>
I am using the latest Nuget Datatables Package.
From the Nuget Package I am using the following two scripts
<link rel="stylesheet" href="/Content/DataTables/css/jquery.dataTables.min.css" type="text/css" />
<script src="/Scripts/DataTables/jquery.dataTables.min.js"></script>
The following is my client table, it contains 28 records in the database and I am trying to display 10 records
Below is my cshtml
<script>
$(document).ready(function () {
$('#clientTable').DataTable({
"order": [[1, "asc"]],
"serverSide": true,
"processing": true,
"paging": true,
"bLengthChange": false,
"iDisplayLength": "10",
"ajax": {
"url": "/Client/GetAll",
"type": "POST",
"dataType": "json"
},
"columns":
[
{
data: "ID", title: "", render: function (o) {
var template = "<div class=\"btn-group\"><button type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-toggle=\"dropdown\"> Options <span class=\"caret\"></span></button>"
+ "<ul class=\"dropdown-menu\" role=\"menu\">"
+ "<li style=\"display: #InspectionMethods.ValidateDisplayAccessRights(AccessRights.ViewInspections)\">"
+ "Edit"
+ "</li>"
+ "<li class=\"divider\"></li>"
+ "<li style=\"display: #InspectionMethods.ValidateDisplayAccessRights(AccessRights.ManageEmployees)\">"
+ " View Inspections "
+ "</li></ul></div>";
return template;
}
},
{ data: "Name", title: "Company" },
{ data: "CellNumber", title: "Contact Number" }
]
});
});
</script>
<div class="row">
<div class="col-md-12">
<div class="portlet">
<div class="portlet-header">
<h3 class="pull-right">
<a style="display: #InspectionMethods.ValidateDisplayAccessRights(AccessRights.ManageEmployees)" href="#Url.Action("CreateClient")" class="btn btn-success pull-right">New Client</a>
</h3>
</div> <!-- /.portlet-header -->
<div class="portlet-content">
<table id="clientTable" class="table table-striped table-bordered table-hover table-highlight"></table>
</div> <!-- /.portlet-content -->
</div> <!-- /.portlet -->
</div> <!-- /.col -->
</div> <!-- /.row -->
Here is my server side
[HttpPost]
public ActionResult GetAll(JQDTParams model)
{
using (var context = new DatabaseContext())
{
var clients = context.Clients.Where(model).ToList();
var result = new
{
model.sEcho,
model.draw,
recordsFiltered = context.Clients.Count(model), // 28
recordsTotal = context.Clients.Count(), // 28
data = clients // 10 Items in the list
};
return Json(result, JsonRequestBehavior.AllowGet);
}
}
The result I am getting looks like this
EDIT 1:)
Pages now display.
Pressing on Page 1, 2, or 3 it works and displays the correct data.
Now if I go to Page one and Press "Next" I get the result above where the text then says Showing 0,101 to 28 of 28 entries and if I press "Next" again to go to page three it doesn't do anything
Found the problem
It seems that jquery.Datatables handled the "iDisplayLength" as a string instead of an int, simple change
$(document).ready(function () {
$('#clientTable').DataTable({
"order": [[1, "asc"]],
"serverSide": true,
"processing": true,
"paging": true,
"bLengthChange": false,
"iDisplayLength": 10, //Here was the problem
Always get this error:
get: 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'tinymce'
By Nuget: PM> Install-Package TinyMCE.MVC.JQuery newest version
Model Class:
using System.Web.Mvc;
using System.ComponentModel.DataAnnotations;
namespace Familytree.Models {
public class TinyMCEModelJQuery {
[AllowHtml]
[UIHint("tinymce_jquery_full")]
public string Content { get; set; }
}
}
Controller:
using System.Web.Mvc;
namespace Familytree.Controllers {
public class TinyMCESampleJQueryController : Controller {
//
// GET: /TinyMCESampleJQuery/
[ValidateInput(false)]
public ActionResult Index() {
return View();
}
}
}
View:
#model Familytree.Models.TinyMCEModelJQuery
<h2>Index</h2>
#using (Html.BeginForm())
{
<fieldset>
<legend>TinyMCEModel</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Content)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Content)
#Html.ValidationMessageFor(model => model.Content)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
tinymce_jquery_full under Shared folder and Editor Template
#*
Don't forget to reference the JQuery Library here, inside your view or layout.
<script src="#Url.Content("~/Scripts/jquery-x.x.x.min.js")" type="text/javascript"></script>
*#
<script src="#Url.Content("~/Scripts/tinymce/jquery.tinymce.js")" type="text/javascript"></script>
<script type="text/javascript">
(function(){
$(function() {
$('##ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)').tinymce({
// Location of TinyMCE script
script_url: '#Url.Content("~/Scripts/tinymce/tiny_mce.js")',
theme: "advanced",
height: "500",
width: "790",
verify_html : false,
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,codehighlighting,netadvimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false,
// Example content CSS (should be your site CSS)
content_css : "#Url.Content("~/Scripts/tinymce/css/content.css")",
convert_urls : false,
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js"
});
});
})();
</script>
#Html.TextArea(string.Empty, /* Name suffix */
ViewData.TemplateInfo.FormattedModelValue /* Initial value */
)
Do I change this last line to
#Html.EditorFor(string.Empty, /* Name suffix */
ViewData.TemplateInfo.FormattedModelValue /* Initial value */
)
Using EditorFor in the Index view
Your partial view should be something like this
<script src="#Url.Content("~/Scripts/tinymce/tiny_mce.js")" type="text/javascript"></script>
<script type="text/javascript">
(function () {
tinyMCE.init({
mode: "exact",
elements: "#ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)",
theme: "simple",
height: "300",
width: "400",
verify_html: false,
theme_simple_resizing: true,
content_css: "#Url.Content("~/Content/Site.css")",
convert_urls: false
})
})();
</script>
#Html.TextArea(string.Empty, /* Name suffix */
ViewData.TemplateInfo.FormattedModelValue /* Initial value */
)
or change the theme to advanced, anyways when i was doing this i used this https://www.nuget.org/packages/TinyMCE and it was working fine. all you need to do is add [UIHint("tinymce_jquery_full")] before the string definition in your model. i dont see the need for the controller TinyMCESampleJQueryController
Hope this helps
You can try this, Nothing else
In View Model
#Html.TextAreaFor(c => c.ColumnName, new { #class = "tinyEditor", #autocomplete = "off" })
In script
<script type="text/javascript">
tinymce.init({
selector: ".tinyEditor",
theme: "modern",
menubar: false,
width: 400,
height: 100,
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality emoticons template paste textcolor"
],
content_css: "/Areas/Admin/Content/lang/en/assets/css/style.css",
toolbar: "styleselect | bold italic | bullist numlist outdent indent",
style_formats: [
{ title: 'Bold text', inline: 'b' },
{ title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
{ title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
{ title: 'Example 1', inline: 'span', classes: 'example1' },
{ title: 'Example 2', inline: 'span', classes: 'example2' },
{ title: 'Table styles' },
{ title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
]
});
JS
https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.0.6/jquery.tinymce.min.js
It's working do not write the code any other, just use class name in model and tinymce script
I need an help to align this table. I don't know work with design. How I can align and adapt size to each column, and the table in full size in my window?
I want all auto align. Width and Height (Full size).
My code:
$(document).ready(function () {
source =
{
datatype: "xml",
datafields: [
{ name: 'User', type: 'string' },
{ name: 'AccessGroup', type: 'string' },
{ name: 'FolderAccess', type: 'string' },
{ name: 'RequestDate', type: 'Date' },
{ name: 'SituationDesc', type: 'string' },
{ name: 'Approver', type: 'string' },
{ name: 'ApprovalDate', type: 'Date' },
{ name: 'BusinessJustification', type: 'string' },
{ name: 'AllBusinessJustification', type: 'string' },
{ name: 'UserRequestor', type: 'string' }
],
async: false,
record: 'Table',
url: 'Tickets.aspx/GetTickets',
};
var dataAdapter = new $.jqx.dataAdapter(source, {
contentType: 'application/json; charset=utf-8'}
);
$("#jqxgrid").jqxGrid(
{
width: 3000,
source: dataAdapter,
theme: 'classic',
autoheight: true,
columns: [
{ text: 'User', datafield: 'User', widht: 'auto' },
{ text: 'Access Group', datafield: 'AccessGroup', widht: 'auto' },
{ text: 'Folder Access', datafield: 'FolderAccess', widht: 'auto' },
{ text: 'Request Date', datafield: 'RequestDate', widht: 'auto' },
{ text: 'Situation', datafield: 'SituationDesc', widht: 'auto' },
{ text: 'Approver', datafield: 'Approver', widht: 'auto' },
{ text: 'Approval Date', datafield: 'ApprovalDate', widht: 'auto' },
{ text: 'Business Justification', datafield: 'BusinessJustification', widht: 'auto' },
{ text: 'All Business Justifications', datafield: 'AllBusinessJustification', widht: 'auto' },
{ text: 'User Requestor', datafield: 'UserRequestor', widht: 'auto' },
]
});
});
<body>
<form id="form1" runat="server">
<div>
<div align="center" style="width: 100%; height: 100%;">
<img src="image/NdriveBanner.png" align="center" />
</div>
<br />
<br />
<div id="jqxgrid">
</div>
<br />
<br />
<div align="center" style="width: 100%; height: 100%;">
<asp:HyperLink ID="HyperLink2" runat="server" ImageUrl="~/image/home_back_48.png"
NavigateUrl="~/home.aspx">homepage</asp:HyperLink>
</div>
</div>
</form>
Here's a sample code which shows how to set the Grid's size in percentages so it will be auto-resized.
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>In this sample, the Grid's size is set in percentages. When you resize the browser's window, the Grid's Width and Height will be automatically adjusted. The "width" and "height" properties of jqxGrid in this sample are set to "50%"</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript" src="generatedata.js"></script>
<style>
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var theme = getDemoTheme();
var data = generatedata(500);
var source =
{
localdata: data,
datafields:
[
{ name: 'name', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'available', type: 'bool' },
{ name: 'date', type: 'date'},
{ name: 'quantity', type: 'number' }
],
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: '50%',
height: '50%',
source: dataAdapter,
showfilterrow: true,
filterable: true,
theme: theme,
selectionmode: 'multiplecellsextended',
columns: [
{ text: 'Name', columntype: 'textbox', datafield: 'name', width: '20%' },
{
text: 'Product', datafield: 'productname', width: '35%'
},
{ text: 'Ship Date', datafield: 'date', filtertype: 'date', width: '30%', cellsalign: 'right', cellsformat: 'd' },
{ text: 'Qty.', datafield: 'quantity', width: '15%', cellsalign: 'right' }
]
});
});
</script>
</head>
<body class='default'>
<div id="jqxgrid">
</div>
</body>
</html>
jqgrid is providing the align property to each columns, to align header you need to change in the jqgrid css to the respective call for the headers.
for the align in columns you can add like this
$("#jqxgrid").jqxGrid(
{
width: 3000,
source: dataAdapter,
theme: 'classic',
autoheight: true,
columns: [
{ text: 'User', datafield: 'User', widht: 'auto',align="center" },
{ text: 'Access Group', datafield: 'AccessGroup', widht: 'auto',align="center" },
{ text: 'Folder Access', datafield: 'FolderAccess', widht: 'auto',align="center" },
{ text: 'Request Date', datafield: 'RequestDate', widht: 'auto',align="center" },
{ text: 'Situation', datafield: 'SituationDesc', widht: 'auto',align="center" },
{ text: 'Approver', datafield: 'Approver', widht: 'auto' ,align="center"},
{ text: 'Approval Date', datafield: 'ApprovalDate', widht: 'auto',align="center" },
{ text: 'Business Justification', datafield: 'BusinessJustification', widht: 'auto',align="center" },
{ text: 'All Business Justifications', datafield: 'AllBusinessJustification', widht: 'auto',align="center" },
{ text: 'User Requestor', datafield: 'UserRequestor', widht: 'auto' ,align="center"},
]
});
When I type the URL http ://localhost/login/login.aspx into my browser, I see my response is {success: true}. When I run my load my html page, I can see from Fiddler and the debugger that the aspx page is called; however, nothing is being returned to my javascript and it go to FAILURE instead of SUCCESS.
I have used this url in other programming projects, but this is my first time using it with Ext JS. I have seen various examples online and none seem to fix my issue. Below is my javascript file and any help would be appreciated in getting a successful return on my button click.
So, it is not entering my C# code from the javascript call even thought fiddler shows the call is being made to http ://localhost/login/login.aspx.
Any help would be greatly appreciated.
Ext.require([
'Ext.form.*',
'Ext.window.Window'
]);
Ext.onReady(function () {
Ext.QuickTips.init();
var field = new Ext.form.field.Text({
renderTo: document.body
}),
fieldHeight = field.getHeight(),
padding = 5,
remainingHeight;
field.destroy();
remainingHeight = padding + fieldHeight * 2;
var login = new Ext.form.Panel({
border: false,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 100
},
defaultType: 'textfield',
bodyPadding: padding,
items: [{
xtype: 'box',
region: 'west',
width: 128,
height: 46,
autoEl: { tag: 'img', src: 'images/logo.png' },
style: 'margin: 10px 0px 15px 15px'
}, {
allowBlank: false,
fieldLabel: 'Company Name',
name: 'company',
emptyText: 'Company ID',
style: 'margin: 10px 0px 10px 30px'
}, {
allowBlank: false,
fieldLabel: 'User ID',
name: 'user',
emptyText: 'User Name',
style: 'margin: 10px 0px 10px 30px'
}, {
allowBlank: false,
fieldLabel: 'Password',
name: 'pass',
emptyText: 'Password',
inputType: 'password',
style: 'margin: 10px 0px 10px 30px'
}]
});
new Ext.window.Window({
autoShow: true,
title: 'Support Tools Login',
resizable: false,
closable: false,
width: 350,
height: 250,
layout: 'fit',
plain: true,
items: login,
constrain: true,
draggable: false,
buttons: [{
text: 'Login',
formBind: true,
handler: function () {
login.getForm().submit({
method: 'POST',
url: 'http://localhost/login/login.aspx',
waitTitle: 'Connectiong',
waitMsg: 'Sending data...',
success: function (login, action) {
Ext.Msg.alert('Success');
},
failure: function (login, action) {
Ext.Msg.alert('Failure')
}
});
}
}]
});
});
Aspx file:
using System;
using System.Diagnostics;
using System.Web;
using SupportToolsCommon;
namespace App.login
{
public partial class login : System.Web.UI.Page
{
private static Database db;
protected void Page_Load(object sender, EventArgs e)
{
Response.Clear();
Response.Write("{success: true}");
Response.End();
}
}
}
default.html page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Login Page</title>
<!-- ExtJS -->
<script type="text/javascript" src="extjs/ext-all.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/support-tools.css" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="scripts/login.js"></script>
</head>
<body id="login-page"></body>
</html
Try replacing this line:
Response.Write("{success: true}");
with well formed JSON (property names must all be enclosed in quotes in JSON, as opposed to javascript):
Response.Write("{\"success\": true}");