We Keep Coding

ASP.NET Core 2.0 set focus on a input element

I have an older ASP.NET Core MVC razor partial form with 2 input fields, I am trying to set the focus on the first input field on the form load, and when the user changes the value I want to then change the focus to the second input box. This is my first project working with ASP.NET Core 2.0 razor pages.
The issue is when I try to use HTML, Java, or razor code to set the focus, it does not work. I am hoping someone can see where I am going wrong. Thank you in advance.
Update Full script
<script>
$(document).ready(function () {
$('#ordersrefresh').on("click", function (e) {
window.location.reload(true);
});
$('#orderstart').on("click", function (e) {
$('#orderstartpick').empty();
$('#orderstartdrop').empty();
$('#orderstartpriority').empty();
//$('#orderstartmodal').modal({ backdrop: 'static', keyboard: false, show: true });
$.getJSON("/orders/orderlist/picks", function (picks) {
picks.forEach(function (item) {
$('#orderstartpick').append('<option value="' + item + '">' + item + '</option>');
});
});
$.getJSON("/orders/orderlist/drops", function (drops) {
drops.forEach(function (item) {
$('#orderstartdrop').append('<option value="' + item + '">' + item + '</option>');
});
});
$.getJSON("/orders/orderlist/priorities", function (priorities) {
priorities.forEach(function (item) {
$('#orderstartpriority').append('<option value="' + item + '">' + item + '</option>');
});
});
// shows the partial form
$.getJSON("/orders/orderlist/conn", function (conn) {
if (conn == "true") {
$('#orderstartmodal').modal('show'); //{ backdrop: 'static', keyboard: false, show: true });
$('#orderstartmodal').on('shown.bs.model',function () {
$('#orderstartpick').focus();
})
}
else {
$('#noorderstartmodal').modal('show'); //{ backdrop: 'static', keyboard: false, show: true });
}
});
// Set focus on the drop input after the pick input has changed - Working
$('#orderstartpick').change(function () {
$('#orderstartdrop').focus();
});
});
$('#ordermodif').on("click", function (e) {
$('#ordermodifid').empty();
$('#ordermodifpick').empty();
$('#ordermodifdrop').empty();
$('#ordermodifpriority').empty();
//$('#ordermodifmodal').modal({ backdrop: 'static', keyboard: false, show: true });
$.getJSON("/orders/orderlist/picks", function (picks) {
picks.forEach(function (item) {
$('#ordermodifpick').append('<option value="' + item + '">' + item + '</option>');
});
});
("/orders/orderlist/drops", function (drops) {
drops.forEach(function (item) {
$('#ordermodifdrop').append('<option value="' + item + '">' + item + '</option>');
});
});
$.getJSON("/orders/orderlist/priorities", function (priorities) {
priorities.forEach(function (item) {
$('#ordermodifpriority').append('<option value="' + item + '">' + item + '</option>');
});
});
$.getJSON("/orders/orderlist/ids", function (ids) {
var idscount = 0;
ids.forEach(function (item) {
$('#ordermodifid').append('<option value="' + item + '">' + item + '</option>');
++idscount;
});
if (idscount > 0) {
$('#ordermodifmodal').modal({ backdrop: 'static', keyboard: false, show: true });
}
else {
$('#noordermodifmodal').modal({ backdrop: 'static', keyboard: false, show: true });
}
});
});
$('#ordermodifmodal').on("shown.bs.modal", function (e) {
var ordermodifid = $('#orderidmodifcurrent').val();
$.getJSON("/orders/orderlist/order", { orderid: ordermodifid }, function (order) {
$('#ordermodifmodal #ordermodifpick').val(order.pick.name);
$('#ordermodifmodal #ordermodifdrop').val(order.drop.name);
$('#ordermodifmodal #ordermodifpriority').val(order.priority);
});
});
$('#ordermodifmodal #ordermodifid').change(function (e) {
var ordermodifid = $(this).find("option:selected").val();
$.getJSON("/orders/orderlist/order", { orderid: ordermodifid }, function (order) {
$('#ordermodifmodal #ordermodifpick').val(order.pick.name);
$('#ordermodifmodal #ordermodifdrop').val(order.drop.name);
$('#ordermodifmodal #ordermodifpriority').val(order.priority);
});
});
function DeleteRenderer(data, type, row) {
var StatusColumn = row.status;
if (StatusColumn.includes("Cancelling") || (StatusColumn.includes("Canceled"))) {
return "<button class='btn btn-outline-info' disable>Delete</button>";
}
else {
return "<button class='btn btn-outline-danger'd>Delete</button>";
}
}
function CancelRenderer(data, type, row) {
var StatusColumn = row.status;
if (StatusColumn.includes("Assigned") || (StatusColumn.includes("Pending"))) {
return "<button class='btn btn-outline-warning'>Cancel</button>";
}
else {
return "<button class='btn btn-outline-info' disabled>Cancel</button>";
}
}
function ModifyRenderer(data, type, row) {
var StatusColumn = row.state;
if (StatusColumn.includes("Assigned") || (StatusColumn.includes("Pending"))) {
return "<button class='btn btn-outline-info'>Modify</button>";
}
else {
return "<button class='btn btn-outline-info' disabled>Modify</button>";
}
}
function DateRenderer(data) {
return moment(data).format('DD/MM/YYYY HH:mm:ss');
}
var table = $('#orders').DataTable({
"processing": false, // for show progress bar
"serverSide": false, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"lengthMenu": [[20, 50, -1], [20, 50, "All"]],
"pagingType": "simple",
"ajax": {
"url": "/Orders/OrderList/data", // for client side /LoadDataAll
"type": "GET", // for client side "GET"
"datatype": "json"
},
"select": 'single',
"columns": [
{ "data": "created", "render": DateRenderer, "autoWidth": true },
{ "data": "wmsid", "name": "WMSID", "autoWidth": true },
{ "data": "index", "name": "OrderID", "autoWidth": true },
{ "data": "pick.name", "name": "Pick", "autoWidth": true },
{ "data": "drop.name", "name": "Drop", "autoWidth": true },
{ "data": "sequence", "name": "Sequence", "autoWidth": true },
{ "data": "status", "name": "Status", "autoWidth": true },
{ "data": "priority", "name": "Priority", "autoWidth": true },
{ "data": "null", "render": ModifyRenderer, "orderable": false },
//{ "data": "null", "render": CancelRenderer, "orderable": false },
//{ "data": "null", "render": DeleteRenderer, "orderable": false },
]
});
$('#orders tbody').on('click', 'button', function () {
var data = table.row($(this).parents('tr')).data();
var buttontext = $(this).text();
var token = $("[name=__RequestVerificationToken]").val();
$('input[name="orderidcurrenthidden"]').val(data.wmsid);
var ordertext = data.wmsid;
if (buttontext.toUpperCase() == 'MODIFY') {
$('#ordermodifpick').empty();
$('#ordermodifdrop').empty();
$('#ordermodifpriority').empty();
$('#orderidmodifcurrent').val($('input[name="orderidcurrenthidden"]').val());
//$('#ordermodifmodal').modal({ backdrop: 'static', keyboard: false, show: true });
$.ajaxSetup({ async: false });
$.getJSON("/orders/orderlist/picks", function (picks) {
picks.forEach(function (item) {
$('#ordermodifpick').append('<option value="' + item + '">' + item + '</option>');
});
});
$.getJSON("/orders/orderlist/drops", function (drops) {
drops.forEach(function (item) {
$('#ordermodifdrop').append('<option value="' + item + '">' + item + '</option>');
});
});
$.getJSON("/orders/orderlist/priorities", function (priorities) {
priorities.forEach(function (item) {
$('#ordermodifpriority').append('<option value="' + item + '">' + item + '</option>');
});
});
//$.getJSON("/orders/orderlist/ids", function (ids) {
// var idscount = 0;
// ids.forEach(function (item) {
// $('#ordermodifid').append('<option value="' + item + '">' + item + '</option>');
// ++idscount;
// }
//});
$.getJSON("/orders/orderlist/conn", function (conn) {
if (($('#ordermodifpick option').length > 0) &&
($('#ordermodifdrop option').length > 0) &&
($('#ordermodifpriority option').length > 0) &&
(conn == "true")) {
$('#ordermodifmodal .modal-title').text('MODIFY ORDER: ' + ordertext);
$('#ordermodifmodal').modal({ backdrop: 'static', keyboard: false, show: true });
}
else {
$('#noordermodifmodal').modal({ backdrop: 'static', keyboard: false, show: true });
}
});
$.ajaxSetup({ async: true });
}
else if (buttontext.toUpperCase() == 'CANCEL') {
$.post('/orders/orderlist?handler=ordercancel', {
orderid: data.wmsid,
__RequestVerificationToken: token,
}, function (strResult) {
if (strResult == "true") {
$('#ordercancelmodal').modal({ backdrop: 'static', keyboard: false, show: true });
}
else {
$('#noordercancelmodal').modal({ backdrop: 'static', keyboard: false, show: true });
}
});
}
else if (buttontext.toUpperCase() == 'DELETE') {
$.post('/orders/orderlist?handler=orderdelete', {
orderid: data.wmsid,
__RequestVerificationToken: token,
}, function (strResult) {
if (strResult == "true") {
$('#orderdeletemodal').modal({ backdrop: 'static', keyboard: false, show: true });
}
else {
$('#noorderdeletemodal').modal({ backdrop: 'static', keyboard: false, show: true });
}
});
}
});
setInterval(function () {
table.ajax.reload(null, false); // user paging is not reset on reload
}, 5000);
$(window).on('resize', function () {
$('#orders').attr("style", "");
table.columns.adjust();
});
$("input[id$='orderstartpick']").focus();
});
</script>
script
$('#orderstart').on("click", function (e) {
$('#orderstartpick').empty();
$('#orderstartdrop').empty();
$('#orderstartpriority').empty();
//$('#orderstartmodal').modal({ backdrop: 'static', keyboard: false, show: true });
$.getJSON("/orders/orderlist/picks", function (picks) {
picks.forEach(function (item) {
$('#orderstartpick').append('<option value="' + item + '">' + item + '</option>');
});
});
$.getJSON("/orders/orderlist/drops", function (drops) {
drops.forEach(function (item) {
$('#orderstartdrop').append('<option value="' + item + '">' + item + '</option>');
});
});
$.getJSON("/orders/orderlist/priorities", function (priorities) {
priorities.forEach(function (item) {
$('#orderstartpriority').append('<option value="' + item + '">' + item + '</option>');
});
});
// shows the partial form
$.getJSON("/orders/orderlist/conn", function (conn) {
if (conn == "true") {
$('#orderstartmodal').modal('show'); //{ backdrop: 'static', keyboard: false, show: true });
}
else {
$('#noorderstartmodal').modal('show'); //{ backdrop: 'static', keyboard: false, show: true });
}
});
// set focus on the pick input on form load - Not working on load
$('#orderstartmodal').on('shown.bs.model', function () {
$('#orderstartpick').focus();
});
// Hide the submit button by class name on form load - Not working on load
$('#orderstartmodal').on('shown.bs.model', function () {
$('#submitbtn').hide();
});
// Set focus on the drop
input after the pick input has
changed - Working
$('#orderstartpick').change(function () {
$('#orderstartdrop').focus();
});
});
Partial form code in my .cshtml page
<div id="orderstartmodal" class="modal fade" tabindex="-1" role="dialog">
<form method="post" asp-page-handler="orderstart">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color:blanchedalmond">
<h5 class="modal-title font-italic" id="orderstartmodaltitle" value="">START ORDER</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="background-color:burlywood">
<table class="table table-sm">
<tbody>
<tr>
<td align="right" width="50%">
<div class="form-group">
<label for="orderstartpick" class="col-form-label">Pick Stn.:</label>
#*<select id="orderstartpick" name="orderpick" class="select-picker" style="width:60%"></select>*#
<input type="text" autofocus="autofocus" id="**orderstartpick**" name="orderpick" style="width:60%">
#*<script type="text/javascript">document.getElementById('orderstartpick').focus();</script>*#
#*<script>document.getElementById('orderstartpick').focus();</script>*#
#* <script type="text/javascript">
$(document).ready(function () {
$(function () {
$('#orderstartpick').focus();
});
});
</script>*#
</div>
</td>
<td align="right" width="50%">
<div class="form-group">
<label for="orderstartdrop" class="col-form-label">Drop Stn.:</label>
#*<select id="orderstartdrop" name="orderdrop" class="select-picker" style="width:60%"></select>*#
<input runat="server" type="text" id="**orderstartdrop**" name="orderdrop" style="width:60%">
</div>
</td>
</tr>
<tr style="visibility:collapse">
<td align="right" width="50%">
<div class="form-group">
<label hidden="hidden" for="orderstartpriority" class="col-form-label">Priority:</label>
<select hidden="hidden" id="orderstartpriority" name="orderpriority" class="select-picker" style="width:60%"></select>
</div>
</td>
<td width="50%">
<div hidden="hidden" class="form-group">
</div>
</td>
</tr>
<tr>
<td align="center" valign="middle" colspan="2">
<div class="form-group">
<label for="orderstartinfo" class="col-form-label">Select/Verify Parameters And Then Click:</label>
</div>
<div class="form-group">
<button runat="server" type="submit" class="btn btn-primary">START ORDER</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer" style="background-color:blanchedalmond">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</form>
</div>
I tried HTML code for focus, Fava code, and razor code, but not of the things tried to set focus to input one.

