asp.net-core-mvcasp.net-core-viewcomponentview-components

Passing form data from View Component to Controller in .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.


Solution

  • 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();
    }