I'm new on Dojo, and I'm trying to validate a form (like the last one of this example : http://dojotoolkit.org/documentation/tutorials/1.6/validation/), using Struts2 tags, but I can't.
With a "classic" HTML form (tags , ....) everything is fine, but with Struts 2 tags (), the "required" validation don't work ...
Here is my code :
<script type="text/javascript">
dojo.require('dojox.validate');
dojo.require('dojox.validate.us');
dojo.require('dojox.validate.web');
/* basic dijit classes */
dojo.require('dijit.form.CheckBox');
dojo.require('dijit.form.Textarea');
dojo.require('dijit.form.FilteringSelect');
dojo.require('dijit.form.TextBox');
dojo.require('dijit.form.ValidationTextBox');
dojo.require('dijit.form.DateTextBox');
dojo.require('dijit.form.TimeTextBox');
dojo.require('dijit.form.Button');
dojo.require('dijit.form.RadioButton');
dojo.require('dijit.form.Form');
dojo.require('dijit.form.DateTextBox');
/* basic dojox classes */
dojo.require('dojox.form.BusyButton');
dojo.require('dojox.form.CheckedMultiSelect');
</script>
<s:form dojoType="dijit.form.Form" method="post" id="toto"
theme="simple">
<script type="dojo/method" event="onSubmit">
if(this.validate()) {
return confirm('Form is valid, press OK to submit');
} else {
alert('Formulaire invalide');
return false;
}
return true;
</script>
<table cellpadding="0" cellspacing="2">
<tr>
<td valign="top"><strong>First Name*: </strong></td>
<td>
<s:textfield
name="email"
id="email"
placeholder="Your email"
dojoType="dijit.form.ValidationTextBox"
required="true"
missingMessage="Obligatoire !" />
</td>
</tr>
</table>
<s:submit
value="Submit Form"
label="Submit Form"
id="submitButton"
dojoType="dijit.form.Button"/>
</s:form>
How can I check that my fields are not empty with struts tags please ?
Thank you all
You need to check to make sure that what you're rendering is what Dojo expects. I don't know how the current Dojo validation works, but:
The "required" attribute is an attribute of <s:textfield>, it's likely not being rendered, thus not available to Dojo--if that's what Dojo uses to determine if a field is required.
Related
Blazor vRC1
There appears to be subtleties of the EditForm component, where it will not render its contents in certain markup situations. For example, when an EditForm is placed within the <table> tags, nothing happens.
<table>
<thead>...</thead>
<EditForm Model="MyModel">
#foreach(var item in MyModel.Items)
{
<tr><td>....</td></tr>
}
</EditForm>
</table>
However wrapping the <table> with the EditForm everything renders as expected.
<EditForm Model="MyModel">
<table>
<thead>...</thead>
#foreach(var item in MyModel.Items)
{
<tr><td>....</td></tr>
}
</table>
</EditForm>
I'm fine with the latter, however if the rendering engine is unable to handle the first example, it would be nice if it'd throw some sort of error to warn the developer the situation is not supported.
Avoiding making form as a child element of a table . As a workaround , you can try add a <div> and move EditForm inside it(although it's not correct to put div nested in form ) , or you can put form inside table cell(inside <td> tag) .
<table>
<thead>...</thead>
<div>
<EditForm Model="MyModel">
#foreach(var item in MyModel.Items)
{
}
</EditForm>
</div>
</table>
Or :
<table>
<thead>...</thead>
<tr>
<td>
<EditForm Model="MyModel">
#foreach(var item in MyModel.Items)
{
}
</EditForm>
</td>
</tr>
</table>
But of course , it's better to have your table inside form .
when an EditForm is placed within the tags, nothing happens.
That is because
<table>
<EditForm Model="MyModel">
</EditForm>
</table>
translates to
<table>
<form>
</form>
</table>
Blazor outputs this alright but most browsers won't render it. It is invalid HTML.
Putting a <div> around the form , like in #NanYu's answer, is a hack but it seems to work. Putting a <form> inside a <td> is completely valid.
So: not a Blazor / Razor issue, just invalid html.
it would be nice if it'd throw some sort of error to warn the developer the situation is not supported.
Building all (for different Browsers) into the razor engine would be a lot of work and seems unnecessary.
I have a simple Razor page and I'm trying to display a button which when clicked will execute a method in the page model code behind, similar to C#'s WPF button. I don't want to use any javascript at all.
I've gotten to a point where it kinda does what I want it to but on page load it executes the method for each element in the for each list. This is something I don't want, I just want the method to be executed on button press.
The razor page code with the for loop is as follows:
#foreach (var item in #Model.UserData)
{
<tr>
<td>#item.Owner</td>
<td>#item.InputPath</td>
<td>#item.OutputPath</td>
<td>#item.Status</td>
<td>
<form asp-action="#Model.DownloadCsv(#item.OutputPath)" method="post">
<button>Download</button>
</form>
</td>
</tr>
<tr>
<td colspan="5"> <hr /> </td>
</tr>
}
In the code behind I just have this right now:
public IActionResult DownloadCsv(string inputPath)
{
int i = 0;
return Page();
}
You could use asp-page-handler to select handler and asp-route-{attribute} to pass the parameter.And use return File() to download the file without page refreshing.
Page:
#page
...
<td>
<form method="post">
<button type="submit" asp-page-handler="DownloadCsv" asp-route-inputPath="#item.OutputPath"
class="btn btn-success">
Download
</button>
</form>
</td>
PageModel:
public ActionResult OnPostDownloadCsvAsync(string inputPath)
{
//other logic
return File("path\to\file", "application/octet-stream",
"DownloadFileName.csv");
}
Refer to
Download file to browser using .NET Core Razor Pages
Return PDF to the Browser using Asp.net core
I have a form written in ASP.NET MVC4/Razor. The form post works perfectly well in Firefox and Chrome, but for some reason in Internet Explorer 10 and 11, the "Submit" button is unresponsive. (Internet Explorer 9 works also good).
This is how my form in the view looks like:
<div class="bla">
<table style="width:100%;">
#using (Html.BeginForm("MyAction","MyController", FormMethod.Post, new {id="myID"}))
{
<thead>
<tr>
<th class="heading highlight">Enter Registration</th>
<th>
<span style="display: block;">
#Html.EditorFor(model => model.Sign)
<input style="margin-left:4px;" type="submit" value="Save" />
</span>
<span style="display: block; font-weight: normal;">#(Model.SignDescription)</span>
</th>
</tr>
</thead>
}
</table>
</div>
And this is my Controller:
[HttpPost]
public ActionResult MyAction(InfoModel infoModel)
{
if(!string.IsNullOrEmpty(infoModel.Sign))
{
//do something
}
infoModel = LoadModel ();
return (indoModel);
}
I really have no idea why this is happening...
THanks in Advance!
EDIT:
My form is inside a table, I forgot to add it..
Your markup is invalid - form element cannot be child of table element. Rearrange your markup so #using (Html.BeginForm( will be inside <th> .
you don't need to Write 'Mycontroller' complete try writing with prefix only in form.
Also ensure that your users haven't disabled JavaScript.
I spent the last 2 days trying to work out why this didn't work on IE8, but was fine on other browsers. I even had to build a windows XP hyper-v installation, just to try and reproduce the issue!
I am working in ASP.Net MVC4 with Dojo. I have a strange problem when I am adding new rows to html table. I need to have a table which supports adding and removing rows and textboxes inside should have dojo style. I referred the post http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/ ad tried to create the same thing. Let me explain my code. Below is my view
#section scripts {
<script type="text/javascript">
require(["dojo/parser", "dijit/form/TextBox", "dijit/form/Button"]);
</script>
}
<table id="servicesTable">
<tr>
<th>
<label id="lblSelectService">
Select</label>
</th>
<th>
<label id="lblServiceName">
Name</label>
</th>
<th>
<label id="lblTitle">
AE Title</label>
</th>
</tr>
#for (int i = 0; i < Model.Services.Count; i++)
{
#Html.Partial("_ServiceRow", Model.Services[i])
}
</table>
My partial view for rendering each row is like below
#model WebUI.Models.RemDevServiceViewModel
<tr>
<td>
#Html.CheckBoxFor(x => x.IsMarked,
new { id = #String.Format("Service[{0}]IsMarked", #Model.ID) })
</td>
<td>
<input style="width: 100px; id="Service[#Model.ID]Name"
name="Service[#Model.ID].Name" type="text"
data-dojo-type="dijit/form/TextBox" value="#Model.Name"/>
</td>
<td>
<input style="width: 100px;" id="Service[#Model.ID]Title"
data-dojo-type="dijit/form/TextBox"
name="Service[#Model.ID].Title" type="text"
value="#Model.Title" />
</td>
</tr>
I have an add button which will add new row to the table. The problem that I am facing is, new row does not get the dojo style and they are rendered as normal textboxes. Initially loaded rows are rendered as dojo style text boxes, but the newly added are not like that. My jquery function to add new rows is like below
function addNewService() {
$.ajax({
url: rootPath + "MyController/AddNewService",
type: "get",
cache: false,
success: function (html) {
$("#servicesTable tbody").append(html);
},
error: function (ts) {
alert("Error while adding services");
}
});
}
Can any one tell me how to solve this? Please note that I am aware about the existence of Dojo grid. I want to take the advantage of model binding and hence following this style
Try running the parser over the added nodes. Are you seriously loading jquery on the page as well? Anyway, with the code you've got, it's kind of tricky to select the just added nodes, but if you put the following inside the success method it might work.
var newNodes = $(html).appendTo("#servicesTable tbody");
require(["dojo/parser"], function(parser){
newNodes.forEach(function(node){
parser.parse(node);
});
});
If you parse over nodes that were already parsed, the parser will throw an error. Also, if you need to support older browsers you'll want to replace the forEach with a standard for loop.
Thanks a lot David for your reply. Your code did not work exactly, but I got the idea and below code is working for me. Please dont feel that I am answering my own question. I want to format the code properly and hence using this view. Once again thanks a lot
success: function (html) {
var newNodes = $(html).appendTo("#servicesTable tbody");
require(["dojo/_base/array", "dojo/parser"], function (array, parser) {
array.forEach(newNodes, function (node, i) {
parser.parse(node);
});
});
I tried to ask this question once before but I didnt supply enough info. I have a form on a web site that I do not control so I can't change the web. From my vb.net app I need to be able to click the submit button after I fill out the needed text.
The text fills in ok, but the submit just refreshes the screen. I am wondering if I have to call Java or something?
The VBNet part looks this this:
Browser1.Document.Forms("Search").submit
I also tried this:
Browser1.Document.GetElementById("Search").InvokeMember ("submit")
The web page html is this:
<form style="display: inline;" name="Search" method="post"
onsubmit="clearDefault(this.freetext); this.action=addCategory(escape(this.freetext.value) + this.category_id.value + '.html'); return true;">
<table class="innerTable" border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td><input style="width: 131px;" value=" enter name" name="freetext" size="9" onfocus="clearDefault(this);" type="text"></td>
<td><input class="search" src="/images/search.gif" value="Search" title="Search" type="image"></td>
</tr></tbody></table>
</form>
Have you tried InvokeMember("click") ?
Browser1.Document.GetElementById("Search").InvokeMember("click")
You must set .AllowNavigation property to "TRUE"
Browser1.AllowNavigation = True
And call submit method like this
Browser1.Document.Forms(0).InvokeMember("submit")
Or
Browser1.Document.Forms.GetElementsByName("Search").Item(0).InvokeMember("submit")