Update:
// shows the partial form
$.getJSON("/orders/orderlist/conn", function (conn) {
if (conn == "true") {
$('#orderstartmodal').modal('show');
$('#orderstartmodal').on('shown.bs.modal', function () {
$('#orderstartpick').focus();
})
}
else {
$('#noorderstartmodal').modal('show'); //{ backdrop: 'static', keyboard: false, show: true });
}
});
Note: As you can see, within your code snippet I can see a if conditional while loading the modal. You should please below code sippet on load just after loading the modal:
$('#orderstartmodal').on('shown.bs.modal', function () {
$('#orderstartpick').focus();
})
I tried HTML code for focus, Java code, and razor code, but not of the
things tried to set focus to input one.
Well, in this scenario, you have to write your focus script inside your main view not in parttial page of course. You can do something like below:
Script For Input Focus:
$(document).ready(function () {
$(function () {
$('#orderstartmodal').modal('show');
});
$('#orderstartmodal').on('shown.bs.modal', function () {
$('#orderstartpick').focus();
})
$("#orderstartpick").change(function () {
$('#orderstartdrop').focus();
});
            
});
Note: This script need to placed below your main page where you have called your partial view. As you can see I have used change and onmouseover both would perform. However, as per your description, you need on change event then set your focus to next input box that is: $('#orderstartdrop').focus();
Output:
Note: As you haven't shared your main page details, so I have just loaded below another page.

