Pass parameter from Button to Java spring MVC controller - html

I've been looking for something that might help me to solve this without success. What I need is just to call a Spring Controller by pressing a Button element, and pass from it a RequestParam("statusId" in this specific case). Is there a way to do this without using JavaScript?
I have the next html:
<div class="tablero col-lg-4 col-md-4 col-sm-6">
<div class="inner-content">
<div class="rate">
<div class="number">
<span>${package}</span>
<span class="text">REFERRALS</span>
</div>
</div>
<div class="description">
<h3>
<i class="fa fa-shopping-bag"></i>
PACKAGE
</h3>
<label>Paquete</label>
<button class="btn-primary" onclick="location.href='listReferred.htm' id="package">GO TO LIST</button><!--The parameter should be send from this button-->
</div>
</div>
</div>
And the Spring MVC Controller:
#SuppressWarnings("unchecked")
#RequestMapping(value="/listReferred", method=RequestMethod.GET)
public String getListReferredPage(#RequestParam int statusId, Model model) {
RestTemplate restTemplate = new RestTemplate();
String url = URL_REFERREDTYPE_JSON+statusId;
List<SearchProspectTO> searchProspectToList = restTemplate.getForObject(url, List.class, statusId);
model.addAttribute("searchProspectToList", searchProspectToList);
return "portalInternoReferidos";
}

Surround at least the button element with a form, like this:
<form action="listReferred" method="get">
<button...
</form>
Add a name and value attribute to the button:
<button name="yourButton" value="[provide status id here]">GO TO LIST</button>
Alter #RequestParam int statusId to #RequestParam(value="yourButton") int statusId.
This will work except for older IE browsers - below Version 10 I think. These versions will return 'GO TO LIST' instead of the value.
As workaround you could use a hidden input, that has to be placed inside the form section as well.

Related

How to initialize an external reference in Thymeleaf?

If I had a Java class called for instance Buffet and one of its fields was something like:
#ManyToOne
private Chef chef
and I had to create a new Buffet object in an html form using Thymeleaf, how would I be able to refer to this chef field? At the moment my html looks like this:
<form th:action="#{/newBuffet}" method="POST" th:object="${buffet}">
<div>
<div>
<span><input type="text" th:field="*{name}" placeholder="name"/></span>
</div>
<div>
<span><input type="text" th:field="*{chef}" placeholder="chef"/></span>
</div>
<div>
<span><button type="submit">Invio<i class="material-icons">done</i></button></span>
</div>
</div>
</form>
and my controller like this:
#RequestMapping(value = "/newBuffet", method = RequestMethod.GET)
public String formBuffet (Model model) {
model.addAttribute("buffet", new Buffet());
return "newBuffet.html";
}
#RequestMapping(value = "/newBuffet", method = RequestMethod.POST)
public String addBuffet (#ModelAttribute("buffet") Buffet b, Model model) {
this.buffetService.save(b);
model.addAttribute("buffets", this.buffetService.listBuffets());
return "buffets.html";
}
the error it gives is, of course, because of the way Thymeleaf's input takes only strings whilst my input is an instance of my class Chef.

Blazor .NET doesn't render a component. It just displays as HTML Markup

Recently, I came across an issue and was able to fix it by cleaning the solution. But now I have the same issue and cleaning the solution does not fix my bug.
In my project, I use modals to display forms. So, I created a modal component with an EditForm to generate a new entity in my database.
<div class="modal">
<div class="modal-body">
<div class="row">
<div class="col s12">
<h5>New Item</h5>
</div>
</div>
<div class="row">
<EditForm Model="MyEntity" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInvalidSubmit">
<DataAnnotationsValidator />
<ValidationSummary></ValidationSummary>
<div class="input-field fixed col s12">
<InputText id="name" #bind-Value="MyEntity.Name" />
<label class="active" for="name">Name</label>
</div>
<div class="col s12">
<button class="right btn" type="submit">Create</button>
</div>
</EditForm>
</div>
</div>
<div class="modal-footer">
<button class="modal-close btn-flat">Close</button>
</div>
</div>
#code {
[Parameter]
public MyEntityClass MyEntity {get; set;}
[Parameter]
public EventCallback<Microsoft.AspNetCore.Components.Forms.EditContext> OnValidSubmit { get; set; }
[Parameter]
public EventCallback<Microsoft.AspNetCore.Components.Forms.EditContext> OnInvalidSubmit { get; set; }
}
At the index page I would like to use the component like this:
#page "/mypage"
<MyProject.Pages.Shared.MyModalComponent MyEntity="_newMyEntity" OnValidSubmit="HandleValidSubmit" InvalidSubmit="HandleOnInvalidSubmit" />
#*
Some more HTML Code ...
*#
#code{
private MyEntityClass _newMyEntity = new MyEntityClass();
void HandleValidSubmit()
{
// Write to Database ...
}
void HandleOnInvalidSubmit()
{
// Display Errormessage to User ...
}
}
Blazor doesn't render the component, it just renders as HTML markup with the variable names:
Now to the strange part: On a different page I built a table component to display complex data and there all works fine! Did I miss something?
I'm using .NET Core 3.1 Blazor Server Side with Visual Studio 2019 Enterprise Version 16.4.4
I found the reason for this weird behaviour: Visual Studio sometimes doesn't set the build action type to "Content" on creating a new blazor component. After changing and rebuilding all works fine.

