Passing data from GSP to a controller in Grails - grails

I create a GSP page with controls depending on the rows in a database.
This depends on the value returned by the <g:each in="${Vehicles}" var="vehicle">
So, if there are 3 vehicles, 3 rows with text boxes will be generated. (The maximum can be 200)
<g:form action="update" >
<label for="SearchTerm">${term}</label>
<g:each in="${Vehicles}" var="vehicle">
<tr>
<td> <label for="Name">${vehicle.name}</label> </td>
<td><g:textField name="${vehicle.id}.ModelNo" /> </td>
<td><g:textField name="${vehicle.id}.Year" /> </td>
</tr>
</g:each>
<td> <g:submitButton name="update" value="Update"/></td>
</g:form>
How can I basically pass this value to my controller so that I can then save/update the data to the database. or Is there any easy way to achieve this scenario?

You need some code like this in the GSP
<g:form action="update" >
<label for="SearchTerm">${term}</label>
<g:each in="${Vehicles}" var="vehicle" status="i">
<tr>
<td> <label for="Name">${vehicle.name}</label> </td>
<td><g:hiddenField name="vehicle[${i}].id" value="${vehicle.id}"/>
<g:textField name="vehicle[${i}].ModelNo" value="${vehicle.ModelNo}"/> </td>
<td><g:textField name="vehicle[${i}].Year" value="${vehicle.Year}"/> </td>
</tr>
</g:each>
<td> <g:submitButton name="update" value="Update"/></td>
</g:form>
The Controller needs to either have a Domain with a List Property or a Command Object with a List Property ie
SearchCommand {
List<Vehicle> vehicle = new Arraylist<Vehicle>(3);
}
Then in the controller (if using the command object)
def save = {SearchCommand searchCmd->
searchCmd.vehicle.each {vehicle ->
/* Process Vehicle */
}
}
Hope that Helps

You need to use the request object from your controller. If you can generate the names of the controls you need to access do something like the following
idList.each {
theYear=request.getParameter(it+Year)
}
If you want a list of all your generated form fields use something like
java.util.Enumeration theFields=request.getParameterNames()
theFields.each {
//look at your field name and take appropriate action
}
For more info on the request object see this

Related

Thymeleaf: How to get selected item on click