How to I call 2 variables in Vuejs?

I am using Vuejs.
And I want to call 2 variables.
How should I do?
These are my real codes.
(I want to add a codes that will hide the (x) button in a modal with a class [.close])
I edited my previous post. Sorry 'bout that.
window.app = new Vue({
el: '#vuelayoutdiv',
data: {
text: null
},
methods: {
submitToSignIn: function () {
window.location.href = "/{Contoller}/{Index}"
},
checkEmail: function (e) {
if (this.text) {
return true;
};
if (!this.text) {
this.$bvModal.show('emailmodal');
}
}
}
});
<b-modal id="emailmodal" hide-footer>
#*<template v-slot:modal-title>
Using
<code>$bvModal</code> Methods
</template>*#
<div class="d-block text-center">
<h3 style="text-align:left">Email required.</h3>
</div>
<b-button class="mt-3" block v-on:click="$bvModal.hide('emailmodal')">Close Me</b-button>
</b-modal>
<b-nav-item class="navbarsigntext signin" v-on:click="submitToSignIn">SIGN IN</b-nav-item>

It's easy to access other Vue instances variables. Although this isn't really common practice, and I'm not really sure what you are trying to do.
Here is an example, where there is thre instances in total, where the third, gets the message variable from object one and two.
var vueObj1 = new Vue({
data () {
return {
message: "vueobj1"
}
},
})
var vueObj2 = new Vue({
data () {
return {
message: "vueobj2"
}
},
})
var vueObj3 = new Vue({
el: '#app',
computed: {
messageFromOtherInstances () {
return vueObj1.message + ' ' + vueObj2.message
}
}
})
I've a small codepen for you, to play with: https://codepen.io/dasmikko/pen/XWWybdr

