I want to make a form with two pages for a models class Student. I am currently trying to pass the data from first page into a controller which will pass the student as a model to my second page view which will then pass to the controller to save to my database but only the data from the second page is being saved to DB.
Page 1
#model Student
<body>
<div class="container1">
<form asp-action="Page2" method="post" role="form">
<div class=" form-group row">
<label asp-for="FirstName" class="col-md-2 control-label"></label>
<div class="col-md-5">
<input asp-for="FirstName" class="form-control" />
</div>
</div>
<div class="form-group row">
<div class="col-md-offset-2 col-md-5">
<input type="submit" class="btn btn-primary" value="Next" />
</div>
</div>
Page 2
#model Student
<body>
<div class="container1">
<form asp-action="Submit" method="post" role="form">
<div class=" form-group row">
<label asp-for="LastName" class="col-md-2 control-label"></label>
<div class="col-md-5">
<input asp-for="LastName" class="form-control" />
</div>
</div>
<div class="form-group row">
<div class="col-md-offset-2 col-md-5">
<input type="submit" class="btn btn-primary" value="Next" />
</div>
</div>
Controller
[HttpPost]
public IActionResult Page2(Reports report)
{
return View(report);
}
[HttpPost]
public IActionResult Submit(Reports report)
{
_reportRepository.CreateReport(report);
return View(report);
}
You need to add a form field for FirstName to the view for Page2, either a hidden field or (assuming you don't want it modified) a read-only input.
<input asp-for="FirstName" type="hidden" />
or
<input asp-for="FirstName" type="text" readonly />
Only values that have some sort of successful control are included in any form submission. This is true for any plain old HTML form, which is (once your view is generated) really what you're dealing with.
If you're coming from a WebForms background, there is no ViewState in any version of the MVC Framework (Full framework or .NET Core), so it's up to you as the developer to persist those values across requests.
Related
I am using puppeteer in trying to find the selector for a login page.
the login html is:
<form action="/login?app=LM&var=au" method="POST" name="login-form" id="login-form">
<input type="hidden" name="_csrf" value="BQ2YoR3d-5P__6b5HfqlVOjv8YgTypKV92XA" />
<div class="form-group text-center">
<input type="text" name="username" id="login-form-username" placeholder="Username" class="form-control" required value="">
</div>
<div class="form-group text-center">
<input type="password" name="password" id="login-form-password" placeholder="Password" class="form-control" required>
</div>
<div class="text-center">
<button type="submit" class="btn btn-danger btn-lg btn-block">Login</button>
</div>
</form>
I tried #submit, #login-form-submit and several others for the selector. what would the selector for the login button be as there is no ID name?
i am using ClickAsync();
Either give your submit button an id property and use the #submit selector you previously tried:
<button id="submit" type="submit" class="btn btn-danger btn-lg btn-block">Login</button>
Or use form button[type=submit] as selector.
I am working with ASP.NET in a web application What I want to do is that when you enter the system, depending on the user, some input text is enabled. For example, if the user is an administrator, all the input texts are enabled but if they are a normal user, all are disabled.
It is necessary to keep in mind that you used session variables depending on the type of user:
Session["typeUser"] (String)
user
admin
technical
helpdesk
I was consulted and can be done with this function
#HttpContext.Current.Session["typeUser"].ToString();
This is the code cshtml of the form where the fields that I want are not editable. Within this form I do not want the first three fields to be editable: Enrollment, Full Name and Email
<form id="InformationUser" class="contact-form">
<div class="box-body">
<div class="form-group">
<label for="Enrollment">Enrollment</label>
<input type="text" name="Enrollment" class="form-control" />
</div>
<div class="form-group">
<label for="Full name">Full name:</label>
<input type="text" name="Full name" class="form-control" />
</div>
<div class="form-group">
<label for="Email">Email:</label>
<input type="text" name="email" class="form-control" />
</div>
<div class="form-group">
<label for="Extension">Extension:</label>
<input type="text" name="extension" class="form-control">
</div>
<div class="form-group">
<label for="Area">Area:</label>
<select name="area" class="form-control select2 select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true"></select>
</div>
<div class="form-group">
<label for="Ubicacion">Ubicacion:</label>
<select name="ubicacion" class="form-control select2 select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true"></select>
</div>
</div>
</form>
Add some javascript at the end to do the job for you. Assuming you have razor view engine, this should give you some idea of how to approach it:
<script type='text/javascript'>
var role = #HttpContext.Current.Session["typeUser"].ToString();
switch (role){
case "user" :
document.getElementByName("Enrollment").disabled=true; // or whatever
break;
}
</script>
Please see the View code below:
<div class="row">
<div class="col-md-4">
<form asp-action="MemberView">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DOB" class="control-label"></label>
#Html.TextBox("datepicker")
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</form>
</div>
</div>
How do I make #Html.TextBox("datepicker") readonly (so only the datepicker can populate it) i.e. a user cannot type in it. I have spent one hour Googling this and have already looked here: Using DatePicker with .NET
Add a readonly property by passing an anonymous object as the third argument.
The null (second argument) is there to keep the input value empty. Of course you could fill it if necessary.
#Html.TextBox("datepicker", null, new { #readonly = "readonly" })
Note: The # symbol is required, because 'readonly' is a reserved keyword.
Please keep in mind that the user is able to manipulate the HTML by removing the readonly attribute. Proper value checking in the back-end is required to handle the value safely.
I'm writing an application in asp.net core 2.0.
I have some data that I send to the controller from the view but I also have data that I want to pass to the same controller but they are not in the form.
It is possible to pass this data to the same controller and I do not have to create new inputs.
How to pass data to the controller from outside the form or in form but without creating new inputs.
I have two variables #Model.MinUppercase ,#Model.MinLowercase but I do not use them in the form, how can I pass them to the controller together with variables from the form?
#model Project2.Models.UserModel
<h1>Step2: Register</h1>
<div>
#if (#ViewData["Message"] != null)
{
<div class="alert alert-danger space text-center">
#ViewData["Message"]
</div>
}
#Model.MinUppercase
#Model.MinLowercase
<center>
<h2>Register form:</h2>
</center>
<div>
<form asp-action="Middle" asp-controller="Home" method="POST" class="form-wrapper">
<div class="input-group">
<label>Login:</label>
<input id="Login" asp-for="Login" type="text" class="input" size="35">
</div>
<div class="input-group">
<label>Password:</label>
<input id="Password" asp-for="Password" type="Password" class="input" size="35">
</div>
<div class="input-group">
<label>Your Regex Description:</label>
<input id="Description" asp-for="Description" type="text" class="input" size="35" value=#Model.Description>
</div>
<div class="input-group">
<label>Your Regex:</label>
<input id="Reg" asp-for="Reg" type="text" class="input" size="35" value=#Model.Reg>
</div>
<div class="input-group">
<a asp-controller="Home" asp-action="CreateRegex">
<button type="button" class="btn btn-danger">Back</button>
</a>
<button class="btn btn-success">Create</button>
</div>
</form>
</div>
Inside your form html content add hidden fields (using razor helper #Html.Hidden/For):
#Html.Hidden("MyName", "Carlos")
or
#Html.HiddenFor(i => i.PropertyOfYourModel) - if is some property of your model.
As carlosfcmendes already answered you can add data with hidden fields.
Or if you want to be more flexible you can intercept the form submit and add data.
There are plenty of answers here on how to do that:
Intercept form, add data, ajax, then submit.
How can I listen to the form submit event in javascript?
Kinda lost in the sauce here...pretty green coming into the ASP.net realm, but have been enjoying my time in it so far.
So let me start from the beginning with this:
Background: I am working on a ASP.net MVC5 application with user login informtion. The user will create an account, recieve messages, etc. The critical component is that there will be a form on the site that allows the user to submit information in a Conditional Logic HTML Form complete with radio buttons, text areas and more. My end goal is to allow the user to fill out and submit the form, therefore submitting it to the MySQL database, sending an email to admin and the user with their selected elements and then populating their responses within their "Account Dashboard" area.
Problem: I am trying to get the user submitted information based on their radio button selection in the HTML Form, which would come in 3 different scenarios:
Web Project
2D Design Project
3D Design Project
So if the user chooses "Web" instead of "Graphic" in the "Project Type" form field, they would be submitting only values related to "Web". The problem I am running into is not being sure on the best way to accomplish this...
Here's the code I've started creating for when the user chooses a Web project for submission to the database:
if (IsPost) && (RadioButton.projectType.Equals(Web))
{
projectType = Request.Form["Web"];
TypeOfWebsite = Request.Form["TypeOfWebsite"];
DeviceExperience = Request.Form["DeviceExperience"];
}
Here is the form values:
<form method="post">
<br />
<div class="row">
<label class="formquestion col-md-3">Project Name:</label>
<input class="col-md-9" type="text" placeholder="Enter project name..." />
</div>
<div class="row">
<label id="ProjectType" for="ProjectType" class="formquestion col-md-3">Project Type: </label>
<span class="col-md-8">
<input id="Web" name="ProjectType" type="radio" value="#Request.Form["Web"] value=" web" />
<label for="Web">Web</label>
<input id="Graphic" name="ProjectType" type="radio" value="Graphic" />
<label for="Graphic">Graphic</label>
</span>
</div>
<div class="hidefield" id="WebProject">
<div class="row">
<label class="formquestion col-md-3">Type Of Website: </label>
<span class="col-md-8">
<input id="WebApplication" name="TypeOfWebsite" type="radio" value="1" />
<label class="Web Application" for="Web Application">Web Application*</label>
<input id="eCommerce" name="TypeOfWebsite" type="radio" />
<label class="choice" for="eCommerce">eCommerce</label>
<input id="SocialNetwork" name="TypeOfWebsite" type="radio" />
<label class="choice" for="SocialNetwork">Social Network</label>
<input id="Forum" name="TypeOfWebsite" type="radio" />
<label class="choice" for="Forum">Forum</label>
<input id="PackageDesign" name="TypeOfWebsite" type="radio" />
<label class="choice" for="PackageDesign">News/Article</label>
<input id="Interactive" name="TypeOfWebsite" type="radio" />
<label class="choice" for="Interactive">Interactive</label>
<input id="InformationalPersonal" name="TypeOfWebsite" type="radio" />
<label class="choice" for="InformationalPersonal">Informational/Personal</label>
<p>*Not exactly sure what a web application is? Well...think TurboTax, Zamzar, Mint, Online Banking Services, MailChimp and Google Docs. </p>
</span>
</div>
<div class="row">
<label class="formquestion col-md-3" for="DeviceExperience">Device Experience: </label>
<span class="col-md-8">
<input id="Desktop" name="DeviceExperience" type="radio" value="1" />
<label for="Desktop">Desktop</label>
<input id="Tablet" name="DeviceExperience" type="radio" />
<label for="Tablet">Tablet</label>
<input id="Mobile" name="DeviceExperience" type="radio" />
<label for="Mobile">Mobile</label>
<input id="Responsive" name="DeviceExperience" type="radio" />
<label for="Responsive">Responsive</label>
</span>
</div>
</div>
<div class="hidefield" id="GraphicDimensions">
<div class="row">
<label class="formquestion col-md-3">Design Dimensions: </label>
<span class="col-md-8">
<input id="2D" name="Dimension" type="radio" value="2D" />
<label class="choice" for="Web">2D</label>
<input id="3D" name="Dimension" type="radio" value="3D" />
<label for="3D">3D</label>
</span>
</div>
</div>
<div class="hidefield" id="2DGraphicProject">
<div class="row">
<label class="formquestion col-md-3">Choose 2D Design: </label>
<span class="col-md-8">
<input id="BusinessCard" name="2DDesign" type="radio" value="1" />
<label class="BusinessCard" for="BusinessCard">Business Card</label>
<input id="Flyer" name="2DDesign" type="radio" />
<label class="choice" for="Flyer">Flyer</label>
<input id="Poster" name="2DDesign" type="radio" />
<label class="choice" for="Poster">Poster</label>
<input id="PrintAd" name="2DDesign" type="radio" />
<label class="choice" for="PrintAd">Print Ad</label>
<input id="PackageDesign" name="2DDesign" type="radio" />
<label class="choice" for="PackageDesign">Package Design (Food/Product/Media)</label>
<input id="Logo" name="Logo" type="radio" />
<label class="choice" for="Logo">Logo</label>
</span>
</div>
</div>
<div class="hidefield" id="hide3DDesignExplaination">
<div class="row">
<label class="formquestion col-md-3" for="3DDesign">Explain this 3D Design project: </label>
<textarea id="3DDesignExplaination" name="3DDesignExplaination" class="textareaform"></textarea>
</div>
</div>
<div class="hidefield" id="ProjectObjective">
<div class="row">
<label class="formquestion col-md-3" for="Objective">Project Objective:</label>
<textarea id="ObjectiveExplaination" name="ObjectiveExplaination" class="textareaform" placeholder="What is this website's primary objective? Sell me on it!"></textarea>
</div>
</div>
<div class="hidefield" id="DesignCopy">
<div class="row">
<label class="formquestion col-md-3" for="DesignCopy">Design Copy </label>
<textarea id="DesignCopy" name="DesignCopy" class="textareaform" placeholder="Any messeging/text/info needed to be included?"></textarea>
</div>
</div>
<div class="hidefield" id="TargetAudience">
<div class="row">
<label class="formquestion col-md-3" for="TargetAudience">Describe Your Target Audience:</label>
<textarea id="TargetAudienceExplaination" name="TargetAudienceExplaination" class="textareaform" placeholder="Who is your target audience? What are their ages? What do they do for a living? Elaborate!"></textarea>
</div>
</div>
<div class="hidefield" id="Keywords">
<div class="row">
<label class="formquestion col-md-3">Keywords To Describe This Project:</label>
<input class="col-md-9" type="text" placeholder="Give me 3 keywords!">
</div>
</div>
<div class="hidefield" id="FirstInteraction">
<div class="row">
<label class="formquestion col-md-3" for="UserFirstInteraction">User First Interaction:</label>
<textarea id="UserFirstInteraction" name="UserFirstInteraction" class="textareaform" placeholder="What Should The User Do First Upon Visiting The Website?"></textarea>
</div>
</div>
<div class="hidefield" id="General2">
<div class="row">
<label class="formquestion col-md-3" for="FavoriteColors">3 Favorite Colors?</label>
<input type="text" class="a-popup" data-color-format="hex" value="GreenYellow">
<input type="text" class="a-popup" data-color-format="hex" value="GreenYellow">
<input type="text" class="a-popup" data-color-format="hex" value="GreenYellow">
<small>Hint: you can type in any CSS color (even named ones, like yellow).</small>
</p>
</div>
<div class="hidefield" id="Necessities">
<div class="row">
<label class="formquestion col-md-3" for="UserFirstInteraction">Necessities:</label>
<textarea id="DesignCopy" name="ProjectReason" class="textareaform" placeholder="What are necessities for this project? Specific graphic/sitefunctionalities?"></textarea>
</div>
</div>
<h5 class="bkgblack center-align col-md-11">Provide URL's of Site/Graphics (whatever is applicable) that design you admire</h5>
<div class="row">
<label class="formquestion col-md-3" for="AdmireURL1">URL #1: </label>
<input id="AdmireURL1" name="AdmireURL1" type="text" maxlength="255" title="" value="http://" />
</div>
<div class="row">
<label class="formquestion col-md-3" for="AdmireURL2">URL #2: </label>
<input id="AdmireURL2" name="AdmireURL2" type="text" maxlength="255" title="" value="http://" />
</div>
<div class="row">
<label class="formquestion col-md-3" for="AdmireURL3">URL #3: </label>
<input id="AdmireURL3" name="AdmireURL3" type="text" maxlength="255" title="" value="http://" />
</div>
<div class="hidefield" id="RivalURL">
<h5 class="bkgblack center-align col-md-11">Provide URL's for "competitor" sites:</h5>
<div class="row">
<label class="formquestion col-md-3" for="RivalURL1">Rival URL #1: </label>
<input id="RivalURL1" name="RivalURL1" type="text" maxlength="255" title="" value="http://" />
</div>
<div class="row">
<label class="formquestion col-md-3" for="RivalURL2">Rival URL #2: </label>
<input id="RivalURL2" name="RivalURL2" type="text" maxlength="255" title="" value="http://" />
</div>
<div class="row">
<label class="formquestion col-md-3" for="RivalURL3">Rival URL #3: </label>
<input id="RivalURL3" name="RivalURL3" type="text" maxlength="255" title="" value="http://" />
</div>
</div>
</div>
<br />
<div class="hidefield" id="ProjectReason">
<div class="row">
<label class="formquestion col-md-3" for="UserFirstInteraction">Project Reason:</label>
<textarea id="DesignCopy" name="ProjectReason" class="textareaform" placeholder="Why does your target audience NEED this project to exist?"></textarea>
</div>
</div>
<div class="row">
<form action="file-upload.php" class="dropzone"></form>
</div>
<button type="submit" name="SubmitForm" class="btn btn-info btn-large">Submit Form</button>
</form>
The various MSDN tutorials I have been looking at to better understand:
http://www.asp.net/web-pages/tutorials/introducing-aspnet-web-pages-2/form-basics
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.radiobutton.aspx
These tutorials haven't made it clear to me on how to create these essential 3 conditional statements for my form:
"If user has chosen Project Type = "Web" and submitted the form, send (insert form variables) to the database"
"If user has chosen Project Type = "Graphic" then Dimension = "2D" and submitted the form, send (insert relative values) to the database"
"If user has chosen Project Type = "Graphic", then Dimension = "3D" and submitted the form, send (insert relative values)" to the database"
Recap:
How do I write the conditional statement to accomplish this?
Should I reconsider the HTML form format I am using in favor of ASP Web Pages?
I have written some JavaScript to show the available form values based upon user selection to follow this schema using the "value" of each field. It works just as intended! Now I'm just trying to connect dots on how to submit this information to the database so I can use it in the user profile. Any thoughts/answers would be greatly welcomed!
That's a complex form. But, for the sake of simplicity I will reduce the number of fields in your form to give you an idea of how things are the MVC way.
I'll start by pointing out that you are not taking the full advantage of MVC. It stands for Model-View-Controller, which is a design pattern. You probably know that stuff, but, I don't see a hint in your code that tells me you are using models in your project, you don't have to...but since you are starting with MVC you should. So, suppose you have the following models...
public class ProjectTypeModel
{
public string Name { get; set; }
}
public class TestModel
{
public IList<ProjectTypeModel> Types { get; set; }
}
Then you're view declares that same model...
#model MvcTest.Models.TestModel
This goes on the top of the view file, the first line of code. The simplified form would look like this...
#using(Html.BeginForm("ProcessTypes","Home")){
<div class="row">
<label class="formquestion col-md-3">Project Type: </label>
<span class="col-md-8">
#foreach (var p in Model.Types)
{
<input id="#("radio_" + p.Name)" type="radio" name="SelectedProjectType" value="#p.Name" />
<label for="#("radio_" + p.Name)">#p.Name</label>
}
</span>
</div>
<input type="submit" name="SubmitForm" class="btn btn-info btn-large" value="Submit Form" />
}
The only thing to note here is that the radio buttons MUST have the same name. The id is not too relevant, just make them unique so you can set the label's for attribute, this way when you click the label the radio button will change its state. The last thing to notice is the form is posting to the "ProcessTypes" action of the Home controller...
and your Home controller's action will look something similar to this...
public ActionResult ProcessTypes(string SelectedProjectType)
{
//processing here...
}
Obviously, the SelectedProjectType will have come with the value of the radio button you selected..."Web" or "Design".
Even though this is a very simplified example you can get an idea of how things work in MVC (and Razor). There's a bit more to cover but I'm sure you will find out by yourself.
Hope it makes sense