Passing form data from View Component to Controller in .NET Core MVC - asp.net-core-mvc

I have a Component View and I try to update data from a form in it, I call the controller but in the controller I receive null :
public class CustomerPropertyViewComponent: ViewComponent
{
private MyDBContext context;
public CustomerPropertyViewComponent(MyDBContext _contex)
{
context = _contex;
}
public async Task<IViewComponentResult> InvokeAsync(int id)
{
CustomerPropertyModelView c = new CustomerPropertyModelView();
TblCustomerProperty t = new TblCustomerProperty(context);
c = t.getAllInfo(id);
if (c.model == null)
{
c.model = new TblCustomerProperty();
c.model.CustomerId = id;
}
return View(c);
}
}
and in the view I have
#model SunSystemDotNetCoreVersion.Models.helpers.CustomerPropertyModelView
<form asp-action="Update" asp-controller="CustomerProperties"
data-ajax="true"
data-ajax-method="POST"
method="post">
<div class="row w-100">
<div class="col-6">
<div class="row align-items-center h-100">
<div class="col-5 text-right">
Number of Bedrooms
</div>
<div class="col-7 p-1 p-1">
#Html.TextBoxFor(model => model.model.Bedrooms, new { #class = "form-control", Type = "number" })
</div>
<div class="col-5 text-right">
Current Heating System
</div>
<div class="col-7 p-1">
<select asp-for="model.HeatingSystemTypeId" class="form-control"
asp-items="#(new SelectList(Model.HeatingsList,"HeatingSystemTypeId","Title"))">
<option value="0">-Plaese Select-</option>
</select>
</div>
.....
<div class="col-12">
<button type="submit" >Save</button>
</div>
</div>
</form>
I have reduced most of the view code but it contains all data that the model needs. and this is my controller:
public class CustomerPropertiesController : Controller
{
private readonly MyDBContext_context;
public CustomerPropertiesController(MyDBContextcontext)
{
_context = context;
}
public IActionResult Update(TblCustomerProperty modelView) {
//here modelView is null
return View();
}
it should be work I don't know why it keeps sending null to my controller.

You could F12 to check the html elements in browser,and you will find the name of these elements are like:model.Bedrooms.Because your main model is CustomerPropertyModelView but your input belongs to TblCustomerProperty which named model in CustomerPropertyModelView.If your backend code recieve CustomerPropertyModelView as parameter,it will not be null.But if you recieve TblCustomerProperty as parameter,you need specify the suffix.
Change like below:
public IActionResult Update([Bind(Prefix ="model")]TblCustomerProperty modelView)
{
return View();
}

Related

Search Laravel Using Button

I want to search for data using a primary key, with PO as an example. Btw, I'm new to Laravel. Below is my code for my controller. I want to make the system go to the new page if the data that was searched exists(click on search button). If not, it will stay on the same page. Actually, I don't know whether my code is correct or not.
public function supplierindex(){
$supp_details = Supplier::where('PO','LIKE','%'.$searchPO.'%')->get();
return view ('frontend.praiBarcode.getweight')
->with('supp_details',$supp_details);
}
public function searchindex()
{
return view ('frontend.praiBarcode.getweight');
}
public function searchPO()
{
$searchPO = Supplier::where('PO','like',"%".$search."%")->get();
if (Supplier::where('PO','like',"%".$search."%")->exists()) {
return view('frontend.praiBarcode.getweight',compact('searchPO')); }
else {
return view('frontend.praiBarcode.index');
}
}
Below is my code in blade.php. However, the data does not come out on the screen.
<div class= "form-group">
#foreach ($supp_details as s)
<div style="font-size: 16px;" class="form-group row">
<label for="supp_name" class = "col-sm-2">PO</label>
<label for="supp_name" class = "col-sm-1">:</label>
<div class="col-sm-7">
<label> {{ $s->PO }}</label>
</div>
</div>
#endforeach
In order to pass data into the view, you have to use the second argument of the view function.
Example:
public function supplierindex(){
$supp_details = Supplier::where('PO','LIKE','%'.$searchPO.'%')->get();
return view ('frontend.praiBarcode.getweight' ,['supp_details' => $supp_details]);
}
You can use count() to check if query result is empty or not
public function searchPO()
{
$searchPO = Supplier::where('PO','like',"%".$search."%")->get();
$countsearchPO = $searchPO->count();
if ($countsearchPO ) {
return view('frontend.praiBarcode.getweight',compact('searchPO')); }
else {
return view('frontend.praiBarcode.index');
}
}
And in your blade your variable is stored in session
$supp_details = Session::get('supp_details');
#foreach ($supp_details as s)
<div style="font-size: 16px;" class="form-group row">
<label for="supp_name" class = "col-sm-2">PO</label>
<label for="supp_name" class = "col-sm-1">:</label>
<div class="col-sm-7">
<label> {{ $s->PO }}</label>
</div>
</div>
#endforeach

Custom Model Validation in ASP.Net core v3.1 MVC ajax form not seems to be working

I'm working on an ASP.Net core 3.1 MVC project in which I have to create a custom Validator, and I want it to be working for client as well as server side (e.g. Required Attribute).
I developed a simple custom validator like below just for POC -
public class ImportantAttribute : ValidationAttribute, IClientModelValidator
{
public void AddValidation(ClientModelValidationContext context)
{
if (context == null)
{
throw new ArgumentNullException(nameof(context));
}
AttributeUtils.MergeAttribute(context.Attributes, "data-val", "true");
AttributeUtils.MergeAttribute(context.Attributes, "data-val-important", FormatErrorMessage(context.ModelMetadata.GetDisplayName()));
}
public class AttributeUtils
{
public static bool MergeAttribute(
IDictionary<string, string> attributes,
string key,
string value)
{
if (attributes.ContainsKey(key))
{
return false;
}
attributes.Add(key, value);
return true;
}
}
protected override ValidationResult IsValid(object value, ValidationContext validationContext)
{
if (value != null)
{
string val = value.ToString();
if (val.Contains("hello"))
{
return ValidationResult.Success;
}
}
return new ValidationResult("Value not valid");
}
}
and used this attribute on a property and created a View using the same model.
Them modified the form tag to become an ajax form like -
<form asp-action="Index" role="form" data-ajax="true" data-ajax-method="post">
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" value="SGSM" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
Then I added below java script -
$(document).ready(() => {
console.log('I\'m ready bro');
$.validator.addMethod("important",
function (value, element, params) {
console.log('1', value);
return value.contains('hello');
}, "Not OK");
$.validator.unobtrusive.adapters.add("important",
['important'],
function (options) {
console.log('2', options);
options.rules["important"] = options.important;
options.messages["important"] = options.message;
});
});
When I run this by providing any value to the text box and submitting the form it don't show any error message on the page, but if I put break point in the Action Method the ModelState shows correct info.
If I make the form as regular form (i.e. non-ajax form) everything works as expected.
I have searched a lot but could not find any thing related.
Based on your code and requirement, I made some some modifications on custom client-side validation code, which works well for me, you can refer it.
<div class="row">
<div class="col-md-4">
<form asp-action="Index" method="post" role="form" data-ajax="true" data-ajax-method="post" data-ajax-complete="completed">
<div asp-validation-summary="All" 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">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script src="~/lib/jquery-ajax-unobtrusive/dist/jquery.unobtrusive-ajax.js"></script>
<script>
$(document).ready(() => {
console.log('I\'m ready bro');
});
completed = () => {
alert('Request completed!');
};
$.validator.addMethod("important",
function (value, element, params) {
console.log('1', value);
return value.includes('hello');
}, "Not OK");
$.validator.unobtrusive.adapters.add("important",
['important'],
function (options) {
console.log('2', options);
var element = $(options.form).find('input#Name')[0];
options.rules["important"] = [element, ''];
options.messages["important"] = options.message;
});
</script>
}
Test Result

