I am a junior developer and i find it hard to get this form to work. What i am trying to achieve is a multistep form where each view is a form that redirects to the next view containing further more fields for the user to input values into. I Think i got it right how i pass the Model(which is to be modified for every step). I have 4 views and 4 ActionResults. Step1, Step2 etc.
So how do i pass both the model and the chosen value from "Choose amount" and the custom amount?
This is what the markup looks like:
<form method="post" id="formStepOne" action="#Url.Action("Step1", "SupporterController", Model)">
<div class="row">
<div class="large-6 columns">
<label>Choose amount</label>
<input type="radio" name="belopp1" value="500" id="value1"><label for="value1">100 dollars</label>
<input type="radio" name="belopp2" value="350" id="value2"><label for="value2">200 dollars</label>
<input type="radio" name="belopp3" value="200" id="value3"><label for="value3">400 dollars</label>
</div>
<div class="large-4 columns">
<label>
Amount(minimum of 400 dollars)
<input type="text" placeholder="amount" />
</label>
</div>
</div>
<div class="large-12 columns">
<div class="row collapse">
<div class="small-2 columns">
<button type="submit" form="formStepOne" value="Submit">Fortsätt</button>
</div>
</div>
</div>
And this is what the controllers/actionResults look like
[HttpPost]
public ActionResult Step2(SupporterViewModel model)
{
//Validate and return
return PartialView("~/Views/SupporterBlock/SupporterStepThree.cshtml", model);
}
Related
This is the html code for the main page with the popup
<div class="box">
<a class="button" href="#divOne">
<img src="~/images/usericon.png" alt="user" width="30" height="30" />
</a>
</div>
<div class="overlay" id="divOne">
<div class="wrapper">
<div id="container">
<div class="btn" id="btn-1" data-showbutton="1">Login</div>
<div data-button="1">
×
<div class="content">
<div class="container text-active">
#* load page content here*#
<form id="login">
<label>Username</label>
<input type="text" placeholder="Username" />
<label>Password</label>
<input type="text" placeholder="Password" />
</form>
</div>
</div>
<button>Login</button>
</div>
<div class="btn" id="btn-2" data-showbutton="2">Register</div>
<div id="is-hidden" data-button="2">
×
<div class="content">
<div class="container">
<div class="container text-active">
#* load page content here*#
<form id="register">
<label>Username</label>
<input type="text" placeholder="Username" />
<label>Password</label>
<input type="text" placeholder="Password" />
<label>Confirm Password</label>
<input type="text" placeholder="Confirm Password" />
</form>
</div>
</div>
</div>
<button>Register</button>
</div>
</div>
</div>
</div>
This is the page content I want to display inside the popup
#model Store.Models.CustomerModel
#{
ViewData["Title"] = "Register";
}
#* this part is what I need*#
<div class="row">
<div class="col-md-4">
<form asp-action="Register">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="CustomerEmail" class="control-label"></label>
<input asp-for="CustomerEmail" class="form-control" />
<span asp-validation-for="CustomerEmail" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CustomerPassword" class="control-label"></label>
<input asp-for="CustomerPassword" class="form-control" />
<span asp-validation-for="CustomerPassword" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
#* this part is what I need*#
I've tried in including the model and pasting the code and it works, but I want to have that separation between the main page and the login and register form.
This is how it looks, if it is even needed
Move the duplicated code to a partial, with its #model set to CustomerModel:
#model CustomerModel
<div class="row">
<div class="col-md-4">
<form asp-action="Register">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="CustomerEmail" class="control-label"></label>
<input asp-for="CustomerEmail" class="form-control" />
<span asp-validation-for="CustomerEmail" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CustomerPassword" class="control-label"></label>
<input asp-for="CustomerPassword" class="form-control" />
<span asp-validation-for="CustomerPassword" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
In the main page, you need to add a CustomerModel property e.g.
public CustomerModel Customer { get; set; }
and then pass it to the partial, which you can do using a partial tag helper:
<div class="overlay" id="divOne">
<div class="wrapper">
<div id="container">
<div class="btn" id="btn-1" data-showbutton="1">Login</div>
<div data-button="1">
×
<div class="content">
<div class="container text-active">
#* load page content here*#
<partial name="_RegisterForm" for="Customer" />
#* load page content here*#
</div>
</div>
</div>
<button>Register</button>
</div>
</div>
</div>
In the Customer page, you include the partial again, but you don't need to specify a model via the for attribute in the partial because the host page's model will be passed by default:
#page
#model WebApplication4.Pages.CustomerModel
#{
ViewData["Title"] = "Register";
}
#* this part is what I need*#
<partial name="_RegisterForm" />
#* this part is what I need*#
I am developing a web application using ASP.NET Core 5 MVC, in which I seek to make multiple submissions of POST type forms to my controller from a view that receives an IEnumerable (from a model called Result) with which I am filling in dynamically the values of the inputs of each form.
However, when I send one of those forms from the view through the controller, in the controller I only receive an object from the model with all the null or empty values, which tells me that it seems that this data was never sent through the form to my controller.
Is there a better way to accomplish this or how do I pass these values from multiple forms to my controller? In advance an apology if what I am doing is already totally wrong, I have been learning ASP.NET Core MVC for a few days.
CONSIDERATIONS
What I seek to achieve is that the user can enter multiple values that belong to the same model in the same view, since each form although it is the same seeks to update a different record or column in the same model or table, so when the submit of the form is sent to the Controller the view does not change, and only the records in the database are updated with each submit in the view. If there is a better way or correct way to do this, I am willing to change the logic, because as I mentioned, I have been using the Framework for little.
Explained the problem and my goal, I will explain in greater detail the flow and code mentioned:
From the Mechanical method of my controller, I return a list of Objects to their corresponding View, which are brought by a DataBaseContext:
// CONTROLLER() that passes an enumerable list of Objects to View Mechanical.cshtml
public IActionResult Mechanical()
{
IEnumerable<Result> objList = _db.Results;
return View(objList);
}
In the Mechanical() view, I get this list of objects and iterate over it through a forEach() loop, where for each object I create a form that directs to the same controller method called Update(), in which I get the values of the object in null and empty (that being my problem):
// VIEW
#model IEnumerable<FatForm.Models.Result>
#if (Model.Count() > 0)
{
#foreach(var result in Model)
{
<form method="post" asp-action="Update">
<input asp-for="#result.Id" hidden />
<input asp-for="#result.Type" hidden />
<input asp-for="#result.FatId" hidden />
<div class="border p-3">
<div class="form-group row">
<h2 class="text-black-50 pl-3">Edit Result</h2>
</div>
<div class="row">
<div class="col-12">
<div class="form-group row">
<div class="col-3">
<label asp-for="#result.Section"></label>
</div>
<div class="col-3">
<label asp-for="#result.Procedure"></label>
</div>
<div class="col-3">
<label asp-for="#result.ResultDescription"></label>
</div>
<div class="col-3">
<label asp-for="#result.Passed"></label>
</div>
</div>
<div class="form-group row">
<div class="col-3">
<input asp-for="#result.Section" class="form-control" />
</div>
<div class="col-3">
<input asp-for="#result.Procedure" class="form-control" />
</div>
<div class="col-3">
<input asp-for="#result.ResultDescription" class="form-control" />
<span asp-validation-for="#result.ResultDescription" class="text-danger"></span>
</div>
<div class="col-3">
<input asp-for="#result.Passed" class="form-control" />
<span asp-validation-for="#result.Passed" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<div class="col-8 offset-2 row">
<div class="col">
<input type="submit" class="btn btn-info w-75" value="Save" />
</div>
</div>
</div>
</div>
</div>
</div>
</form>
}
}
else
{
<p>No results created yet</p>
}
#section Scripts{
#{
<partial name="_ValidationScriptsPartial" />
}
}
I'm supposed to be looking to send the form values to the following Update() controller method, in which I get all the object values to null:
// POST Update
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Update(Result obj)
{
if (ModelState.IsValid)
{
_db.Results.Update(obj);
_db.SaveChanges();
//return RedirectToAction("Index");
}
return View(obj);
}
As I explained at the beginning, I hope can help me by indicating what I am doing wrong or in what way I should do it. Thanks in advance for your help.
Model binding looks through the sources for the name pattern prefix.property_name. If nothing is found, it looks for just property_name without the prefix.In your code,the asp-for tag helper will generate the name like:result.propertyName.It could not match with backend model. You need use [Bind(Prefix ="result")] to specify the prefix:
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Update([Bind(Prefix ="result")]Result obj)
{
//do your stuff...
}
As for receive IEnumerable parameter in action, firstly you need change your razor view to move the form outside the foreach loop, then you need change the asp-for tag helper tattribute to #Model.ToList()[index].PropertyName:
#model IEnumerable<Result>
#if (Model.Count() > 0)
{
<form method="post" asp-action="Update">
#for (int i = 0; i < Model.Count(); i++)
{
<input asp-for="#Model.ToList()[i].Id" hidden />
<input asp-for="#Model.ToList()[i].Type" hidden />
<input asp-for="#Model.ToList()[i].FatId" hidden />
<div class="border p-3">
<div class="form-group row">
<h2 class="text-black-50 pl-3">Edit Result</h2>
</div>
<div class="row">
<div class="col-12">
<div class="form-group row">
<div class="col-3">
<label asp-for="#Model.ToList()[i].Section"></label>
</div>
<div class="col-3">
<label asp-for="#Model.ToList()[i].Procedure"></label>
</div>
<div class="col-3">
<label asp-for="#Model.ToList()[i].ResultDescription"></label>
</div>
<div class="col-3">
<label asp-for="#Model.ToList()[i].Passed"></label>
</div>
</div>
<div class="form-group row">
<div class="col-3">
<input asp-for="#Model.ToList()[i].Section" class="form-control" />
</div>
<div class="col-3">
<input asp-for="#Model.ToList()[i].Procedure" class="form-control" />
</div>
<div class="col-3">
<input asp-for="#Model.ToList()[i].ResultDescription" class="form-control" />
<span asp-validation-for="#Model.ToList()[i].ResultDescription" class="text-danger"></span>
</div>
<div class="col-3">
<input asp-for="#Model.ToList()[i].Passed" class="form-control" />
<span asp-validation-for="#Model.ToList()[i].Passed" class="text-danger"></span>
</div>
</div>
</div>
</div>
</div>
}
<div class="form-group row">
<div class="col-8 offset-2 row">
<div class="col">
<input type="submit" class="btn btn-info w-75" value="Save" />
</div>
</div>
</div>
</form>
}
else
{
<p>No results created yet</p>
}
Controller:
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Update(IEnumerable<Result> obj)
{
return View("Mechanical", obj);
}
Result:
Here you need to add FromBody attribute in your action method parameter.
public IActionResult Update([FromBody]Result obj)
{
.....
}
I am using ASP.NET Core MVC with identity but I want to perform my own logic on login. So, what I did is I scaffolded the login page and make my own design.
Here is my form:
#page
#model LoginModel
#{
ViewData["Title"] = "Login";
}
<div class="login-page cnt-bg-photo overview-bgi" style="background-image:
url('#Url.Content("~/assets/img/banner-1.jpg")')">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="forgot-box contact-2 clearfix">
<div class="login-header clearfix">
<div class="pull-left">
<h4>Login</h4>
</div>
</div>
<!-- <div role="alert"
class="alert alert-danger font-12">
<strong>Oops!!</strong> Invalid Email or Password
</div>-->
<p>Please enter your user name and password to login</p>
<form action="/Account/Login" method="POST">
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group w-46-f float-left">
<div class="form-check checkbox-theme pull-left">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
#Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
</div>
<div class="form-group float-right">
<label class="pull-right forgotpassword-label">Forgot Password ?</label>
</div>
<div class="clearfix"></div>
<button type="submit" class="btn btn-color btn-md pull-right">Login</button>
</form>
<div class="clearfix"></div>
<div class="text-center p-t-46 p-b-20 font-14">
<span class="txt2">
Or Login with
</span>
</div>
<div class="login100-form-social flex-c-m">
<form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="#Model.ReturnUrl" method="post">
#foreach (var provider in Model.ExternalLogins)
{
if (provider.DisplayName == "Google")
{
<button type="submit" class="btn login100-form-social-item flex-c-m bg3 m-r-5" style="display: inline-block" name="provider" value="#provider.Name" title="Log in using your #provider.DisplayName account"><i class="fab fa-google"></i></button>
}
else if (provider.DisplayName == "Facebook")
{
<button type="submit" class="btn login100-form-social-item flex-c-m bg1 m-r-5" style="display: inline-block" name="provider" value="#provider.Name" title="Log in using your #provider.DisplayName account"> <i class="fab fa-facebook-f"></i></button>
}
else if (provider.DisplayName == "Twitter")
{
<button type="submit" class="btn login100-form-social-item flex-c-m bg2 m-r-5" style="display: inline-block" name="provider" value="#provider.Name" title="Log in using your #provider.DisplayName account"> <i class="fab fa-twitter"></i></button>
}
}
</form>
</div>
<hr>
<div class="text-center forgotpassword-label font-14">
Not a member?
<a href="#Url.Action("Packages","Account")">
<strong>Sign up now</strong>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
Now I want to post the login data to my own controller action. But it get null on my action method. Parameters are not filled with actual data of the form.
Here is my controller method:
[HttpPost]
public IActionResult Login(LoginModel.InputModel model)
{
//My logic
return View();
}
Why does it get model parameter as null?
Well, specifically, the source of it being null is the fact that in the Razor Page, all the input names begin with Input. because for the code-behind, the model being bound to is LoginModel and the data in those inputs will be bound to the InputModel property (Input) there. However, in your controller, you're binding directly to InputModel, and InputModel has no Input member. As a result, none of the posted inputs match anything and are therefore not bound.
If you're going to post from a Razor Page, you need to do it to a Razor Page. There's just too many inconsistencies between Razor Pages and MVC to line everything up correctly. If you you want to use a controller, you're going to need a view specifically geared for that, not your Razor Page.
I'm trying to use a textbox value in controller route and am having some trouble with the syntax. Essentially, I have my end users selecting a file and then submitting the data to the api to process and send the data off. I have working static code below, but can't get the xml path to be dynamically populated via the textbox value.
note that (as far as I can tell) the forward slash at the end of the path is required since there is a dot in the file path.
#using (Html.BeginForm("", "api/food/dummy food file.xml/"))
{
<div class="row">
<div class="col-lg-6">
<label class="control-label">Select File</label>
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-default">
Browse… <input type="file" style="display: none;" single>
</span>
</label>
<input id="food.filepath" name="food.filepath" type="text" class="form-control" readonly>
</div>
</div>
</div>
<br />
<div>
<button id = "btnSubmit" type="submit" class="btn btn-primary">Submit</button>
</div>
}
I don't what the syntax would be, but I can't get something like the below to work.
#using (Html.BeginForm("", "api/food/" + food.filepath + "/"))
{
<div class="row">
<div class="col-lg-6">
<label class="control-label">Select File</label>
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-default">
Browse… <input type="file" style="display: none;" single>
</span>
</label>
<input id="food.filepath" name="food.filepath" type="text" class="form-control" readonly>
</div>
</div>
</div>
<br />
<div>
<button id = "btnSubmit" type="submit" class="btn btn-primary">Submit</button>
</div>
}
Because the form is rendered on server and the value food.filepath is on client, you cannot mix them. Changing form action according to client values need to be done on client with javascript.
You can remove the file from action a add it on submit javascript action, for example by changing BeginForm to this:
#using (Html.BeginForm("", "api/food/", FormMethod.Get, new { onSubmit = "this.dataset.act = this.dataset.act||this.action; this.action = this.dataset.act + this['food.filepath'].value" } ))
I am a programmer-to-be, currently working on a project at work.
My problem is this: I have 3 submit buttons (on the same form), that each call a different action. These buttons HAVE to be disabled, if the HTML Selector (dropdown) does not have any options to choose from.
My form currently looks like this:
<form asp-action="Index" method="post" onkeypress="return event.keyCode != 13;">
<div class="col-md-9">
<div class="form-group form-inline">
<label asp-for="OrderNumber">Order number: </label>
<input asp-for="OrderNumber" class="form-control" type="text" placeholder="Insert order number" autofocus />
</div>
<div>
<label>Delete</label>
<input asp-for="Deletion" type="checkbox" />
</div>
<div>
<div class="col-md-4">
<input class="btn btn-block" type="submit" name="action" value="Receive" />
</div>
<div class="col-md-4">
<input class="btn btn-block" type="submit" name="action" value="Start" />
</div>
<div class="col-md-4">
<input class="btn btn-block" type="submit" name="action" value="Finish" />
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group form-inline">
<label asp-for="ProfileId">Profile: </label>
<select asp-for="ProfileId" class="form-control">
#foreach (var p in Model.Profiles)
{
<option value="#p.ProfileId">#p.Name</option>
}
</select>
</div>
</div>
</form>
Thanks for any help, and if you need more information, or if this question is poorly described, do not hesitate to ask! :)
Give your buttons an id. Set them to be disabled (enabled="false").
Call a javascript function when the dropdownlist is changed.
Check the selectedIndex of the dropdownlist in the function that is called onchange and set the button accordingly.
I could write a function that would do it, but you wouldn't learn anything. If you do a bit of research, have a stab at writing the function, I'll fix it if it doesn't work.
Simply disable the form fields that need be depending on if the others have the same conditional requirements. You can give them a custom class and use some javascript code and toggle the class with some JS like so.
toggleAttribute = function(className,index){
var eLs = [].slice.call(document.getElementsByClassName(className),0);
for(var i=0; i<eLs.length; i++){
eLs[i].disabled=(index==0 ? false : true); //index 0 is for 'Yes'
}
}
I came up with a solution of my own using Razor.
My form now looks like this:
<form asp-action="Index" method="post" onkeypress="return event.keyCode != 13;">
<div class="col-md-9">
<div class="form-group form-inline">
<label asp-for="OrderNumber">Order number: </label>
<input asp-for="OrderNumber" class="form-control" type="text" placeholder="Insert order number" autofocus />
</div>
<div>
<label>Delete</label>
<input asp-for="Deletion" type="checkbox" />
</div>
<div>
<div class="col-md-4">
<input class="btn btn-block" type="submit" name="action" value="Receive"
#{ if (Model.Profiles.Count() == 0) { #: disabled="disabled"
} } />
</div>
<div class="col-md-4">
<input class="btn btn-block" type="submit" name="action" value="Start"
#{ if (Model.Profiles.Count() == 0) { #: disabled="disabled"
} } />
</div>
<div class="col-md-4">
<input class="btn btn-block" type="submit" name="action" value="Finish"
#{ if (Model.Profiles.Count() == 0) { #: disabled="disabled"
} } />
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group form-inline">
<label asp-for="ProfileId">Profile: </label>
<select asp-for="ProfileId" class="form-control">
#foreach (var p in Model.Profiles)
{
<option value="#p.ProfileId">#p.Name</option>
}
</select>
</div>
</div>
</form>
I added an if-statement, that checks if there is any profiles in my list of profiles. If there is none (0), it adds the disabled="disabled" attribute to my inputs.
Thanks to anyone that tried to assist me in solving this, and providing me with suggestions for a solution :)