taking input from button in thymeleaf

I am displaying a form to user with some details and then user clicks approve and reject. In the backend, I want to take this in one property - userAction, which can be "approve" or "reject".
How can I add input to the buttons that user clicks? And then this input is part of the object requestDto.
<form th:action="#{/mission/store/{uuid}(uuid=${uuid})}" th:object="${requestDto}" method="post" class="mission_form">
<div class="wizard-header">
<h3 class="wizard-title">
Approve Mission
</h3>
<h5>Should you chose to accept this mission, press approve.</h5>
</div>
<div class="wizard-footer">
<!--<div class="pull-right">-->
<input type='button' class="btn btn-success" name='approve' value='Approve' />
<!--</div>-->
<div class="pull-left">
<input type='button' th:field="*{}" class='btn btn-danger' name='previous' value='Decline' />
</div>
<div class="clearfix"></div>
</div>
</form>
First define a proper DataTransferObject:
public class MyRequestDto {
private String userAction;
// don't forget getters and setters
}
Then add a object of that class to your model
// if you are return a M&V-object:
ModelAndView mv = new ModelAndView("viewName")
ModelAndView.addObject("requestDto", new MyRequestDto());
// if you define a Model-Object as input-parameter:
Model.addAttribute("requestDto", new MyRequestDto());
Define a form like this (I used button-elements). The point is not to use the th:field attribute:
<form th:action="...." method="POST" th:object="${requestDto}">
<button name="userAction" value="approve" >Approve</button>
<button name="userAction" value="reject" >Reject</button>
</form>
Recieve the DataTransferObject by adding this to your controllers input-paramters (the controller that handels the post request):
... #Valid RequestDto requestDto, BindingResult bindingResult, ....
Now you can access requestDto's userAction-Attribute. The value is approve if you click the first button and it is reject if you click the second button. First you can check if there are binding errors by checking bindingResults.hasErrors().

ASP.NET MVC Redirect to same page after submit button is clicked