Use data as a function and return your variables.
Read the syntax in Vue js : - https://v2.vuejs.org/v2/guide/components.html
var variable1 = new Vue({
el: '#app1',
data () {
return {
text1:"sample"
}
},
})
var variable2 = new Vue({
el: '#app2',
data () {
return {
text2:"sample"
}
}
})
<script src="https://unpkg.com/vue#2.5.9/dist/vue.js"></script>
<div id="app1">
{{ text1 }}
</div>
<div id="app2">
{{ text2 }}
</div>

Telerik Kendo Grid editing inline with kendo treeview editor template

I have a kendo grid that is edited inline. One of the fields should be edited selecting an element from a list, but the list must have a hierarchical structure (would be nice be able of filter that list). I was thinking in use a kendo treeview as editor for that field but I haven't found any way to accomplish this. I tried make a custom editor template (using columns.Bound(s => s.FieldId).EditorTemplateName("_TreeEditorTemplate")) that render the treeview, but the treeview is not an input and is not selectable. I also thinked in make an editor that use a kendo dropdownlist with the tree inside but this is no currently supported by kendo. Any ideas???

Have you looked at the sample on the Kendo site: https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/use-treeview-as-grid-editor
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1 } },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
},
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
edit: function (e) {
//checking if a cell from the Test column is opened for editing
var dummyInput = e.container.find("input[name='test']");
if (dummyInput.length > 0) {
var treeView = $(e.container).find(".treeViewEditor").data("kendoTreeView");
var originalItem = treeView.findByText(dummyInput.val());
if (originalItem != null) {
// Select the item based on the field value
treeView.select(originalItem);
}
}
},
navigatable: true,
pageable: true,
height: 550,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{
field: "test", title: "Test", width: 120,
editor: function (container, options) {
var input = $("<input class='tveInput'/>");
input.attr("name", options.field);
var tvDiv = $("<div class='treeViewEditor'></div>");
$(tvDiv).kendoTreeView({
animation: false,
dataSource: [
{
text: "foo1"
},
{
text: "foo2",
items: [
{ text: "bar" },
{ text: "bar1" },
{ text: "bar2" }
]
}
]
});
var treeView = $(tvDiv).data("kendoTreeView");
$(tvDiv).find(".k-in").mousedown(function (e) {
var clickedNode = $(e.toElement).closest("[role=treeitem]");
var dataItem = treeView.dataItem(clickedNode);
var dummyInput = clickedNode.closest("[role=gridcell]").find("input[name='test']");
dummyInput.val(dataItem.text);
dummyInput.trigger("change");
});
tvDiv.appendTo(container);
input.appendTo(container);
}
},
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Discontinued", width: 120 },
{ command: "destroy", title: " ", width: 150 }],
editable: true
});
});
</script>
</div>
<style>
.tveInput {
display: none;
}
</style>