ASP Core Ajax Posting From Partials

I have a requirement to separate parts of one page into Partial Views and one of those parts contains a form to submit data. I've been playing around with this and have managed to get the form to submit without reloading the page.
However I have two problems:
The form fields don't clear after a successful post
If validation is broken, those validation messages don't appear when returning the result.
I'll admit i'm not too familiar with AJAX in ASP to begin with but hopefully someone can hope. Here's my code:
Model
using System.ComponentModel.DataAnnotations;
namespace MVCValidation.Models
{
public class Thing
{
public int Id { get; set; }
[Required]
public string Value { get; set; }
public string OtherValue { get; set; }
}
}
Main View (_Index.cshtml)
#model MVCValidation.Models.Thing
#{
ViewData["Title"] = "Home Page";
}
<div class="text-center">
<h1 class="display-4">Ajax Partial Test</h1>
</div>
<div class="row">
<div class="col">
<form asp-controller="Home" asp-action="Edit" data-ajax="true" data-ajax-method="POST">
#await Html.PartialAsync("_Form", Model)
</form>
</div>
</div>
Partial View (_Form.cshtml)
#model MVCValidation.Models.Thing
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new {#class = "text-danger"})
#Html.HiddenFor(m => m.Id)
<div class="form-group">
#Html.LabelFor(m => m.Value, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(m => m.Value, new {htmlAttributes = new { #class = "form-control" }})
#Html.ValidationMessageFor(m => m.Value, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="submit" class="btn btn-success"/>
</div>
</div>
</div>
Controller (HomeController)
namespace MVCValidation.Controllers
{
public class HomeController : Controller
{
private readonly ILogger<HomeController> _logger;
public HomeController(ILogger<HomeController> logger)
{
_logger = logger;
}
public Thing GetThing()
{
return new Thing(){Id = 1, OtherValue = "Other"};
}
public IActionResult Index()
{
return View(GetThing());
}
[ValidateAntiForgeryToken]
[HttpPost]
public IActionResult Edit(Thing thing)
{
if(ModelState.IsValid)
{
ModelState.Clear();
return PartialView("_Form", GetThing());
}
return PartialView("_Form", thing);
}
}
}
In my _Layout view I have the jquery.unobtrusive-ajax.min.js referenced and it's loading fine. Please can anyone suggest where I'm going wrong?
So, I eventually found this article: https://damienbod.com/2018/11/09/asp-net-core-mvc-ajax-form-requests-using-jquery-unobtrusive/ and saw what I was doing wrong.
I expanded my tag to look like below:
<form asp-controller="Home" asp-action="Edit"
data-ajax="true"
data-ajax-method="POST"
data-ajax-mode="replace"
data-ajax-update="#result">
<div id="result">
#await Html.PartialAsync("_Form", Model)
</div>
</form>
the PartialAsync call now takes place inside a div that ultimately will be the target for the result to populate... so it effectively replaces itself.
I also had to change the controller method to this:
[ValidateAntiForgeryToken]
[HttpPost]
public IActionResult Edit(Thing thing)
{
if(ModelState.IsValid)
{
return RedirectToAction(nameof(Index));
}
return PartialView("_Form", thing);
}
This correctly returns the partial view when the model is invalid, and allows the page to be used again if it is valid.

Listbox for MVC 6 EF 7 Property not Populating

I've been trying for a while now to get a list box to populate and I can't seem to figure it out. I've studied entity framework 7 documentation pretty extensively but I'm still new to it. There aren't a lot of tutorials out there for MVC6/EF7 yet so its been hard to know what the best practice is for associating one entity class with an instance of another. Please excuse the length of the question, I'm just trying to be thorough.
I'm using entity framework 7, asp.net 5 and MVC 6.
Steps To Reproduce Issue
Create a new ASP.Net Web Application → Name of project: ListBox.Web → Name of solution ListBox
Choose APS.NET 5 Templates → Web Application
Create two classes in the Models folder
Parent.cs
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
namespace ListBox.Web.Models
{
public class Parent
{
public int ParentId { get; set; }
[Required]
public string Name { get; set; }
public ICollection<Child> Children { get; set; }
}
}
Child.cs
using System.ComponentModel.DataAnnotations;
namespace ListBox.Web.Models
{
public class Child
{
public int ChildId { get; set; }
[Required]
public string Name { get; set; }
public int ParentId { get; set; }
public Parent Parent { get; set; }
}
}
Create controllers and views for each of the data classes using scaffolding
Add links to the controllers in _Layout.cshtml
<ul class="nav navbar-nav">
<li><a asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-controller="Parents" asp-action="Index">Parents</a></li>
<li><a asp-controller="Children" asp-action="Index">Children</a></li>
<li><a asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
Create the database
ListBox\src\ListBox.Web>dns ef migrations add Initial
ListBox\src\ListBox.Web>dnx ef database update
Run the web application
Add a couple parents.
Attempt to add a child.
A drop box is shown for parents but there are no items in the drop box to select
The HTML for the list box is: <select class="form-control" data-val="true" data-val-required="The ParentId field is required." id="ParentId" name="ParentId"></select>
Controller Source Code
using System.Linq;
using Microsoft.AspNet.Mvc;
using Microsoft.AspNet.Mvc.Rendering;
using Microsoft.Data.Entity;
using ListBox.Web.Models;
namespace ListBox.Web.Controllers
{
public class ChildrenController : Controller
{
private ApplicationDbContext _context;
public ChildrenController(ApplicationDbContext context)
{
_context = context;
}
// GET: Children
public IActionResult Index()
{
var applicationDbContext = _context.Child.Include(c => c.Parent);
return View(applicationDbContext.ToList());
}
// GET: Children/Details/5
public IActionResult Details(int? id)
{
if (id == null)
{
return HttpNotFound();
}
Child child = _context.Child.Single(m => m.ChildId == id);
if (child == null)
{
return HttpNotFound();
}
return View(child);
}
// GET: Children/Create
public IActionResult Create()
{
ViewData["ParentId"] = new SelectList(_context.Set<Parent>(), "ParentId", "Parent");
return View();
}
// POST: Children/Create
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Create(Child child)
{
if (ModelState.IsValid)
{
_context.Child.Add(child);
_context.SaveChanges();
return RedirectToAction("Index");
}
ViewData["ParentId"] = new SelectList(_context.Set<Parent>(), "ParentId", "Parent", child.ParentId);
return View(child);
}
// GET: Children/Edit/5
public IActionResult Edit(int? id)
{
if (id == null)
{
return HttpNotFound();
}
Child child = _context.Child.Single(m => m.ChildId == id);
if (child == null)
{
return HttpNotFound();
}
ViewData["ParentId"] = new SelectList(_context.Set<Parent>(), "ParentId", "Parent", child.ParentId);
return View(child);
}
// POST: Children/Edit/5
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Edit(Child child)
{
if (ModelState.IsValid)
{
_context.Update(child);
_context.SaveChanges();
return RedirectToAction("Index");
}
ViewData["ParentId"] = new SelectList(_context.Set<Parent>(), "ParentId", "Parent", child.ParentId);
return View(child);
}
// GET: Children/Delete/5
[ActionName("Delete")]
public IActionResult Delete(int? id)
{
if (id == null)
{
return HttpNotFound();
}
Child child = _context.Child.Single(m => m.ChildId == id);
if (child == null)
{
return HttpNotFound();
}
return View(child);
}
// POST: Children/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public IActionResult DeleteConfirmed(int id)
{
Child child = _context.Child.Single(m => m.ChildId == id);
_context.Child.Remove(child);
_context.SaveChanges();
return RedirectToAction("Index");
}
}
}
Child Create.cshtml
#model ListBox.Web.Models.Child
#{
ViewData["Title"] = "Create";
}
<h2>Create</h2>
<form asp-action="Create">
<div class="form-horizontal">
<h4>Child</h4>
<hr />
<div asp-validation-summary="ValidationSummary.ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="ParentId" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="ParentId" class ="form-control"></select>
</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>
<div>
<a asp-action="Index">Back to List</a>
</div>
#section Scripts {
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
}
Change Create() method in ChildrenController, change
public IActionResult Create()
{
ViewData["ParentId"] = new SelectList(_context.Set<Parent>(), "ParentId", "Parent");
return View();
}
to
public IActionResult Create()
{
ViewData["ParentId"] = new SelectList(_context.Set<Parent>(), "ParentId", "Name");
return View();
}
In Create.cshtml, change
<select asp-for="ParentId" class="form-control"></select>
to
#Html.DropDownList("ParentId", null, htmlAttributes: new { #class = "form-control" })
The generated code is incorrect, it is a bug https://github.com/aspnet/Scaffolding/issues/149
One solution using "tag helpers" is:
Controller
...
ViewData["Parents"] = new SelectList(_context.Set<Parent>(), "ParentId", "Name", child.ParentId);
...
View
#{
var parents = (IEnumerable<SelectListItem>)ViewData["Parents"];
}
...
<select asp-for="ParentId" asp-items="parents" class ="form-control">
<option disabled selected>--- SELECT ---</option>
</select>
...
Here's how to do it when there is only one type of object which is nested within another object of the same type.
Object:
public class Fleet
{
public int Id { get; set; }
public Fleet ParentFleet { get; set; }
public int? ParentFleetId { get; set; }
public string Name { get; set; }
[InverseProperty("ParentFleet")]
public virtual List<Fleet> Children { get; set; }
public List<UserFleet> UserFleets { get; set; }
}
Controller:
ViewData["ParentFleetId"] = new SelectList(_context.Set<Fleet>(), "Id", "Name");
return View();
View:
<form asp-action="Create">
<div class="form-horizontal">
<h4>Fleet</h4>
<hr />
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="ParentFleet" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="ParentFleetId" asp-items="ViewBag.ParentFleetId" class="form-control">
<option value=""></option>
</select>
</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>

