I am using Laravel 5.7.
I have defined a variable $input_placeholder (value = "Your Name") in a controller and I am passing this variable onto a view ("create view", blade).
I am trying to access the variable from the view (fron an input placeholder), but the value displayed is not right. Only the first word is displayed (ex: only "Your" is displayed).
What am I missing here?
Route File:
Route::get('/create','HomeController#create')->name('create');
create view:
#extends('layouts.form')
#section('form_content')
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="name[]" placeholder={{$input_placeholder}} class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
#endsection
Create() function in controller:
{
public function create()
{
$data=[
'input_placeholder' => 'Your Name'
];
//no need for an array in this example but ultimately yes
return view('create')->with($data);
}
Ok, never mind, I found my mistake, {{$input_placeholder}} in between " " like this:
<td><input type="text" name="name[]" placeholder="{{$input_placeholder}}" class="form-control name_list" /></td>
I am leaving the question because I was not able to find a solution to my problem in StackOverflow. Therefore, I think it could be useful to other beginner-struggler like me.
If you think this question is not usefull, please let me know in a comment and I will delete it.
Related
I am trying to redirect to another local web page using a tag in Thymeleaf and Spring boot but it is
not working. I am redirecting from index.html to addEdit.html which are in the same folder.
Here is my code.
index.html
<div class="container">
<p th:text="${message}"></p>
<a th:href="#{/addEdit.html}" class="btn btn-outline-info">Add Employee</a> //not working
<table class="table table-bordered table-dark">
<thead class="">
<tr>
<th>#</th>
<th>Name</th>
<th>Departmen</th>
<th>Position</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr th:each="employee : ${employees}" >
<th th:text="${employee.id}"></th>
<td th:text="${employee.name}"></td>
<td th:text="${employee.department}"></td>
<td th:text="${employee.position}"></td>
<td>
<form action="delete">
<input type="submit" value="Delete" class="btn btn-outline-warning"/>
</form>
</td>
<td>
<form action="edit">
<input type="submit" value="Edit" class="btn btn-outline-info"/>
</form>
</td>
</tr>
</tbody>
</table>
</div>
my EmployeeController
#Autowired
private employeeRepo repo;
#RequestMapping("/")
public String home(Model model) {
List<Employee> list = new ArrayList<>();
list = repo.findAll();
model.addAttribute("employees",list);
return "index";
}
#PostMapping("/addEmployee")
public void addEmployee(Employee employee,Model model) {
repo.save(employee);
model.addAttribute("message","Add Successfully");
home(model);
}
my addEdit.html
<div class="container bg-light">
<form action="addEmployee">
<input class="form-control form-control-sm" type="text" placeholder="Name" name="name"><br>
<input class="form-control form-control-sm" type="text" placeholder="Department" name="department"><br>
<input class="form-control form-control-sm" type="text" placeholder="Position" name="postion"><br/>
<input type="submit" value="Add Employee" class="btn btn-outline-success btn-lg btn-block">
</form>
</div>
You should not include the .html in your link. The link should point to a URL that your controller exposes. There is currently no controller method that exposes the /addEdit url for example.
So update your controller:
#GetMapping
public String addEmployee(Model model) {
// add model attributes here as needed first
return "addEdit" // This refers to the view, so 'addEdit.html'
}
Now update the link to:
<a th:href="#{/addEdit}" class="btn btn-outline-info">Add Employee</a>
I started working with MVC from few days and got a question out of learning lot of ways to communicate between Controllers and Views in MVC
I have page that shows list of employees in tabular form.
Model is of type IEnumerable of Employee Model
It has three buttons they are Edit, Create, Delete, Details.
Requirement:
I used buttons so that all should be of HTTP Post request type because I do not want users to directly access them using URL requests.
Here is my view code:
#using (Html.BeginForm())
{
<p>
<input type="submit" name="CreateView" value="Create New(Post)" formaction="CreateView" formmethod="post" />
</p>
<table class="table">
<tr>
-------Headings of table-------
</tr>
#foreach (var item in Model)
{
<tr>
<td>#Html.DisplayFor(modelItem => item.EmployeeName)</td>
<td>#Html.DisplayFor(modelItem => item.EmployeeGender)</td>
<td>#Html.DisplayFor(modelItem => item.EmployeeCity)</td>
<td>#Html.DisplayFor(modelItem => item.DepartmentId)</td>
<td>#Html.DisplayFor(modelItem => item.EmployeeDateOfBirth)</td>
<td>
<input type="submit" name="EditView" value="Edit(Post)" formaction="Edit" formmethod="post" /> |
<input type="submit" name="DetailsView" value="Details(Post)" formaction="Details" formmethod="post" /> |
<input type="submit" value="Delete(Post)" onclick="return confirm('Are you sure you want to delete record with EmployeeId = #item.EmployeeId')" />
</td>
</tr>
}
</table>
}
Here delete button works because I do not need the id of the employee.
But for other actions like editing, deleting and details viewing I need to pass Employees Id to controller. But how do I pass the Id to the controller using submit button.
In get requests types I used to pass like this:
#Html.ActionLink("Details", "Details", new { id = item.EmployeeId })
For single submit button I used to pass data like this
#using (Html.BeginForm("Details", "BusinessLayer", FormMethod.Post, new { id = item.EmployeeId }))
Can any one tell me the approach that I can fallow to achieve this?
You can have 3 separate form tags, one for each button. Just make sure you have an input field inside the form for the data you want to pass. For example if your action method is accepting the EmployeeId with a a parameter called EmployeeId, you should have in input hidden field with the same inside the form.
#model IEnumerable<Employee>
<table>
#foreach(var item in Model)
{
<tr>
<td>#item.EmployeeName</td>
<td>#item.EmployeeGender</td>
<td>#item.EmployeeCity</td>
<td>#item.EmployeeDateOfBirth</td>
<td>
#using(Html.BeginForm("Details","YourControllerName"))
{
<input type="hidden" name="EmployeeId" value="#item.EmployeeId" />
<input type="submit" value="Details" />
}
#using(Html.BeginForm("Edit","YourControllerName"))
{
<input type="hidden" name="EmployeeId" value="#item.EmployeeId" />
<input type="submit" value="Edit" />
}
#using(Html.BeginForm("Delete","YourControllerName"))
{
<input type="hidden" name="EmployeeId" value="#item.EmployeeId" />
<input type="submit" value="Delete" />
}
</td>
</tr>
}
Also remember, nested forms are invalid HTML. So make sure you do not have those.
I'm trying to bind the model from the partial view to my main form. My Model workoutPlan only stores a list of WorkoutSets
public List<WorkoutSet> WorkoutSet;
In my main page. My form looks something like this:
#model WorkoutPlanObjects.WorkoutPlan
#using (Html.BeginForm("AddNewPlan", "Workout", FormMethod.Post))
{
if (Model != null)
{
<table id="workoutTable">
<tr>
<td>
#{Html.RenderPartial("~/Views/Partial/_AddNewPlan.cshtml", Model);}
</td>
</tr>
</table>
}
<input type="submit" id="submit" value="submit" />
}
and here's my partial view _AddNewPlan
#model WorkoutPlanObjects.WorkoutPlan
#if(Model!=null)
{
foreach (var item in Model.WorkoutSet)
{
#Html.TextBoxFor(a => item.Repeats)
}
}
I was able to update my partial view using ajax calls but when I try to submit the form, no values get passed. Here's the snippet of the code in chrome which shows the rendered partial view (excuse the formatting). Any solution for this?
I could see that the name of the rendered views are all the same item.Repeats. How should I change this partial view name to bind with the main page model?
<form action="/Workout/AddNewPlan" method="post">
<table id="workoutTable">
<tbody><tr>
<td>
<input id="item_Repeats" name="item.Repeats" type="text" value="1">
<input id="item_Repeats" name="item.Repeats" type="text" value="2">
<input id="item_Repeats" name="item.Repeats" type="text" value="3">
<input id="item_Repeats" name="item.Repeats" type="text" value="4">
</td>
</tr>
</tbody>
</table>
<input type="submit" id="submit" value="submit">
</form>
Change your foreach loop to a for loop so that the inputs are correctly named
foreach (iny i = 0; i < Model.WorkoutSet.Count; i++)
{
#Html.TextBoxFor(a => a.WorkoutSet[i].Repeats)
}
which will render
<input .... name="WorkoutSet[0].Repeats" type="text" value="1">
<input .... name="WorkoutSet[1].Repeats" type="text" value="2">
and allow the DefaultModelBinder to bind the collection.
Note property WorkoutSet will need to be IList. Alternatively you can create a custom EditorTemplate for WorkoutSet and use #Html.EditorFor(m => m.WorkoutSet)
I need help creating an 'edit' action that selects a specific model from a list of models, and in that table, edits the model. A quick-edit of sorts.
<tbody>
{{#each}}
<tr class="people-list">
<td>
<input type="checkbox" class="toggle">
<label class="category-text">{{#linkTo 'category' this}}{{Name}}{{/linkTo}} </label>
<img class="table-img" src="images/x.png">
<img class="table-img" {{action 'edit'}} src="images/pencil-grey.png">
</td>
</tr>
{{/each}}
</tbody>
By clicking {{action 'edit'}}, {{Name}} becomes and editable input. This is all done without leaving the '/categories' url.
Thanks guys :D
<tbody>
{{#each}}
<tr class="people-list">
<td>
<input type="checkbox" class="toggle">
{{#if isEdit}}
{{input type="text" valueBinding="Name" name="Name"}}
{{else}}
<label class="category-text">{{#linkTo 'category' this}}{{Name}}{{/linkTo}}</label>
{{/if}}
<img class="table-img" src="images/x.png">
<img class="table-img" {{action 'edit'}} src="images/pencil-grey.png">
</td>
</tr>
{{/each}}
</tbody>
And then on the controller:
actions: {
edit:function(){
this.set('isEdit', true);
}
}
I have this grid which has an edit button. How do I add code to the input button so that the value of the Id is sent to the Controller?
#using (Ajax.BeginForm("EditLineItem", "OrderSummary", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "content" })) {
<div id="summaryGrid">
<table >
<tr>
<th>Report Type</th>
<th>Borrower Name</th>
<th>Property Address</th>
<th>Est Comp Date</th>
<th>Report Price</th>
<th>Exp Fee</th>
<th>Disc.</th>
<th>Total Price</th>
</tr>
#{
foreach (var item in Model) {
<tr>
<td >#item.ReportName</td>
<td >#item.BorrowerName</td>
<td >#item.Address</td>
<td >#item.EstimatedCompletionDate</td>
<td >#item.ReportPrice</td>
<td >#item.ExpediteFee</td>
<td >#item.Discount</td>
<td >#item.TotalPrice</td>
<td >#item.Id</td>
<td ><input type="submit" value="Edit" /></td>
</tr>
}
}
</table>
</div>
}
just put a name on your input button.
<input type="submit" name="id" value="edit" />
Then on your action, you should be able to get the value for id.
If you want more complexity then you are going to have to rethink the way you are doing it. Most likely by writing your own JQuery methods.
$('input.edit').on('click', function (evt) {
evt.preventDefault();
var values = $(this).data();
$.post($(this).attr('href'), values, function (result) { /*do something*/ });
});
Html :
<a href="/edit/1" class="edit" type="submit" data-id="1" data-method="edit" />
That's a start, but you could probably tweak it to fit your needs. At that point, you don't need to wrap the whole table with the Ajax.BeginForm.
To add to Khalid's answer: I tested with this form:
<form method="get">
<input type="submit" name="Id1" value="Edit" id="id1" />
<input type="submit" name="Id2" value="Edit" id="id2" />
<input type="submit" name="Id3" value="Edit" id="id3" />
</form>
The post looks like this when clicking on the third button:
http://localhost:34605/HtmlPage.html?Id3=Edit
In other words, the browser passes the name of whichever button is clicked.
This is an example of getting the Id in the controller:
if (Request.QueryString.HasKeys()) {
string key = Request.QueryString.GetKey(0);
int id;
int.TryParse(key.Substring(2, 1), out id);
Response.Write("You selected id: " + id);
}
I have since found an even easier way of doing this:
Use the <button> element instead of <input>
With <button> you can do this:
<button type="submit" value="#item.Id" name="id">Edit</button>
and then in the controller, all you need is this:
public ActionResult EditLineItem(int id)
{ //Do something with id}
Note that this does not work with IE6.