plupload flash runtime doesn't work on IE8

I am using plupload flash runtime in my website to upload the files as Attachments and send them via email. The website runs fine on chrome, IE9 and IE11 but not on IE8. And most of my users are going to be using IE8. I have been trying many different things but none seemed to be working. Can anyone please suggest me any solution?
This is my javascript code where I am uploading of file takes place.
modules.compose = (function () {
"use strict";
var config = {
id: '',
requestToken: $('meta[name="__AntiForgeryToken"]').attr('content'),
runtimes: 'gears,flash,silverlight,browserplus,html5',
maxFileSize: '200mb',
maxQueueSize: 10485760,
chunkSize: '1mb',
pingFrequency: 100000,
isUploaderOpen: false
},
bindUploader = function () {
$("#uploader").pluploadQueue({
// General settings
runtimes: config.runtimes,
url: '/upload.ashx' + '?id=' + config.id,
max_file_size: config.maxFileSize,
chunk_size: config.chunkSize,
unique_names: false,
headers: { '__AntiForgeryToken': config.requestToken },
// Browse filters
filters: [
{ title: "All files", extensions: "*.*" },
{ title: "Image files", extensions: "jpg,gif,png,tiff" },
{ title: "XML files", extensions: "xml" },
{ title: "PDF documents", extensions: "pdf" },
{ title: "Zip files", extensions: "zip" },
{ title: "Text files", extensions: "txt,log" },
{ title: "Powerpoint documents", extensions: "ppt,pptx,pptm,potx,potm,ppam,ppsx,ppsm,sldx,sldm,thmx" },
{ title: "Excel documents", extensions: "xls,xlsx,xlsm,xltx,xltm,xlsb,xlam" },
{ title: "Word documents", extensions: "doc,docx,docm,dotx,dotm" },
],
preinit: {
Init: function (up, info) {
$('.plupload_header, .plupload_start').remove();
}
},
init: {
UploadProgress: function (up, file) {
bumpProgress(up, file);
},
StateChanged: function (up) {
if (up.total && up.files && up.total.uploaded === up.files.length) {
var parent = $('#upload-status').parent();
$('#upload-status').fadeOut('slow').remove();
$('#send-status').appendTo(parent).fadeIn('slow');
__doPostBack('ctl00$Content$btnSendMessage', '');
}
},
FilesAdded: function (up, files) {
var i = 0;
while (i++ < up.files.length) {
$('#btnSendMessage').removeAttr("disabled");
var ii = i;
while (ii < up.files.length) {
if (up.files[i - 1].name == up.files[ii].name) {
up.removeFile(up.files[ii]);
} else {
ii++;
}
}
}
},
QueueChanged: function (up) {
if (up.total.size > config.maxQueueSize) {
$('#upload-warning-modal').modal('show');
if (up.total.queued - 1 >= 0) {
up.removeFile(up.files[up.total.queued - 1]);
}
}
}
},
// Flash settings
flash_swf_url: '/assets/js/plupload/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url: '/assets/js/plupload/plupload.silverlight.xap'
});
},
bindAddAttachments = function () {
$('#btnAddAttachments').click(function (e) {
e.preventDefault();
if (!config.isUploaderOpen) {
bindUploader();
$('#uploader').show();
config.isUploaderOpen = true;
}
$(this).attr('disabled', 'disabled');
});
},
bindSendMessage = function () {
$('#btnSendMessage').click(function (e) {
e.preventDefault();
if (!Page_ClientValidate()) {
return;
}
$('.plupload_filelist_footer').css('display', 'none');
$('#uploader').block({
message: $('#upload-status'),
css: {
padding: 0,
margin: 0,
width: '50%',
top: '50%',
left: '35%',
textAlign: 'left',
color: '#000',
border: '0',
backgroundColor: 'transparent',
cursor: 'wait'
}
});
$('input[type="text"], textarea').prop('readonly', true).addClass('disabled');
$('#btnSendMessage').button('loading');
var queue = $("#uploader").pluploadQueue();
if (queue) {
queue.start();
} else {
__doPostBack('ctl00$Content$btnSendMessage', '');
}
});
},
bumpProgress = function (up, file) {
if (up.total.percent >= 80) {
$('#upload-status .progress').removeClass('progress-info').addClass('progress-success');
}
$('#upload-status .progress .bar').css('width', up.total.percent + '%');
},
bindTextareaLimit = function () {
$('#txtMessage').limit('2000', '#charsLeft');
},
initAttachmentsButton = function () {
$('#btnAddAttachments').prop('disabled', '');
},
initPing = function () {
(function ping() {
$.get("/ping.ashx");
setTimeout(ping, config.pingFrequency);
})();
};
return {
init: function (options) {
config = $.extend({}, config, options || {});
$(function () {
initAttachmentsButton();
initPing();
bindSendMessage();
bindAddAttachments();
bindTextareaLimit();
});
},
validateRecipientEmail: function (sender, args) {
var proxy = new ServiceProxy('/Default.aspx/', { async: false });
proxy.invoke(
'IsValidRecipient',
{ recipient: $('#txtRecipient').val() },
function (result) {
return (args.IsValid = result.d);
});
},
validateSenderEmail: function (sender, args) {
var proxy = new ServiceProxy('/Default.aspx/', { async: false });
proxy.invoke(
'IsValidSender',
{ sender: $('#txtSender').val() },
function (result) {
return (args.IsValid = result.d);
});
}
};
} ());