some friends and I have started a team project but we are stuck at this point. We made a function of the site to add comments under every post. The problem is that when submit is clicked it adds the comment but doesn't refresh the page which causes some problems. The author stays "anonymous" and when refresh button is clicked it shows an alert:
The page that you're looking for used information that you entered. Returning to that page might cause any action you took to be repeated. Do you wish to continue?
However, if we just type the URL again and click ENTER everything is good: the author shows up and the comment appears only once. So the only solution for us is to redirect to the same page. Here is the form:
<div style="text-align: left">
<div><i>Leave your comment</i>
</div>
<form method="post">
<fieldset>
<p>
<textarea rows="10" class="form-control" type="text" id="1" name="commentText" style="height: 100px"></textarea>
</p>
<p>
<input type="submit" name="buttonSubmit" onclick="redirect" value="Add comment" class="btn btn-default" style="" />
</p>
</fieldset>
</form>
</div>
This is how the comments are printed on the page:
<h3>Comments</h3>
<br>
<div>
#foreach (var comment in ViewBag.Comments) {
<section class="row">
<article class="post col-md-12">
<div class="about">
Posted on <i>#comment.Date</i>
#if (comment.AuthorId != null) { #: by <i>#comment.Author.FullName</i>
}else { #: by <i>anonymous</i>
}
</div>
<div class="body">#comment.Text</div>
</article>
</section>
}
</div>
Thanks in advance!
Use the #Ajax.BeginForm() helper.
In the AjaxOptions(), you'll want to set the Httpmethod to "Post", InsertionMode.InsertBefore (or After depending on where you want new comments), and UpdateTargetId = "your-comment-div".
You'll need to include jquery.unobtrusive-ajax.js so the Ajax helper works correctly. You can use the nuget package manager to pull it in. Be sure to add it to your jquery bundle.
Then, you need to create the post action in your controller to accept the comment params and return a partial view.
Doing thIs keeps the Ajax confined to a razor helper and controller method.
View:
#using (Ajax.BeginForm("AjaxAddComment",
"MyController",
/* route params */,
new AjaxOptions()
{
InsertionMode = InsertionMode.InsertBefore,
UpdateTargetId = "commentsDiv",
HttpMethod = "Post"
}, htmlAttributes: new { /* ... */ }))
{
<div class="form-horizontal">
#* comment form... *#
</div>
}
...
<div id="commentsDiv">
<div class="comment">...</div>
<div class="comment">...</div>
</div>
Controller:
[HttpPost]
//[ValidateAntiForgeryToken]
public async Task<PartialView> AjaxAddComment(string comment, /*...other params*/)
{
var newComment = ... // comment viewModel
// add comment to db
await db.SaveChangesAsync();
return PartialView("_CommentPartial", newComment);
}
_CommentPartial:
<div class="comment">
...
</div>

Angular + Typescript: Add to array, ng-repeat adds blank row

Trying to add a new object to an array and have it show up in an ng-repeat div. I add the object, look at the array in Chrome's dev tools and can see the new object in there, but the ng-repeat section just has a blank row. I've search throughout StackOverflow, implemented many solutions and still have this problem.
HTML:
<div ng-repeat="subItem in ec.mainItem.SubItems">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3 h4">
<button class="btn-link">{{subItem.Name}}</button>
</div>
<div class="col-md-6">
{{subItem.Description}}
</div>
</div>
</div>
</div>
</div>
ItemCtrl.ts
module MainItemApp {
'use strict'
export class MainItemEntryCtrl implements IMainItemCtrl {
static $inject = ['$scope', '$routeParams', 'ItemSvc'];
public mainItem: MainItem; //this has an array on it named SubItems
public sub_item_name: string;
public sub_item_description: string;
public sub_item_date: Date;
public sub_item_start_date: Date;
public sub_item_end_date: Date;
public sub_item_descriptive_location: string;
public sub_item_short_location: string;
constructor($scope, $routeParams: IItemEntryRouteParams, itemSvc: ItemSvc) {
this.id= this.getId($routeParams.id);
if (this.id!= undefined) {
itemSvc.getMainItem(this.id).then(
(data) => this.mainItem = data);
}
}
addSubItem() {
var subItem = {
id: '',
name: this.sub_item_name,
itemDate: this.sub_item_date,
startDate: this.sub_item_start_date,
endDate: this.sub_item_end_date,
description: this.sub_item_description,
descriptiveLocation: this.sub_item_descriptive_location,
shortLocation: this.sub_item_short_location,
geoLat: '',
geoLong: '',
groupItems: []
};
this.mainItem.SubItems.push(subItem);
}
}
When I click a button, AddSubItem runs, the item gets created and after the push, I can hover over subItems and see the array has two objects, the one I loaded with and the one I pushed, but the HTML that's generated gives me this:
<div ng-repeat="subItem in ec.mainItem.SubItems">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3 h4">
<button class="btn-link">Some Item</button>
</div>
<div class="col-md-6">
Some Description
</div>
</div>
</div>
</div>
</div>
<div ng-repeat="subItem in ec.mainItem.SubItems">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3 h4">
<button class="btn-link"></button>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
</div>
Any ideas? Any help would be greatly appreciated!
Sorry, bad post, I figured it out (isn't it always like that, as soon as you make a fool of yourself and ask, you figure it out). My data was coming back from the API with capitalized property names (i.e. Name, Description) and I was adding an object where the names were lowercase (i.e. name, description) so of course there was nothing to show in the newly added row. So I synced up the names coming from my API with the names in the Typescript classes and everything is working now. So of course when I searched for the answer, I couldn't find it: no one posted "Hey dummy! Check the casing on your properties!"
So I think I will leave this up just in case someone else runs across the same problem and it sparks them to check their casing.