I'm confused about how to place values in a text form.
I created a simple form.
test.cshtml
##Model.Name is #Model.Name
<form method=post>
Name:<input asp-for="Name" />
<button asp-page="test">Submit</button>
</form>
test.cshtml.cs is
[BindProperty(SupportsGet = true)]
public string Name { get; set; }
public IActionResult OnGet()
{
Name = "value-get";
return Page();
}
public IActionResult OnPost()
{
Name = "value-post";
return Page();
}
first get result is
#Model.Name is value-get
Name:[value-get] [submit]
image
OK. This is fine. The Name is now "value-get".
I change the text box value = 123.
#Model.Name is value-get
Name:[123][submit]
image
then post it.
#Model.Name is now "value-post". Because I change it at OnPost. But the text field is still 123.
#Model.Name is value-post
Name:[123][submit]
image
I do same thing at OnGet and OnPost. I can set text field by OnGet, but I can't set it by OnPost.I would like to know why this is the case and tell me about the structure.
When binding data in client side,it will get value from ModelState prior to Model .You can try to add ModelState.Clear(); into Post method.
public IActionResult OnPost()
{
ModelState.Clear();
Name = "value-post";
return Page();
}
result:
Related
Moving from ASP.NET Core MVC to Razor pages, there must be an issue in my understanding of passing data to a Razor view.
Here's a simple view:
#page
#model TestModel
#{
System.Diagnostics.Debug.WriteLine(Model.Name);
}
<form class="form-horizontal" method="get">
Name: <input type="text" class="form-control" asp-for="Name">
<button type="submit" class="btn btn-default">Send...</button>
</form>
And here is the view model class with one event handler:
public class TestModel : PageModel
{
[BindProperty(SupportsGet = true)]
public string Name { get; set; } = "";
public TestModel() {}
public IActionResult OnGet()
{
Name += "N";
return Page();
}
}
Then running the project:
Debug.WriteLine shows "N" as expected
input fields has "N" default value as expected
overwrite "N" in the input field eg. to "A" then press Send button
Debug.WriteLine shows "AN" as expected so view has got the value modified by OnGet()
the input field in the page itself contains the value "A" instead of "AN", the generated HTML contains:
value="A"
View does not render the modified Model.Name value but the original from the form data.
How can it be corrected to make view to render the modified string?
You can try to add ModelState.Clear(); in OnGet handler.When binding data in client side,it will get value from ModelState prior to Model.
public class TestModel : PageModel
{
[BindProperty(SupportsGet = true)]
public string Name { get; set; } = "";
public TestModel() {}
public IActionResult OnGet()
{
Name += "N";
ModelState.Clear();
return Page();
}
}
I have a Razor pages web app and one of the models' is for colleague info and includes their date of birth.
When I look at the scaffolded pages for a colleague, the Date of Birth field is populated in the details page but not the edit page.
Images below will show what I mean.
Here is the Details page
And here is the Edit page
As you will know, as the Edit page is blank, If I change another field e.g. Staff Position and save, the DOB for the colleague becomes null.
As I say the pages are from the EF Core scaffolding so I believe the HTML for the form should be correct.
Edit Page HTML
<div class="form-group">
<label asp-for="Colleague.DateOfBirth" class="control-label"></label>
<input asp-for="Colleague.DateOfBirth" class="form-control" />
<span asp-validation-for="Colleague.DateOfBirth" class="text-danger"></span>
</div>
Colleague is a bind Property of the Colleague model in the Page Model. ALl other fields, as seen in the image populate fine.
Update
As I say it is using Model Binding
[BindProperty]
public Colleague Colleague { get; set; }
OnPost
public async Task<IActionResult> OnPostAsync()
{
if (!ModelState.IsValid)
{
return Page();
}
_context.Attach(Colleague).State = EntityState.Modified;
try
{
selectedBranch = Colleague.BranchID;
await _context.SaveChangesAsync();
}
catch (DbUpdateConcurrencyException)
{
if (!ColleagueExists(Colleague.ColleagueID))
{
return NotFound();
}
else
{
throw;
}
}
return RedirectToPage("../BranchColleagues", new { id = selectedBranch });
}
[DataType(DataType.Date)]
[Display(Name = "Date of Birth")]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
public DateTime? DateOfBirth { get; set; }
I also faced the same problem. It works while I use .Value in input tag
<input asp-for="Colleague.DateOfBirth.Value" class="form-control" />
I am placing my quick fix solution as the question has been empty now for a month.
By removing this annotation from the POCO class:
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
The date value now appears in the edit form as required.
I am wanting to create a custom tag helper in razor pages which binds to a custom model but the value is not being read back into the modal on post, below is my TagHelper code
[HtmlTargetElement("kenai-date", TagStructure = TagStructure.WithoutEndTag)]
public class Date : TagHelper
{
//public string Value { get; set; }
public ModelExpression AspFor { get; set; }
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "input";
output.TagMode = TagMode.SelfClosing;
output.Attributes.Add("value", this.AspFor.Model);
}
}
I am using the TagHelper with the below code
<kenai-date asp-for="DateValue" />
'DateValue' is a public property on the page, when first rendering the page the value of DateValue is correctly visible in the TagHelper Input element, if I force an OnPost, the value is removed.
I have applied the same to a standard input element with asp-for set and that works fine so suspect I am missing something in my TagHelper.
Asp.net core bind model data with name attribute.You use a custom tag helper,so it will get html like <input value="xxx">.So when form post,you cannot bind model data with name attribute,and when return Page in OnPost handler,model data is null.You need to add name attribute to <kenai-date asp-for="DateValue" />.Here is a demo:
TestCustomTagHelper.cshtml:
<form method="post">
<kenai-date asp-for="DateValue" name="DateValue" />
<input type="submit" />
</form>
TestCustomTagHelper.cshtml.cs:
public class TestCustomTagHelperModel : PageModel
{
[BindProperty]
public string DateValue { get; set; }
public void OnGet()
{
DateValue = "sss";
}
public IActionResult OnPost()
{
return Page();
}
}
result:
I created a new ASP.Net Core 2 (Razor Pages) Project
My model is:
public class FormularioGenerico
{
public FormularioGenerico()
{
}
public string IP { get; set; }
public List<string> items { get; set; } = new List<string>();
}
On the page I put
on the page.cshtml.cs
public class EditarModel : PageModel
{
[BindProperty]
public FormularioGenerico ff { get; set; }
[BindProperty]
public string Message { get; set; }
public void OnGet()
{
this.ff = new FormularioGenerico();
ff.IP = "C# FORM";
ff.items.Add("OK1");
ff.items.Add("OK2");
ff.items.Add("OK3");
}
public async Task<IActionResult> OnPostAsync()
{
if (!ModelState.IsValid)
{
return Page();
}
var m = ModelState.IsValid; // true
Debug.WriteLine(this.ff.IP); // is Always returning null
Debug.WriteLine(this.ff.items.Count); // is Always returning null
}
}
on the page.cshtml:
#model Formulario.Pages.EditarModel
...
<h1>#Model.ff.IP</h1>
#foreach (var i in Model.ff.items)
{
<div>#i</div>
}
<button type="submit">Enviar</button>
The items are correctly output. But the complete object does not go to the OnPost.
The problem is: The model is not coming fully populated on the OnPost.
How to receive the full object that was created on the OnGet, plus the changes made by the user on the form, on the post to OnPostAsync() ?
The BindProperty attribute is used to inform ASP.NET Core that the values that the form submitted should be mapped to the specified object. In your case you set the values for the ff property but you do not have the equivalent input values so that ASP.NET Core will get these values in order to store them back to the ff property.
In order to make it work you will have to replace your razor code with the following code:
<form method="post">
<h1>#Model.ff.IP</h1>
<input asp-for="#Model.ff.IP" type="hidden" /> #* create a hidden input for the IP *#
#for (int i = 0; i < Model.ff.items.Count(); i++)
{
<input asp-for="#Model.ff.items[i]" type="hidden" /> #* create a hidden input for each item in your list *#
<div>#Model.ff.items[i]</div>
}
<button type="submit">Enviar</button>
</form>
Very important. To make this work you can not use the foreach loop because ASP.NET core will not be able to find the values. You will have to use a for loop.
The inputs that I added are hidden because I guess you do not want them to be visible but you can remore the type="hidden" so that you will be able to see them. Every change that you make to these inputs will be submitted to the OnPostAsync method.
I am having trouble using the values that were selected from the dropdown list. How would you reccommend passing the selected values from the view?
Ideally, we want to use the selected dropdown values to determine a query. Any help is appreciated!
Thanks
I would include them in the view model and then pass the viewmodel back to the controller.
viewmodel
public class vm
{
//your other viewmodel data
public string? SelectedValue { get; set; }
public SelectList forDropDownUse { get; set; }
}
view
#model namespace.vm
#using (Html.BeginForm())
{
#Html.DropDownListFor(m => m.SelectedValue, forDropDownUse, " -- Select A Value -- ")
<input type="Submit" value="submit model" />
}
and then in your post action just get the selected value from the posted model object
controller (sorry, this is in c#)
[HttpPost]
public ActionResult postedAction(vm model)
{
//actions with other data in model
string selectedValue = model.SelectedValue.Value;
//work with selected value
return RedirectToAction("SomeDisplayAction");
}
Converted to vb.net from http://www.developerfusion.com/tools/convert/csharp-to-vb/
<HttpPost> _
Public Function postedAction(model As vm) As ActionResult
'actions with other data in model
Dim selectedValue As String = model.SelectedValue.Value
'work with selected value
Return RedirectToAction("SomeDisplayAction")
End Function