Hope I'm not too late. Recently had the same problem. The problem is that you use
headers: { '__AntiForgeryToken': config.requestToken },
But by the specification it is not supported in HTML4 runtime:
http://www.plupload.com/docs/Options#runtimes
headers
A way to pass custom HTTP headers with each upload request. The option is simple set of key/value pairs of header names and their values.
Not supported by html4 runtime.
Requires special operational mode in case of flash and silverlight runtimes.
Since in IE8 can be disabled all other ways to upload files it will use HTML4 runtime, which doesn't have any legal way how to set antiForgery token. So your server-side will think that your sended file is not secure due it doesn't have antiForgery token and with drop with Forbidden HTTP status.
Conclusion - you are not abble to use AntiForgery token with plupload in IE8 in the how it is built in ASP.NET MVC.

return View in C#

I am new to C# and ASP.NET MVC and specially views.
I have the following problem
I have this code
[AcceptVerbs(HttpVerbs.Get)]
public ActionResult ManageEmployee(int cntID, string command)
{
//repository = new ContactRepository();
cntadrRepository = new ContactAddressCountryRepository();
//addressRepository = new AddressRepository();
if (!String.IsNullOrEmpty(command) && command.Equals("edit"))
{
var cdrcnts = cntadrRepository.GetById(cntID);
ViewBag.IsUpdate = true;
//return View("_ManageEmployee", cdrcnts);
return View("Index", cdrcnts);
//return View("Index");
}
else
{
ViewBag.IsUpdate = false;
//return View("_ManageEmployee");
return View("Index");
}
}
that returns my form empty when I click on Add button
when I click on Add I get the form slide in and the grid slide out and I can enter a new record and then after clicking on save I return to my grid with the new record.
Now the problem is When I click on Edit I have the view with only an Add button that when I click on I get the result that I want to get, directly, when I click on Edit which is the form filled with the required information
I think that I have a problem when I return the view.
What I want is that I return that form populated with the contact information when I click on Edit and stay in the same page that shows again the grid and the edited record and not have that empty page with the Add button that I need to click on again to have the required result.
Thank you for your help.