I want to call a method with the clicked object as a param.
Problem: on every reload or button press the method is called for every element.
<form action="#" th:action="#{/}" th:object="${chessBoard}" method="post">
<table>
<tr th:each="i, iter1: *{board}">
<td th:each="item, iter2: ${i}">
<button th:onclick="${chessBoard.selected(item)}" th:text="${item.text}"></button>
</td>
<tr>
</table>
</form>
You don't need the onclick method in your form to submit a parameter.
You can simply pass a parameter to the controller with a RequestedParam annotation in your controller.
It will be something like:
<form th:action="#{/}" method="post">
<table>
<tr th:each="i: ${board}">
<td th:each="item: ${i}">
<button name="item" th:value="${item.id}" th:text="${item.text}"/>
</td>
<tr>
</table>
</form>
and in your controller:
#PostMapping (path = "/")
public String test(Model model, #RequestParam(name = "item") int id) {
System.out.println(id);
}
A second option is to use an attribute that you add to your model and you get back in your controller with something like:
#PostMapping("/")
public String greetingSubmit(#ModelAttribute ChessBoard chessBoard, Model model) {...}
Html will be something like
<form th:action="#{/}" th:object="${chessBoard}" method="post">
<table>
<tr th:each="i: ${board}">
<td th:each="item: ${i}">
<button th:field="*{id}" th:value="${item.id}" th:text="${item.text}"/>
</td>
<tr>
</table>
</form>

Multi HTML elements same ID in MVC

I am generating multi Data entry Line using ASP MVC , however
looking at the HTML source after generating by MVC, I've just noticed those HTML elements has a duplicated ID , even with the same html type it is look something wrong ? is that normal behavior in MVC and how to avoid it ? , I need really to have it unique, assuming MVC should handle the ID generation for multi line, which is additional concern to me .
My code :
#foreach (var item in Model.lstMeals)
{
<tr>
<td>
<input asp-for="#item.cuisine.CuisineName" />
#Html.DisplayFor(modelItem => item.cuisine.CuisineName)
</td>
</tr>
}
then looking in HTML Source :
<tr>
<td>
<input type="text" id="item_cuisine_CuisineName" name="item.cuisine.CuisineName" value="Italian" />
Italian
</td>
</tr>
<tr>
<td>
<input type="text" id="item_cuisine_CuisineName" name="item.cuisine.CuisineName" value="French" />
French
</td>
</tr>
<tr>
<td>
<input type="text" id="item_cuisine_CuisineName" name="item.cuisine.CuisineName" value="Greek" />
Greek
</td>
</tr>
If you use tag-helper within a loop, it won't generate an unique id for you for each element It doesn't have a context of the index position within the loop.
With that said, you can easily generate your own unique id "algorithm" for your HTML elements inside the loop with usage of the index:
#for(int i = 0; i < Model.lstMeals.Count(); i++)
{
<tr>
<td>
<input asp-for="#Model.lstMeals[i].cuisine.CuisineName"
type="text"
id="xxx-xxx-lstmeals-#i" />
</td>
</tr>
}
I think you can do it with for loop something like this.
#for (int i = 0; i < Model.lstMeals.Count; i++)
{
<tr>
<td>
<input asp-for="#Model.lstMeals[i].item.cuisine.CuisineName[i]" />
#Html.DisplayFor(modelItem => item.cuisine.CuisineName)
</td>
</tr>
}

Create dynamic table with webflow and grails

I'm trying to create a webflow with a dynamic table on one page. Which looks like this
def startFlow = {
contact {
on('next') {
flow.developer = params.developer
flow.project = params.project
flow.division = params.division
flow.projectResponsible = params.projectResponsible
flow.email = params.email
[flow : flow]
}.to('ipcount')
on('cancel').to('finish')
}
ipcount{
on('next'){
flow.ipcount = params.int('ipcount')
[flow: flow]
}.to('systems')
on('cancel').to('finish')
}
systems{
on('next') {
flow.hoster= params.hoster
flow.ip = params.ip
flow.os = params.os
flow.dns = params.dns
flow.systemDate = params.systemDate
[flow : flow]
}.to('url')
on('cancel').to('finish')
} ....
The problem is I that the number of systems could be different every time (1...n).
One idea was to ask the page before how many entries should be created (ipcount).
My view looks like this
<g:set var="count" value="${flow.ipcount}" />
<g:each in="${(1..'${count}')}">
<tr class="prop">
<td valign="top" class="name">
<label for="ip">IP Adresse:</label>
</td>
<td valign="top">
<td valign="top" class="value ${hasErrors(bean:hosterInstance,field:'ip','errors')}">
<input type="text" id="ip" name="ip" value="${params.ip}" />
</td>
<td valign="top" class="name">
<label for="dns">DNS:</label>
</td>
<td valign="top">
<input type="text" id="dns" name="dns" value="${params.dns}" />
</td>
<td valign="top" class="name">
<label for="os">Operating System:</label>
</td>
<td valign="top">
<input type="text" id="dns" name="dns" value="${params.os}" />
</td>
</tr>
</g:each>
Beside that this is not working as I get an Internal server error: (java.lang.String cannot be cast to java.lang.Integer) it would be nicer if I could at the table row dynamically on the page.
Here is the question: Is this possible with webflow and how? Especially I don't know how to handle the flow parameter and how to save the collected entries at the end of the webflow to the database.
If you need to work with a list of objects, command objects is the way to go. It supports databinding from the incoming request and will handle lists.
You can check a related question that show's you how to do it.
And in your view, you will need to handle the index in the name of your input. Example:
Consider
class System {
String ip
String dns
...
}
And commandInstance.systems a List<System>.
<g:each in="${commandInstance.systems}" var="command" status="i">
<input type="text" id="ip$i" name="systems[$i].ip" value="${command.ip}" />
</g:each>

MVC list of checkboxes check and select to Action then to csv file

I have a view like:
#model IEnumerable<VectorCheck.Models.Invoice>
#{
ViewBag.Title = "Exportable Invoices";
}
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>
<script src="../../Scripts/Views/Export/index.js" type="text/javascript"></script
<header class="header">
<div class="headerText">
<h1>Exportable Invoices</h1>
</div>
</header>
#using (Html.BeginForm("Export", "Export")) {
<table>
<tr class="mainheader">
<th>Invoice Number</th>
<th>Date</th>
<th>Organisation</th>
<th>Total (Excl GST)</th>
<th>Status</th>
<th>Exported Date</th>
<th>
<select id="expenseSelect"></select>
<input type="submit" id="btnexport" value="Export" />
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.InvoiceNumber)
</td>
<td>
#Html.DisplayFor(modelItem => item.InvoiceDate, "{0:D}")
</td>
<td>
#Html.DisplayFor(modelItem => item.Organisation.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.TotalExcludingGst)
</td>
<td>
#Html.DisplayFor(modelItem => item.Status)
</td>
<td>
#Html.DisplayFor(modelItem => item.ExportedDateTime)
</td>
<td class="centered">
<input type="checkbox" class="exportcheckbox" data-invoiceid=#item.InvoiceId />
</td>
</tr>
}
</table>
}
<div>
#Html.ActionLink("Back to Summary", "Index", "Invoice")
</div>
Ok, so see how each checkbox has an attribrute data-invoiceid=#item.InvoiceId. Well I'm trying to get to an action method the Ids of all the invoices that have had their checkboxes checked. Also I'm trying to get the id of the selectlist expenseSelect which has options added to it on page load via jquery. I managed to achieve this with jquery and then sending the data with a $.post. The problem is in the file I'm sending the info to:
public ActionResult Export()
{
...
var csvData = _utility.GetCsvData(data);
return File(Encoding.UTF8.GetBytes(csvData), "text.csv", "invoices.csv");
}
brings up a save/open file dialog. I'm been informed this won't work for the jquery ajax call and I need to post the info back using a submit.
That's fine but now I have no idea how to send the select id and a list of the ids of the checked checkboxes to the method. Can anybody show me how to go about this?
You don't need any HTML5 data-* attributes since they are not sent to the server when you submit the form. In order to send their values you will have to use AJAX but this won't work with file downloads. So simply give your checkboxes a name:
<td class="centered">
<input type="checkbox" class="exportcheckbox" name="ids" value="#item.InvoiceId" />
</td>
and then on the server the default model binder will automatically construct an array of the ids of the checked items:
[HttpPost]
public ActionResult Export(int[] ids)
{
byte[] data = ...
return File(data, "text/csv", "invoices.csv");
}
Depending on the type of InvoiceId you might need to adjust the type of the action argument.
Radically changing my answer...
You could dynamically add a hidden IFRAME to your page. The IFRAME src can take your selected "ids" as a querystring parameter. This should get your your download dialog.
Got some help with the jquery from here: JQuery: Turn array input values into a string optimization
var selectedIdsArray = $(":checked").map(function(){return $(this).attr('data-invoiceid');});
var url = '#Url.Action("Export", "Export")?csv=' selectedIdsArray.get().join(',');
$('body').append("<iframe style='visibility:hidden' src='"+url +"'/>");

