I have this HTML5 code:
<form id="LogInArea" action = "/Home/ValidateUser" >
<fieldset>
<legend>Login Page</legend>
<p>
<label>
User name<br>
<input type="text" id="userName" required></label></p>
<p><label>
Password<br>
<input type="password" id="password" required></label></p>
<p>#*<button id="LoginButton">
Log in</button>*#
<button>submit</button>
</p>
Register if you don't have an account.
</fieldset>
</form>
When I press the submit button the ValidateUser() action in Home controller is fired.
My question is how can I get the submitted form in ValidateUser() action and how I get the values of form element?
P.S. I don't want to use model!
I'm not sure why you don't want to use a model as the other answers recommend, however you can get the form values by using the Request object.
[HttpPost]
public void ValidateUser()
{
string name = Request.Form["userName"];
string password = Request.Form["password"];
}
However you will need ensure that you set your form method to Post and add name values to all your submitted form fields.
<form id="LogInArea" action = "/Home/ValidateUser" method="post">
...
<input type="text" id="userName" name="userName" required></label>
...
<input type="password" id="password" name="password" required></label>
...
</form>
You should also define a value for the 'name' attribute, so instead of:
<input type="text" id="userName" required>
it should be
<input type="text" id="userName" name="username" required>
then in your controller:
public ActionResult ValidateUser(string username)
{
...
}
You have to catch model you passed into your view i.e.
If you have passed Login model into your view, then you have to catch same into your controller's action method like below:
public ActionResult Login(Login model)
{
// Login is your model which you passed into view. Validate it here.
}
To get values you have to use name attribute in your input tag.
Let me know if you have any confusion.
Related
i am working on angular project where i have to fill the username and password
after submitting the code i have routed to swagger URL but i am not able to get the JSON format data
my form
<!-- HTML code for the login form -->
<form #form="ngForm" id="login-form" (ngSubmit)="addUsers()">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" [(ngModel)]="addUser.userName"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" [(ngModel)]="addUser.userPassword"><br><br>
<input type="submit" value="Submit">
</form>
my typescript
addUsers(){
this.userService.addUser(this.addUser)
.subscribe({
next:()=>
this.router.navigateByUrl("https://localhost:7068/Users")
})
even i added service too check this out
My service
addUser(adduser:User):Observable<User>{
adduser.userName
adduser.userPassword
return this.http.post<User>(this.baseApiUrl+"/Users",adduser)
}
i even tried to route using new component too but i failed please help me out
THANKS IN ADVANCE
I would like to have 2 mutually exclusive fields.
One will be a FileField and other TextBoxField.
Is there a ready html form I can get my hands on to.
I have searched the web and couldnt find any.
Oh I am a little sorry..
I meant that I wanted to do this via Django Templates
You can make an onInput event listener and handle it using javascript, so that if the user types in one field it empties the other.
For example:
<form>
<label for="first">Fill This:</label>
<input type="text" name="first" id="first" oninput="run('first')"><br><br>
<label for="second">Or This:</label>
<input type="text" name="second" id="second" oninput="run('second')"><br><br>
<input type="submit" value="Submit">
</form>
<script>
function run(activeField) {
if (activeField == 'first') {
const second = document.querySelector('#second')
second.value = ''
} else {
const first = document.querySelector('#first')
first.value = ''
}
}
</script>
For Your textbox, you can use this:
<input type="text" name="name" placeholder="Please enter your name">
And for your files:
<input type="file" name="fileName">
But for file name it needs to be encrypted. HTML won't let you submit a form with a file. But you can override this in the form attr, like this:
<form action="dirToForm.py" method="POST" enctype="multipart/form-data"></form>
The preventDefault() isn't working correctly. When I press the Login button, the page refresh's, but with the preventDefault() it shouldn't.
I tried it with stopPropagation(), but there was the same problem.
TypeScript:
loginUser(loginevent){
loginevent.preventDefault()
const target = loginevent.target
const username = target.getElementById('username')
const password = target.getElementById('pasword')
console.log(username, password)
}
HTML:
<form (submit)="loginUser($loginevent)">
<input type="text" placeholder="Benutzername" id="username">
<input type="text" placeholder="Passwort" id="password">
<input type="submit" value="Login">
</form>
The loginevent.preventDefault() should prevent the page from reloading it, when I press the Login button.
You'd have to pass $event as an argument and not any other word. $event is a reserved keyword to get the event data.
Here's what the Angular Docs say:
The framework passes the event argument—represented by $event—to the handler method, and the method processes it:
Try this:
<form (submit)="loginUser($event)">
<input type="text" placeholder="Benutzername" id="username">
<input type="text" placeholder="Passwort" id="password">
<input type="submit" value="Login">
</form>
I would suggest you should use what angular has to offer, either a template-driven or reactive form. We are coding with angular, then why not do it the angular way :)
Template driven:
<form #f="ngForm" (ngSubmit)="loginUser(f.value)">
<input type="text" placeholder="Benutzername" name="username" ngModel>
<input type="text" placeholder="Passwort" name="password" ngModel>
<button type="submit">Submit</button>
</form>
Here you now pass the form value to your login, which contains your username and password:
loginUser(values){
const username = values.username
const password = values.password
console.log(username, password)
}
With this, you don't even need to worry about preventDefault()
But I would also recommend the reactive way, read more about both template-driven and reactive forms: https://angular.io/guide/forms
I want get a values from web client and save it in database, but I don't know how call my controller methods from cshtml
#{
#ViewBag.Title;
#model Homi.Controllers.HomeController
Homi.Controllers.HomeController obj = (Homi.Controllers.HomeController)ViewData["h"];
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
#Styles.Render("~/Content/style.css")
#Styles.Render("~/Content/rest.css")
#Styles.Render("~/Content/font.css")
#Styles.Render("~/Content/font2.css")
</head>
<body>
Register
<div>
<input type="username" id="Username required="required" />
</div>
<div>
<input type="password" id="Password" required="required" />
<label for="Password">Password</label>
</div>
<div>
<input type="password" id="Repeat Password" required="required"/>
<label for="Repeat Password">Repeat Password</label>
</div>
<div>
<button><span>Next</span></button>
</div>
#Scripts.Render("~/Content/index.js")
#Scripts.Render("~/Content/jquery.js")
</body>
</html>
for example I have this code on my mind but you know it's doesn't work:
<div onclick=#obj.setp(username.text, password.text)>
<button><span>Next</span></button>
</div>
I want when I click on "Next" button my method calling.
and this is part of my controller, the method that I want to call:
namespace Homi.Controllers{
public class HomeController : Controller
{
public ActionResult setp(string usename, string password)
{
WebAdmin wa = new WebAdmin();
wa.InsertToDb(username, password);
return View("userAccess");
}}}
it's very important to me that I don't change my html code style
thank you for your help
Keep your input fields inside a form tag and submit the form
#using(Html.BeginForm("setp","home"))
{
<input type="text" name="Username" required="required" />
<input type="text" name="Password" required="required" />
<input type="submit" value="Next"/>
}
When razor executes the page, it will generate a form tag in the place of #using(Html.BeginForm line where the action is set to "home/setp"(Check the view source in browser). As long as your form element name's matches with your HttpPost action method parameter name's, values of the textboxes will be available in those when the form is submitted.
[HttpPost]
public ActionResult setp(string Username, string password)
{
//do something
}
I've got a login form with two input fields: username and password.
<form method="get" action="../Main/Index">
<p>
<input type="text" name="username" value="" placeholder="username" maxlength="30"></p>
<p>
<input type="password" name="password" value="" placeholder="password" maxlength="25"></p>
<p class="submit">
<input type="submit" name="commit" value="Enter">
</p>
</form>
Once the user submits the form, his username and password are shown in the browser's URL textbox, something like this:
http://localhost:53997/Main/Index?username=zm&password=123456789&commit=Enter
I don't want his username and password to be on display.
How can I do this?
the problem is that youre using form method = "get" when you should be using form method = "post" instead.
this explains it:
http://msdn.microsoft.com/en-us/library/ee784233(v=cs.20).aspx