<script type="text/javascript">
$.ig.loader({
scriptPath: './js/',
cssPath: './css/',
resources: 'igGrid.*',
ready: function () {
$.getJSON("Home/GetAll", null, function (data) {
var headerTextValues = ["Relation to Will maker", "First Name", "Last Name","","",""];
$('#employeeGrid').igGrid({
expandCollapseAnimations: true,
animationDuration: 1000,
expandTooltip: "Expand to View Details",
collapseTooltip: "Hide details",
height: "400px",
width: "800px",
dataSource: data,
responseDataKey: "Records",
//dataSourceType: "json",
autoGenerateLayouts: false,
autoGenerateColumns: false,
rowEditDialogContainment: "owner",
showReadonlyEditors: false,
columns: [
{ headerText: headerTextValues[0], key: "cntID", width: 200 },
{ headerText: headerTextValues[1], key: "cntFirstName", width: 175 },
{ headerText: headerTextValues[2], key: "cntLastName", width: 175 },
//{ headerText: headerTextValues[3], key: "Age", width: 175 },
{ headerText: headerTextValues[4], key: "UpdateRow", width: 110, template: "<a href='Home/ManageEmployee?cntID=${cntID}&command=edit' class='editDialog'>Edit</a>" },
{ headerText: headerTextValues[5], key: "DeleteRow", width: 50, template: "<a href='Home/Delete?cntID=${cntID}' class='confirmDialog'><button>Delete</button></a>" },
],
initialDataBindDepth: -1,
primaryKey: 'cntID',
width: '800',
updateURL: "Home/Update",
/*columnLayouts: [
{
key: "cntD",
responseDataKey: "Records",
autoGenerateColumns: false,
autoGenerateLayouts: false,
generateCompactJSONResponse: false,
primaryKey: "cntID",
foreignKey: "cntAddressID",
columns: [
{ key: "cntId", headerText: "Address Id", width: "150px" },
{ key: "cntAddressID", headerText: "Address", width: "150px" },
//{ key: "Street", headerText: "Street", width: "150px" },
//{ key: "City", headerText: "City", width: "150px" },
//{ key: "Zip", headerText: "Zip", width: "150px" }
]
}
],*/
features: [
{
name: "Selection",
mode: "row",
multipleSelection: false
},
{
name: 'Hiding'
},
{
name: 'Paging',
type: 'local',
pageSize: 10,
inherit: true
},
{
name: 'Filtering'
},
{
name: "ColumnMoving",
mode: "immediate",
//columnDragStart: function (event, ui) {
// ui.owner.element.find('tr td:nth-child(' + (ui.columnIndex + 1) + ')').addClass("ui-state-moving");
// colMovingKey = ui.columnKey;
//},
//columnDragEnd: function (event, ui) {
// var grid = $(event.target).data('igGrid');
// var newindex = grid.options.columns.indexOf(grid.columnByKey(colMovingKey)) + 1;
// grid.element.find('tr td:nth-child(' + newindex + ')').removeClass("ui-state-moving");
//},
addMovingDropdown: true,
mode: "deferred",
type: "render"
}
],
});
});
}
});
$(document).ready(function () {
$.ajaxSetup({ cache: false });
$(".editDialog").live("click", function (e) {
e.preventDefault();
var url = $(this).attr('href');
$("#dialog-edit").load(url);
$("#dialog-edit").toggle("slide");
});
$("#openDialog").live("click", function (e) {
e.preventDefault();
var url = $(this).attr('href');
$("#dialog-create").load(url);
$("#dialog-create").toggle("slide");
})
});
</script>
#section featured {
<section class="featured">
<div class="overlap">
<div class="content-wrapper">
<!-- the igHierarchicalGrid target element-->
<table id="employeeGrid" style="width: auto;"></table>
<p>
<a id='openDialog' href='Home/ManageEmployee?cntID=0&command=create' class='openDialog ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only' style="color: white;">Add Employee</a>
</p>
<div id="btn">
<button id="add">Add</button>
</div>