I have an Update page getting a ViewModel containing my Model. When I load it to the page everything works fine but when I submit the changes my Model's ID is ALWAYS 0, I mean LITTERALY ALWAYS. I am following a tutorial, I did exactly what he did and STILL 0.
This is my POST method where I'm passing the VM in parameter.
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Update(ExpenseVM obj)
{
if (ModelState.IsValid)
{
_db.Expenses.Update(obj.Expense);
_db.SaveChanges();
return RedirectToAction("Index");
}
return View(obj);
}
And here is my HTML/C# code for the ID
<input type="hidden" asp-for="Expense.Id" value="#Model.Expense.Id" name="Id"/>
When I load my page my ID is loaded and everything works fine.
During debugging this is what I have in my HTML :
<input type="hidden" value="1" name="Id" data-val="true" data-val-required="The Id field is required." id="Expense_Id">
I found out why it didn't work.
My HTML was like this
<form method="post" asp-action="Update">
<div class="border p-3">
<div class="form-group row">
<h2 class="text-black-50 pl-3">Update Expense</h2>
</div>
<div class="row">
<input type="hidden" asp-for="Expense.Id" value="#Model.Expense.Id" name="Id"/>
<div class="col-12">
... BLABLABLA
</div>
</div>
</div>
</form>
So I just moved the input line from inside <div class="row> to <form method="post" asp-action"Update"> and removed all these useless tags like name="Id" value="#Model.Expense.Id" type="hidden"
And now it looks just like this
<form method="post" asp-action="Update">
<input asp-for="Expense.Id" hidden/>
<div class="border p-3">
<div class="form-group row">
<h2 class="text-black-50 pl-3">Update Expense</h2>
</div>
<div class="row">
<div class="col-12">
... BLABLABLA
</div>
</div>
</div>
</form>
And it works fine.
Now please DO NOT ask me why because I don't know, but if ANYONE has the answer to WHY? I'm all ears.
Related
I am facing the issue of data validation being executed on load of a new page even though it is clearly coming from a Get method. Is there something that's triggering the validations on page load?
I have a button on a view to add a new Student record in the new screen :
View :
<a type="button" id="btnAddStudent" href='#Url.Action("Details","Student")' class="btn btn-tertiary" title="Add Student">Add Student</a>
The controller code for the Details action method in Student Controller is as follows.
[HttpGet]
public ActionResult Details(StudentInfo model)
{
//This is populating the model parameters as expected.
helper.StudentInfo(ref model);
return View(model);
}
The view for the Details screen is as follows. The page loads but is throwing validation errors even though it's a Get method.
<form id="frmSubmit" asp-action="Details" asp-controller="Student" method="post">
<input type="hidden" asp-for="StudentId" />
<div class="row">
<div class="col-xs-12">
#Html.ValidationSummary("", new { #class = "alert alert-danger validation" })
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label asp-for="Name">*StudentName</label><br />
<input asp-for="Name" class="form-control" maxlength="100" placeholder="Enter student name..." />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label asp-for="AddressLine1"></label><br />
<input asp-for="AddressLine1" class="form-control" placeholder="Enter address..." />
<span asp-validation-for="AddressLine1" class="text-danger"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label asp-for="AddressLine2"></label><br />
<input asp-for="AddressLine2" class="form-control" maxlength="100" />
<span asp-validation-for="AddressLine2" class="text-danger"></span>
</div>
</div>
</div>
<div class="box">
<div class="form-group pull-right">
<button type="submit" class="btn btn-primary" value="save"> Save</button>
</div>
</div>
Is there something I am doing wrong? I have verified that the debug control goes to the Get method.There's alos no on load scripts which are doing any sort of validation.
1.Your get method contains the model parameter, when the request hit the method it will judge the ModelState by default. And when you hit the get method by your shared <a>, it send request without any data, so the ModelState is invalid.
2.Default Tag helper displays ModelState's value not Model.
In conclusion, you will render the ModelState error although it is a get method.
Two ways you can resolve this problem. The first way is that you can add ModelState.Clear() before you return View:
public ActionResult Details(StudentInfo model)
{
ModelState.Clear(); //add this....
helper.StudentInfo(ref model);
return View(model);
}
The second way is do not add the model as parameter:
public ActionResult Details()
{
var model = new StudentInfo();
helper.StudentInfo(ref model);
return View(model);
}
#for (var i = 1; i < 5; i++)
{
var Tier = $"Tier{i}Score";
<div class="col-12 mt-2">
<div class="row">
<div class="col-2">
<label>#i</label>
</div>
<div class="col-md col-6">
<div class="d-flex align-items-baseline">
<label>#localizer[$"Label_Tier{i}Description"]</label>
<i class="fas fa-info-circle pl-2 cursor-pointer tooltip-ico" data-toggle="tooltip" data-placement="right" title="#localizer[$"Tooltip_Tier{i}Score"]"></i>
</div>
</div>
<div class="col-md col-4">
<input asp-for="#Tier" type="text" class="line-input form-control" maxlength="4" autocomplete="off" />
</div>
</div>
</div>
}
When my div is generated, my id just display as id=Tier, I would like to get result id=Tier1Score, id=Tier2Score, id=Tier3Score and id=Tier4Score. How I can achieve this. Thank you.
You can't also see this answer: Dynamically assigning asp-for variables
But since it's just a TagHelper (it doesn't do anything besides writing correct HTML) you could also write it like this:
<input name="#Tier" id="#Tier" type="text" class="line-input form-control" maxlength="4" autocomplete="off" />
The name is important for the form-post, the id is probably used for javascript thingies you might want to do.
I am new to Razor pages and trying to create a page with a partial view. The partial view has a dropdownlist and a text input for Quantity field and a submit button. The Partial View renders correctly but when I click on the Submit button the Model passed to the Code behind has no value.
Here is the code I have
_PartialAddons.cshtml
#*
For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*#
#{
}
#model Public.Areas.Register.AddonListDto
<form method="post">
#Html.HiddenFor(Model => Model.Quantity)
<div style="padding:5px;">
<b>NZD $45</b>
</div>
<div>
<div style="padding:5px;">
<select id="skuSelect" asp-for="SelectedSkus" asp-items="#(new SelectList(Model.AddonSkus,"SkuId","SkuName"))" class="form-control">
<option>Please select one</option>
</select>
</div>
<div style="padding:5px;">
<input type="hidden" name="handler" value="Quantity" />
<input asp-for="Quantity" name="Quantity" class="form-control ng-untouched ng-pristine ng-valid" max="999" min="0" style="width:150px;" type="number" value="0" id="#Model.Id">
</div>
</div>
<div style="padding:5px;">
<a class="btn green" asp-page-handler="AddToCart">Add to Cart</a>
</div>
</form>
This is the Main Page
#foreach (var addons in Model.StoreAddonList)
{
<div class="panel card panel-default" style="margin-top:10px;">
<div class="panel-heading card-header" role="tab">
<div class="panel-title">
<div class="accordion-toggle" role="button" aria-expanded="true">
<div accordion-heading="" style="width:100%;">
#addons.Title
<i class="pull-right float-xs-right glyphicon glyphicon-chevron-down"></i>
</div>
</div>
</div>
</div>
<div class="panel-collapse collapse in show" role="tabpanel" style="overflow: visible; height: auto; display: block;" aria-expanded="true" aria-hidden="false">
<div class="panel-body card-block card-body">
<div style="padding-top:10px;background-color:#ffffff;clear:both;">
<div style="width:100%">
<div style="float:left;width:20%;text-align:left;">
Name
</div>
<div style="float:left;width:30%;padding-left:10px;">
#addons.Description
</div>
</div>
<div style="float:left;width:40%;padding-left:10px;">
<div>
#{
await Html.RenderPartialAsync("_PartialAddons.cshtml", addons);
}
</div>
</div>
<div style="clear:both;">
</div>
</div>
</div>
</div>
</div>
}
This is the Index.cshtml.cs to handle the submit
public ActionResult OnGetAddToCart(AddonListDto addOnList)
{
var sass = Quantity;
var tass = SelectedSkus;
return null;
}
The AddonListDto is null on the OnGetAddToCart Method. Have been trying to get this working for the past two days. Any help would be greatly appriciated
If you want to submit your data, you need to use OnPost instead of OnGet in razor pages and set the handler name in the <form> tag. For example:
handler:
public ActionResult OnPostAddToCart(AddonListDto addOnList)
partial view:
#model Public.Areas.Register.AddonListDto
<form method="post" asp-page-handler="AddToCart">
#Html.HiddenFor(Model => Model.Quantity)
<div style="padding:5px;">
<b>NZD $45</b>
</div>
<div>
<div style="padding:5px;">
<select id="skuSelect" asp-for="SelectedSkus" asp-items="#(new SelectList(Model.AddonSkus,"SkuId","SkuName"))" class="form-control">
<option>Please select one</option>
</select>
</div>
<div style="padding:5px;">
<input type="hidden" name="handler" value="Quantity" />
<input asp-for="Quantity" name="Quantity" class="form-control ng-untouched ng-pristine ng-valid" max="999" min="0" style="width:150px;" type="number" value="0" id="#Model.Id">
</div>
</div>
<div style="padding:5px;">
<input type="submit" value="Add To Cart" class="btn btn-primary" />
</div>
</form>
The form fields do not return the value of the form even thought the asp-controller and asp-action is stated.
The form does go to the right controller function and returns the right view, however, it does the form object is NULL.
#using ActionAugerMVC.Models
#model Tuple<IEnumerable<Cities>,Content,IEnumerable<Content>,Quote>
#addTagHelper "*,Microsoft.AspNetCore.Mvc.TagHelpers"
<div class="sidebar__item">
<p class="subheading">Instant Quote Request</p>
<form class="register__form" role="form" asp-controller="Plumbing" asp-action="QuoteForm" method="post">
<div class="text-danger" asp-validation-summary="All"></div>
<div class="form-group">
<label class="sr-only">Full Name </label>
<input asp-for="#Model.Item4.FullName" type="text" class="form-control" placeholder="Full name">
</div>
<div class="form-group">
<label class="sr-only">Your phone</label>
<input asp-for="#Model.Item4.Phone" type="tel" class="form-control" placeholder="Your phone">
<span asp-validation-for="#Model.Item4.Phone" class="text-danger"></span>
</div>
<div class="form-group">
<label class="sr-only">E-mail</label>
<input asp-for="#Model.Item4.Email" type="email" class="form-control" placeholder="E-mail">
<span asp-validation-for="#Model.Item4.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label class="sr-only">Your Message</label>
<input asp-for="#Model.Item4.Message" type="text" class="form-control" placeholder="Your Message">
</div>
<input type="submit" value="Get a Quote Now" class="btn btn-accent btn-block">
</form>
</div> <!-- .sidebar__item -->
And the Controller looks like this, with the Quote object being null.
The hard coded, values appear correctly in the view, but the Quote object returned by the form is null.
[HttpPost]
public IActionResult QuoteForm(Quote quote)
{
if (ModelState.IsValid)
{
/* quote.FullName = "Umar Aftab";
quote.Email = "test#email.com";
quote.City = "Calgary";
quote.Message = "Test Message";
quote.Phone = "6474543769";
*/
}
return View(quote);
}
The issue is your use of a Tuple as your view's model combined with asp-for. For example, with something like:
<input asp-for="#Model.Item4.FullName" type="text" class="form-control" placeholder="Full name">
The name of the input is going to end up as Item4.FullName. However, your action accepts only Quote, which means the modelbinder needs the input to be named just FullName in order to bind it properly. You either need to accept the same model the view uses (though I've never tried posting a Tuple so not sure if that will even work), or you can use a partial view to work around the issue.
Essentially, you just would need to move all the fields related to just Quote to a partial view. Then, in this view, you can include them via:
#Html.Partial("_QuoteFields", Model.Item4)
That should be enough psych Razor out enough to just name the fields like FullName instead of Item4.FullName. If it's not, then you may need to reset the HtmlFieldPrefix, via:
#Html.Partial("_QuoteFields, Model.Item4, new ViewDataDictionary(ViewData) { TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "" } })
The model on your view is different than the model you're trying to bind it to in the controller. You're not going to get the key/value pairs to match up
Put your razor in a partial view with Quote as the model and try that.
_QuoteForm.cshtml
#model Quote
<div class="form-group">
<label class="sr-only">Full Name </label>
<input asp-for="FullName" type="text" class="form-control" placeholder="Full name">
</div>
<div class="form-group">
<label class="sr-only">Your phone</label>
<input asp-for="Phone" type="tel" class="form-control" placeholder="Your phone">
<span asp-validation-for="Phone" class="text-danger"></span>
</div>
<div class="form-group">
<label class="sr-only">E-mail</label>
<input asp-for="Email" type="email" class="form-control" placeholder="E-mail">
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
<label class="sr-only">Your Message</label>
<input asp-for="Message" type="text" class="form-control" placeholder="Your Message">
</div>
OriginalView.cshtml
using ActionAugerMVC.Models
#model Tuple<IEnumerable<Cities>,Content,IEnumerable<Content>,Quote>
#addTagHelper "*,Microsoft.AspNetCore.Mvc.TagHelpers"
<div class="sidebar__item">
<p class="subheading">Instant Quote Request</p>
<form class="register__form" role="form" asp-controller="Plumbing" asp-action="QuoteForm" method="post">
<div class="text-danger" asp-validation-summary="All"></div>
#Html.Partial("_QuoteForm", Model.Item4)
<input type="submit" value="Get a Quote Now" class="btn btn-accent btn-block">
</form>
</div> <!-- .sidebar__item -->
Hello I am trying build a comment section for some physics articles in my site and for now i would like that when i click on
<a asp-route-articleid="smth" asp-action="Create">Create New</a>
it creates a page with url: http://localhost:65401/Physics/Create?articleid=smth
<h2>Create</h2>
<form asp-action="Create">
<div class="form-horizontal">
<h4>Physics</h4>
<hr />
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="CommentContext" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="CommentContext" class="form-control" />
<span asp-validation-for="CommentContext" class="text-danger" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
</form>
and now my question: How would I go about extracting that articleid in my controller? So far i tried this
public async Task<IActionResult> Create([Bind("ID,CommentContext,UserName,ArticleID")] Physics physics, string articleid)
{
if (ModelState.IsValid)
{
physics.UserName = HttpContext.User.Identity.Name;
physics.ArticleID = articleid;
_context.Add(physics);
await _context.SaveChangesAsync();
return RedirectToAction("Index");
}
return View(physics);
}
and also other desperate attempts by no luck so far. Any help would be appreciated.
EDIT:
using HttpContext.Request.GetEncodedUrl();gets me http://localhost:65401/Physics/Create but the point is I need that articleid=smth value.
Solution:
Request.Headers["Referer"].ToString();
will return string of full url including that 'articleid=smth' value.
If I understand I problem then you have following problem.
You have Create Button on One Page and that generate link you described. http://localhost:65401/Physics/Create?articleid=smth
Now when you click that link Your create method get called and it will return View that you have specified. ( At this time if you look articleId in your method then it will have that value).
Now after you value in comment and you submit the form. At that time You will not able to find articleId. This is because articleId not preserve anywhere.
If above is your issue then following will solve your problem.
Solution.
In Controller create two method
Get Method that will called when you click Create New. Another one is called when you submit the form.
Controller
[HttpGet]
public async Task<IActionResult> Create(string articleId)
{
Physics t = new Physics();
if(!string.IsNullOrEmpty(articleId))
{
t.ArticleID = articleId;
}
return View(t);
}
[HttpPost]
public async Task<IActionResult> Create([Bind("ID,CommentContext,UserName,ArticleID")]Physics physics)
{
if (ModelState.IsValid)
{
physics.UserName = HttpContext.User.Identity.Name;
//_context.Add(physics);
//await _context.SaveChangesAsync();
return RedirectToAction("Index");
}
return View(physics);
}
In your view I have made small change so articleId will preserve. ( See I have created hidden field for articleId)
<h2>Create</h2>
<form asp-action="Create">
<div class="form-horizontal">
<input asp-for="ArticleID" type="hidden" />
<h4>Physics</h4>
<hr />
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="CommentContext" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="CommentContext" class="form-control" />
<span asp-validation-for="CommentContext" class="text-danger" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
</form>
I hope that this solution will help you.