ASP.Net MVC returning values from List of Checkboxes

I have a model with a property that is a List. MyObjects simply has an id, a description and a selected boolean property.
I have managed to display the items as checkboxes on my view. I did this via:
<%foreach (var cat in Model.DefaultCategories)
{%>
<tr>
<td>
<%=cat.Category %>
</td>
<td>
<%=Html.CheckBoxFor(x=>cat.Selected) %>
</td>
</tr>
<%
}%>
</table>
However, there is a problem. They all end up, when rendered, with the same names. Here's a portion of my list:
<tr>
<td>
Medical
</td>
<td>
<input id="cat_Selected" name="cat.Selected" type="checkbox" value="true" /><input name="cat.Selected" type="hidden" value="false" />
</td>
</tr>
<tr>
<td>
Salary
</td>
<td>
<input checked="checked" id="cat_Selected" name="cat.Selected" type="checkbox" value="true" /><input name="cat.Selected" type="hidden" value="false" />
</td>
</tr>
They have all been named "cat.Selected".
How can I resolve this?
And then, when I submit, I need to iterate through them. With different names, I assume I can get them in my HttpPost method:
[HttpPost]
public ActionResult Modify(int id, FormCollection formValues)
{
PayeeDto p = new PayeeDto { Name = Request.Form["name"], PayeeId = id };
Services.PayeeServices.Save(p);
return RedirectToAction("Index");
}
The FormCollection will have the different names? At the moment, it just has the single 'cat.selected' item.
There is a way you can submit collections to your action by using names with []. As described here http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx
<% for (int i = 0; i < Model.DefaultCategories.Count; i++) { %>
<td>
<input type="checkbox" name="[<%= i %>].Selected" <% Model.DefaultCategories[i].Selected ? "checked=\"checked\"" : string.Empty %>/>
</td>
<% }%>
Then your action can take a collection of models like so
public ActionResult Modify(int id, ICollection<UpdateModel> updates)
{}
I would recommend you using Editor Templates and stop writing loops in your views. They will take care of generating the proper names so that binding works. Example:
In your main view:
<table>
<thead>
<tr>
<th>Name</th>
<th>Selected</th>
</tr>
</thead>
<tbody>
<%: Html.EditorFor(x => x.DefaultCategories) %>
</tbody>
</table>
and then inside an editor template strongly typed to a Category (~/Views/Home/EditorTemplates/Category.ascx). Also if you want to get the corresponding Name back in your controller action you need to include it (probably as hidden field). Another technique involves adding only the id and then fetching back the relevant information from the database in your controller action:
<%# Control
Language="C#"
Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.Category>" %>
<tr>
<td><%: Model.Name %></td>
<td>
<!-- include the category name as hidden field so that
we can fetch it back in the controller action
-->
<%: Html.HiddenFor(x => x.Name) %>
<%: Html.CheckBoxListFor(x => x.Selected) %>
</td>
</tr>
Now the naming convention is important here. If the DefaultCategories property on your view model is an IEnumerable<Category>, then the editor template needs to be called Category.ascx and placed in ~/Views/Home/EditorTemplates/Category.ascx or if it will be reused between multiple controllers in ~/Views/Shared/EditorTemplates/Category.ascx.
Also your controller action you are submitting to should use a view model as parameter:
[HttpPost]
public ActionResult Modify(MyViewModel model)
{
PayeeDto = Mapper.Map<MyViewModel, PayeeDto>(model);
Services.PayeeServices.Save(p);
return RedirectToAction("Index");
}
This may not be the best answer but I try not to use generated checkboxes in MVC.
I would change
<td>
<%=Html.CheckBoxFor(x=>cat.Selected) %>
</td>
To
<td>
<input type="checkbox" name="<%: cat.value %>" id="<%: cat.value %>" <% cat.Selected ? " checked=\"checked\" " : ""; %> />
</td>

Resources