PDA

View Full Version : [CLOSED] FormPanel loaded with invalid fields



aguidali
Sep 17, 2014, 3:09 PM
Hi Guys,

as usual I have a dumb question; I have a window with a formpanel with some validation logic. When the form is submitted if there are errors then I show the message target near the control. And it works very well.


@(
X.Window()
.ID("WizardAddUserWindow1")
.Height(510)
.Icon(Icon.UserAdd)
.Width(windowWidth)
.Title("Nuovo utente (Passo 1 di 4)")
.Resizable(false)
.Closable(true)
.Border(true)
.Layout(LayoutType.Fit)
.CloseAction(CloseAction.Destroy)
.Modal(true)
.Items(
X.FormPanel()
.ID("WizardFormPanel1")
.Url(Url.Action("WizardUserAddStep1", "Admin"))
.Border(false)
.Header(false)
.BodyPadding(10)

.FieldDefaults(def =>
{
def.MsgTarget = MessageTarget.Side;
})
.Items(
field =>
{
field.Add(
Html.X()
.Panel()
.ID("PanelHeader1")
.Html("<h1 class='margin-top-0'>Creazione guidata nuovo utente:</h1><p>Passo 1 di 4: dati anagrafici</p>")
.Header(false)
.Border(false)
);

field.Add(
Html.X()
.Panel()
.ID("PanelHeader1Line")
.Html("<hr />")
.Header(false)
.Border(false)
.StyleSpec("padding: 0px; margin-bottom: 10px;")
);

field.Add(
Html.X().TextFieldFor(m => m.userAddDto.Firstname)
.FieldLabel("Nome")
.Width(componentWidth)
.LabelWidth(labelWidth)
.AllowBlank(false));

field.Add(
Html.X().TextFieldFor(m => m.userAddDto.Lastname)
.FieldLabel("Cognome")
.Width(componentWidth)
.LabelWidth(labelWidth)
.AllowBlank(false));

field.Add(
Html.X().TextFieldFor(m => m.userAddDto.Username)
.FieldLabel("Nome utente")
.Width(componentWidth)
.LabelWidth(labelWidth)
.AllowBlank(false));

field.Add(
Html.X().TextFieldFor(m => m.userAddDto.PhoneNumber)
.FieldLabel("Telefono")
.Width(componentWidth)
.LabelWidth(labelWidth));

field.Add(
Html.X().TextFieldFor(m => m.userAddDto.CelNumber)
.FieldLabel("Cellulare")
.Width(componentWidth)
.LabelWidth(labelWidth));

field.Add(
Html.X().TextFieldFor(m => m.userAddDto.Email)
.FieldLabel("Email")
.Width(componentWidth)
.LabelWidth(labelWidth)
.AllowBlank(false)
.Vtype("email")
.VtypeText("Il valore inserito deve essere un indirizzo email nel formato \"utente@dominio.com\""));

field.Add(
Html.X().DateFieldFor(m => m.userAddDto.dtValidFrom)
.FieldLabel("Valido dal")
.AllowBlank(true)
.Width(componentWidth)
.LabelWidth(labelWidth)
.Format(format)
);

field.Add(
Html.X().DateFieldFor(m => m.userAddDto.dtValidTo)
.FieldLabel("Valido al")
.AllowBlank(true)
.Width(componentWidth)
.LabelWidth(labelWidth)
.Format(format)
);

field.Add(
Html.X().ComboBoxFor(m => m.userAddDto.strExpireTypeId)
.ID("cbxFirm")
.FieldLabel("Scadenza password")
.Editable(false)
.AllowBlank(false)
.Width(componentWidth)
.LabelWidth(labelWidth)
.Items(
from p in Model.userAddDto.listExpireType
select
new Ext.Net.ListItem
{
Text = p.Description,
Value = p.Val.ToString()
})
);

field.Add(
Html.X()
.Panel()
.ID("PanelBody1Line")
.Html("<hr />")
.Header(false)
.Border(false)
);

field.Add(
Html.X().CheckboxFor(m => m.userAddDto.bIsAdmin).BoxLabel("Utente con privilegi di amministratore").HideLabel(true)
.Width(componentWidth)
.LabelWidth(0)
);

field.Add(
Html.X().CheckboxFor(m => m.userAddDto.bIsDisabled).BoxLabel("Utente disabilitato").HideLabel(true)
.Width(componentWidth)
.LabelWidth(0)
);
}
)
.Buttons(
X.Button()
.ID("btnNext")
.Text("Prossimo")
.Icon(Icon.NextGreen)
.Handler("Hsi.accountModule().WizardAddUserStep1();")
)
)
)

After submission the record is saved; I would like to implement a check in the edit window like below:
Edit button pressed on the record -> if one or more properties are invalid then the related control in the window is marked as invalid with message at the right side.

Do you have any suggestion?

Best regards

Daniil
Sep 18, 2014, 6:40 AM
Hi @aguidali,

If you want a validation message to appear on the side of a component, please use this setting for that component.

.MsgTarget(MessageTarget.Side)

See also
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.Labelable-cfg-msgTarget

aguidali
Sep 18, 2014, 12:11 PM
Hi Daniil,

probably the question isn't clear; I have already the validation message on the component side. The messages become visible after submitting the formpanel (because in the POST action I return the FormPanelResult with the Errors list populated correctly).

But there is another scenario important for me: I would like to load (as result of a direct event, for example if I want to edit something) a window with a formpanel inside. Each component of the window will be loaded with the corresponding value stored in the Model. If one of the value stored in the Model is not valid I want that the component is marked as error (with the usual exclamation point with a message related).

In the Post scenario the error message is in FormPanelResult.Errors, but how can I handle the other scenario?

Maybe there is a way to include a list of errors in the PartialViewResult...

So generally speaking the question is: How can i return a PartialViewResult that include a window with a FormPanel inside with some component marked with error?

Thanks.

Best regards

Daniil
Sep 18, 2014, 2:57 PM
Understand.

Please take a look at this example:
http://mvc.ext.net/#/Models/Model_State/

I guess it might suite your needs.

aguidali
Sep 18, 2014, 3:57 PM
Hi,

but the example in the link the error message become visible only after submit.
If the value related to the component (for example using textboxfor(m => m.name)) is invalid I would like to show the error near the component immediately (on window loading).

Example of controller in pseudo code:


[Authorize]
[RequireHttps]
public ActionResult WizardUserAddStep1()
{
// Load vm from session for example
//if (vm.name.isInvalid)
//{
// this.ModelState.AddModelError("userAddDto.name", "Test"); // this shoud be correct in pure asp.net mvc
//}
return new PartialViewResult { ViewName = "WizardUserAddS1", Model = vm};
}

Best regards

Daniil
Sep 19, 2014, 9:34 AM
Yes, the example is not exactly your scenario, but it demonstrates the ModelState functionality which might be useful in your scenario as well.

Though, now I am thinking about another approach. If client side validation is built according to the Model, you can just call

App.FormPanel1.validate();
just after rendering the partial view.

It will validate all the FormPanel's components.