MVC HTML posting form data - html

Apologies in advance if this is a dumb question but I'm struggling to get the look and feel I want whilst posting the data I need to the server: s
I've built a simple file upload page using Dropzone.js and am able to upload files to the server. I also want to pass a value from a drop down to the same action method but can only achieve this if my drop down is contained within my dropzone (which I don't want!)
My Page and HTML look like this:
The class="dropzone" defines where the dropzone is and seems to be have to be attached to the action="~/Media/SaveUploadedFile" or the fallback class gets used instead and screws up the layout. So this code gives me the layout I want with the dropdown outside of the dropzone but does not pass the drop down value to my Action Method: (
What am I doing wrong?
Controller method:
public ActionResult SaveUploadedFile(string ContentDirectory)

Try using Html.BeginForm. Place your dropdown inside of the #using tag.
#using (Html.BeginForm("SaveUploadedFile", "Media", FormMethod.Post, new { #class = "dropzone", enctype = "multipart/form-data" }))
{
//Dropdown here
<div class="fallback">
<input type="file" name="file" />
<input type="submit" value="Upload" />
</div>
}
Here's a similar existing post for uploading files in MVC

Related

With use PathVariable CSS not loading and how to fill form to update in thymeleaf

I am trying to do same small service and sometimes I am sending requests to my Rest Api.
I am getting two problems:
How to fill field in form in html using thymeleaf? I have form like this and would like to fill fields with current values (th:value="${}" - not working for me):
<form th:action="#{/offences/edit}" method="post" th:object="${createOffenceForm}"> <input th:field="*{name}" th:value="${currentOffence.name}"/> <input th:field="*{penaltyPoints}" th:value="${currentOffence.penaltyPoints}"/> <input th:field="*{amountOfFine}" th:value="${currentOffence.amountOfFine}"/> <button type="submit">UPDATE</button> </form>
The problem is with loading css styles to html when I redirect to the site with path variable. For example i created html with two buttons. First one is hardcoded:
<a th:href="#{/offences/test}" class="link" style="text-decoration: none"><button class="buttonOK" type="submit">EDIT</button></a>
after redirect my site looks like this (everything works, it should be like that):
`
and here is after second button - redirect with path variable:
<a th:href="#{'/offences/edit/' + ${offence.id}}" class="link" style="text-decoration: none"><button class="buttonOK" type="submit">EDIT</button></a>
and view after load:
For the issue with your form data not being filled, this is because th:field and th:value are not meant to be used at the same time. So th:field ends up overwriting you value.
In your case I would suggest either manualy setting name (and id) or replacing th:object with the a filled version of the bean you want to return and only using th:field
As for the second issue it looks like a faulty fragment return on a post call to me but need to atleast have the controller functions and more complete html to say anything about that. And in general it's advisable to have 1 question per problem and not bundle things.
Ok so i found soultion.
To fill fields in form I only had to add to ModelMap form with fields.
Something like this and thymeleaf autofilled fields in html.
modelMap.addAttribute("createOffenceForm", new CreateOffenceForm(offenceDTO.getName(), offenceDTO.getPenaltyPoints(), offenceDTO.getAmountOfFine()));
Second solution is simple too. When changed mapping in Controller from #GetMapping("/path/{id}") to #GetMapping("/path-{id}") - everything works. There is no other problems with styles...

laravel blade form not routing to a named route

I am new to named routing in Laravel 5.5 and I am facing a strange thing while trying to perform an action of a form;
Setups and Explanations:
I set up my routes in web.php
Route::post('questions/save_bulk', 'QuestionsController#save_bulk')->name('save_bulk');
Route::post('questions/store_bulk', 'QuestionsController#store_bulk')->name('store_bulk');
Then I set up store_bulk and save_bulk in QuestionsController:
public function store_bulk(Request $request)
{
//$x = some DB::selects statements;
return view('questions.store_bulk', ['x'=> $x]);
}
public function save_bulk(Request $request){
dd($request);
}
And finally this is my blade form in questions.store_bulk which should lead to QuestionsController.save_bulk:
<form method="post" action="{{route('save_bulk')}}">
{{csrf_field()}}
/* some codes and input fields */
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit"/>
</div>
</form>
Problem
The problem is that when I submit this form, instead of taking me to the desired route and perform dd($request), it is just refreshing the page without the inputs I had as if Laravel took the last post form which returned the view questions.store_bulk.
Though this is the exact same way I used to get into the view questions.store_bulk in the first place, a strange thing occurs: when I try to inspect elements in the blade page I get the following:
<form method="post" action="http://127.0.0.1:8000/questions/store_bulk">
/* some codes and inputs */
</form>
in the codes the route should go to QuestionsController.save_bulk but when inspecting the HTML it says it goes to http://127.0.0.1:8000/questions/store_bulk, and if I inspect and change the route manually inside the HTML and write http://127.0.0.1:8000/questions/save_bulk it goes to the right route and perform dd($request).
Question
Why is this happening? am I missing something?
Note
I am using Laravel 5.5 locally on my PC preparing a website.
I've had similar issues with routing.. You can change the url.. e.g. questions/somethingelse/save_bulk.. so the urls won't clash.. Or run php artisan cache:clear or view:clear incase you implemented a page caching system

Print receipt button in razor

I'm new to Razor. I have my web pages complete but I'm at the point where I want to add a print button to my form.
I see where I can add a print button with Asp.Net here but I cannot find where I add it with Razor using MVC.
If there is a thread on this, point me in the right direction, but I didn't find one.
Am I to add a css and use javascript?
Anyone have any suggestions?
I used this answer:
Print ASP.NET Web Form
<input type="button" value="Print Form" onclick="window.print()" />
And it worked perfectly.
You can add any javascript event to any html-helper. For example to add Html-Attribute to Link.
#Html.ActionLink(
"print window",
"Print",
new { id = "someId" },
new { onclick = "window.print();" })

Inject model field in onclick event of input in Razor view

My client side scripting is rough and I just started with Razor. I haven't been able to find a way to do the following, where I want to inject a model field value within the onclick confirmation message:
#using (Html.BeginForm("Delete", "ManageLocations", new { id = #Model.Location.Id }))
{ <input type="submit" onclick="return confirm('Are you sure you wish to delete #Model.Location.DisplayLocation ?');" value="Delete">}
What am I missing?
Ooops, stupid mistake...I was embedding this BeginForm within another....The reason this does not work is you cannot have one form nested within another.

Using MVC, How can I pass an anchor tag on a form submit?

In short, I'm trying to hit an anchor on the page I am submitting to.
So my code looks like:
#using (Html.BeginForm("Times#" + Model.SelectedTimeSort, "Patron", FormMethod.Post, new { id = "frmBuildings" }))
but on the form it comes out as:
<form action="/Times%23Evening" id="frmBuildings" method="post">
How do I set this up to submit and pass an anchor tag?
Assuming you are posting to another MVC method on your application:
You would need to add some JavaScript to the page, then in your ViewModel add an Anchor string property which is set in the MVC controller postback code, when the view loads the javascript (onLoad) can detect the parameter and scroll the page to the anchor:
location.hash = "#" + "#(Model.MyAnchorName)";
Just get rid of the Html.BeginForm and use an html form tag with a Url.Action
<form action="#Url.Action("Times", "Patron")##Model.SelectedTimeSort" id="frmBuildings" method="post">
</form>
Relying on javascript per the correct answer seems like overkill just to keep the "BeginForm" around.