Passing form data from View Component to Controller in .NET Core MVC

Question

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.

are you sure `modelView` is `null`? that sounds strange, for complex-type model binding, a default instance is always created even when the model binding is failed. So the model's properties can be null but the model itself should not. BTW, from your code, looks like your view model passed in `Update` should be `CustomerPropertyModelView` not `TblCustomerProperty`. If you actually mean `TblCustomerProperty`, your view code is wrong. But still you should confirm if `modelView` is `null` or just properties of it. — King King, Mar 31 '21 at 20:22
@KingKing modelview and all its properties are null. I think it's because of naming I will try rena suggestion. — Paria Shiri, Apr 01 '21 at 14:28

score 2 · Accepted Answer · answered Apr 01 '21 at 03:15

2

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

answered Apr 01 '21 at 03:15

Rena

30,832
6
37
72

thanks for the reply I try it and let you know the result. – Paria Shiri Apr 01 '21 at 14:26
thanks, dear @rena. that's work for getting one of the fields of my ModelView(TblCustomerProperty) in fact my ModelVeiw has some other properties which I couldn't read by suffix but i's ok for TblCustomerProperty :) – Paria Shiri Apr 01 '21 at 15:25

Passing form data from View Component to Controller in .NET Core MVC

1 Answers1