Can't get selected option in controller

I have a form to list up buckets in select options, it uploads file to bucket after select bucket and file, but I can't get selected bucket in my controller, The folder alwsy return empty string, though mutipartFile is no problem, I really want to know why!
I googled for all this week but no result what I need!
I am very new in thymeleaf even in spring framework:(
Pls help me to solve this simple problem to you:)
part of html file as below:
<form role="form" enctype="multipart/form-data" action="#" th:object="${folder}" th:action="#{'/drill/skin/upload'}" method="POST">
<div class="form-group">
<label class="form-control-static">Select Bucket</label>
<select class="form-control" th:field="${folder}">
<option th:each="bucket : ${buckets}" th:value="${bucket.name}" th:text="${bucket.name}">bucket</option>
</select>
</div>
<label class="form-control-static" for="inputSuccess">Select Upload File</label>
<div class="form-group">
<input type="file" class="form-control" name="uploadFile"/>
</div>
<div class="form-group">
<button class="btn btn-primary center-block" type="submit">Upload</button>
</div>
</form>
controller as below:
#RequestMapping(value="/", method=RequestMethod.GET)
public String provideUploadInfo(Model model) {
List<Bucket> buckets = s3Service.listBuckets();
model.addAttribute("buckets", buckets);
model.addAttribute("folder", "com.smartstudy");
return "index";
}
#RequestMapping(value="/upload", method=RequestMethod.POST)
public String handleFileUpload(
#ModelAttribute("folder") String folder,
#RequestParam("uploadFile") MultipartFile uploadFile, Model model) {
log.info("Bucket: " + folder + ", uploadFile: " + uploadFile.getOriginalFilename());
if (!uploadFile.isEmpty() && !folder.isEmpty()) {
return s3Service.upload(uploadFile, folder);
}
return "index";
}
There are couple of issues in your code.
Ideally, the whole form should be encapsulated in one form-backing object. In your case, create a Java object that wraps the folder and the file together.
class BucketFileForm{
private MultipartFile uploadFile;
private String folder;
public String getFolder() {
return folder;
}
public void setFolder(String folder) {
this.folder = folder;
}
public MultipartFile getUploadFile() {
return uploadFile;
}
public void setUploadFile(MultipartFile uploadFile) {
this.uploadFile = uploadFile;
}
}
Make this object available in the model so that you can access it in the view
#RequestMapping(value="/", method=RequestMethod.GET)
public String provideUploadInfo(Model model) {
List<Bucket> buckets = s3Service.listBuckets();
model.addAttribute("buckets", buckets);
//replace this
//model.addAttribute("folder", "com.smartstudy");
//with
BucketFileForm bucketFileForm = new BucketFileForm();
bucketFileForm.setFolder("com.smartstudy");
model.addAttribute("bucketFileForm", bucketFileForm);
return "index";
}
Now, use this form-backing object in the form
<form role="form" enctype="multipart/form-data" action="#" th:object="${bucketFileForm}" th:action="#{'/drill/skin/upload'}" method="POST">
<div class="form-group">
<label class="form-control-static">Select Bucket</label>
<select class="form-control" th:field="*{folder}">
<option th:each="bucket : ${buckets}" th:value="${bucket.name}" th:text="${bucket.name}">bucket</option>
</select>
</div>
<label class="form-control-static" for="inputSuccess">Select Upload File</label>
<div class="form-group">
<input type="file" th:field="*{uploadFile}" class="form-control" name="uploadFile"/>
</div>
<div class="form-group">
<button class="btn btn-primary center-block" type="submit">Upload</button>
</div>
</form>
Then modify your POST endpoint to accomodate these changes.
#RequestMapping(value="/upload", method=RequestMethod.POST)
public String handleFileUpload(#ModelAttribute("bucketFileForm") final BucketFileForm form, final BindingResult bindingResult, Model model) {
log.info("Bucket: " + form.getFolder() + ", uploadFile: " + form.getUploadFile().getOriginalFilename());
if (!form.getUploadFile().isEmpty() && !form.getFolder().isEmpty()) {
return s3Service.upload(uploadFile, folder);
}
return "index";
}

Resources