Feb 02, 2021, 1:41 PM
[CLOSED] Custom control with direct methods and remote validation
Hello support team,
I want to create a custom control with server methods placed inside the control and called from an associated JavaScript class. I tried to use DirectMethod and RemoteValidation for my purpose, but I'm not able to find a way how to call these server methods (both
Of course, I can use Ajax calls and place the required methods somewhere in the controller, but that's not what I would prefer in terms of code compactness.
I also wonder if it is possible to ensure that the
Can you please confirm that my intention is feasible and give me hints on how to achieve this?
Thank you for your assistance.
Ext JS 7.3.1.27 / Ext.NET 5.3.0
Kind regards
Dan
I want to create a custom control with server methods placed inside the control and called from an associated JavaScript class. I tried to use DirectMethod and RemoteValidation for my purpose, but I'm not able to find a way how to call these server methods (both
App.direct
and Ext.net.DirectMethods
are not defined in Ext.ux.form.ValidatedField).using Ext.Net;
using System;
using System.Collections.Generic;
using System.Linq.Expressions;
using System.Web.UI;
[assembly: WebResource("Nelis.Components.TextFields.ValidatedField.js", "text/javascript")]
namespace Nelis.Components
{
public partial class ValidatedField : TextField
{
public ValidatedField() {
IsRemoteValidation = true;
RemoteValidation.Type = DirectEventType.Load;
RemoteValidation.ValidationEvent = "blur";
}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
if (Vtype == "vtype1") RemoteValidation.Validation += new RemoteValidationDirectEvent.RemoteValidationEventHandler(MyValidateMethod1);
if (Vtype == "vtype2") RemoteValidation.Validation += new RemoteValidationDirectEvent.RemoteValidationEventHandler(MyValidateMethod2);
}
private void MyValidateMethod1(object sender, RemoteValidationEventArgs e)
{
throw new NotImplementedException();
}
private void MyValidateMethod2(object sender, RemoteValidationEventArgs e)
{
throw new NotImplementedException();
}
[DirectMethod]
public void MyDirectMethod(string vtype, string val)
{
Ext.Net.X.Msg.Alert("DirectMethod", "Direct method reached: " + vtype + " / " + val).Show();
}
public override string XType
{
get { return "validatedfield"; }
}
public override string InstanceOf
{
get { return "Ext.ux.form.ValidatedField"; }
}
protected override List<ResourceItem> Resources
{
get
{
List<ResourceItem> baseList = base.Resources;
baseList.Capacity += 1;
baseList.Add(
new ClientScriptItem(typeof(ValidatedField),
"Nelis.Components.TextFields.ValidatedField.js",
"Nelis.Components.TextFields.ValidatedField.js",
"",
""
));
return baseList;
}
}
}
#region EXT.NET
public partial class ValidatedField
{
new public class Builder<TField, TBuilder> : TextField.Builder<TField, TBuilder>
where TField : ValidatedField
where TBuilder : Builder<TField, TBuilder>
{
public Builder(TField component) : base(component) { }
}
new public class Builder : Builder<ValidatedField, Builder>
{
public Builder() : base(new ValidatedField()) { }
public Builder(ValidatedField component) : base(component) { }
}
}
public partial class NControlFactory
{
public ValidatedField.Builder ValidatedField()
{
return ValidatedField(new ValidatedField());
}
public ValidatedField.Builder ValidatedField(ValidatedField component)
{
component.ViewContext = this.HtmlHelper != null ? this.HtmlHelper.ViewContext : null;
return new ValidatedField.Builder(component);
}
}
public partial class NControlFactory<TModel>
{
public ValidatedField.Builder ValidatedFieldFor<TProperty>(Expression<Func<TModel, TProperty>> expression, bool setId = true, Func<object, object> convert = null, string format = null)
{
return InitFieldForBuilder<ValidatedField, ValidatedField.Builder, TProperty>(expression, setId, convert, format);
}
}
#endregion
}
Ext.ns("Ext.ux.form");
Ext.define("Ext.ux.form.ValidatedField", {
extend: "Ext.form.field.Text",
alias: "widget.validatedfield",
initComponent: function () {
this.callParent();
this.validateOnChange = false;
var me = this;
Ext.apply(Ext.form.VTypes, {
vtype1: function (val, field) { return me.vtype1(val, field); },
vtype1Text: "invalid vtype1",
vtype2: function (val, field) { return me.vtype2(val, field); },
vtype2Text: "invalid vtype2"
});
},
vtype1: function (val, field) {
if (!val) return;
console.log("VAL", val);
// => return MyDirectMethod(field.vtype, val) result
return true;
},
vtype2: function (val, field) {
if (!val) return;
console.log("VAL", val);
// => return MyDirectMethod(field.vtype, val) result
return true;
}
});
According to the thread Difference between DirectMethod, DirectEvent, Static DirectMethod, it should be possible to use a direct method defined inside user control or custom control, but I can't figure out how it should work.Of course, I can use Ajax calls and place the required methods somewhere in the controller, but that's not what I would prefer in terms of code compactness.
I also wonder if it is possible to ensure that the
vtype1
and vtype2
validators are called only for a blur event. Setting this.validateOnChange = false
causes that the validity is not evaluated immediately as the user is typing, but the function is still called after each change of the input value, which is not desirable for a potential server method.Can you please confirm that my intention is feasible and give me hints on how to achieve this?
Thank you for your assistance.
Ext JS 7.3.1.27 / Ext.NET 5.3.0
Kind regards
Dan
Last edited by fabricio.murta; Feb 19, 2021 at 1:55 PM.