C#•15mo ago

❔ Need help understanding Model Binding better

I'm trying to re-familiarize myself with .NET Core MVC after using Web Forms for about 6 years. I'm working on a CMS, and when you go to a page, you retrieve all the content for that page from the CMS, map it to a view model, and then display all that information on the page. The data could be a title and description for example. But what if I also need a form on that same page? Now my view model is title, description, and now it has the Name and Age for form values and when you click the submit button, it will redirect you to a page. If the name is not filled in, it will show the error message. This is very simple, and I understand that I could use Html.HiddenFor for the title and description but what if there is a lot of properties in the view model, say 20 properties. Do I have to have 20 hidden elements to pass the view model in the form submission when all I need is the name and age?

11 Replies

SiloCitizen3•15mo ago

I think you want ModelValidation here, no? https://www.tutorialsteacher.com/mvc/implement-validation-in-asp.net-mvc You can decorate your Model properties with Required, MinLength, etc, and then when the model is POSTed do if(!Model.IsValid){ return BadRequest()} or something

Data Validation in ASP.NET MVC

Clink50OP•15mo ago

Taking the below as an example, let's say I take the StudentPage as a viewmodel instead of just a Student model. The StudentPage model has a title, description, books, and 15 more properties just as an example. When I submit the form, I have to pass all 15+ properties with the form request, when all I actually needed was the name and the age in the request. Is this expected? It seems wrong.

@model MVC_BasicTutorials.Models.StudentPage

<h2>@Model.Title</h2>
<h2>@Model.Description/h2>

foreach (var book in Model.Books) {
  <h3>@book.Name</h3>
  <p>@book.Author</p>
  ...
} 

// ...other 15 properties here that are used throughout the whole page

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>Student</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.StudentId)

        <div class="form-group">
            @Html.LabelFor(model => model.StudentName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.StudentName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.StudentName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

@model MVC_BasicTutorials.Models.StudentPage

<h2>@Model.Title</h2>
<h2>@Model.Description/h2>

foreach (var book in Model.Books) {
  <h3>@book.Name</h3>
  <p>@book.Author</p>
  ...
} 

// ...other 15 properties here that are used throughout the whole page

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>Student</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.StudentId)

        <div class="form-group">
            @Html.LabelFor(model => model.StudentName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.StudentName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.StudentName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

Here is another example. Is there not a better way to do this? I shouldn't have to put all 20 values in the form as hidden elements when all I need is the redirectoption and hoursread in the form request.

@model YourNamespace.ReadingViewModel

<h1>@Model.Title</h1>
<p>@Model.Description</p>
<p>@Model.StaticValue1</p>
<p>@Model.StaticValue2</p>

@using (Html.BeginForm("Submit", "Reading", FormMethod.Post))
{
    @Html.HiddenFor(m => m.Title)
    @Html.HiddenFor(m => m.Description)
    @Html.HiddenFor(m => m.StaticValue1)
    @Html.HiddenFor(m => m.StaticValue2)
    <!-- Add hidden fields for other static values -->

    <div>
        @Html.LabelFor(m => m.RedirectOption)
        @Html.DropDownListFor(m => m.RedirectOption, new SelectList(new[] { "Google", "Amazon", "Etsy" }))
        @Html.ValidationMessageFor(m => m.RedirectOption)
    </div>

    <div>
        @Html.LabelFor(m => m.HoursRead)
        @Html.TextBoxFor(m => m.HoursRead)
        @Html.ValidationMessageFor(m => m.HoursRead)
    </div>

    <div>
        <input type="submit" value="Submit" />
    </div>
}

@model YourNamespace.ReadingViewModel

<h1>@Model.Title</h1>
<p>@Model.Description</p>
<p>@Model.StaticValue1</p>
<p>@Model.StaticValue2</p>

@using (Html.BeginForm("Submit", "Reading", FormMethod.Post))
{
    @Html.HiddenFor(m => m.Title)
    @Html.HiddenFor(m => m.Description)
    @Html.HiddenFor(m => m.StaticValue1)
    @Html.HiddenFor(m => m.StaticValue2)
    <!-- Add hidden fields for other static values -->

    <div>
        @Html.LabelFor(m => m.RedirectOption)
        @Html.DropDownListFor(m => m.RedirectOption, new SelectList(new[] { "Google", "Amazon", "Etsy" }))
        @Html.ValidationMessageFor(m => m.RedirectOption)
    </div>

    <div>
        @Html.LabelFor(m => m.HoursRead)
        @Html.TextBoxFor(m => m.HoursRead)
        @Html.ValidationMessageFor(m => m.HoursRead)
    </div>

    <div>
        <input type="submit" value="Submit" />
    </div>
}

SiloCitizen3•15mo ago

in mvc you can have multiple forms. Just make another POST endpoint and structure the VIewModel you take in, to just the fields you care about so something like

@using (Html.BeginForm("Submit", "Reading", FormMethod.Post))
{
//the long 15 field view model
}

@using (Html.BeginForm("SubmitWithOtherViewModel", "Reading", FormMethod.Post))
{
//the shorter 3 field view model
}

@using (Html.BeginForm("Submit", "Reading", FormMethod.Post))
{
//the long 15 field view model
}

@using (Html.BeginForm("SubmitWithOtherViewModel", "Reading", FormMethod.Post))
{
//the shorter 3 field view model
}

abandon all concepts of the singular giant <form> tag on the page. you can have multiple forms, you can omit forms and just go for all ajax. probably makes sense to stick each form/viewmodel declaration, in seperate child views

Clink50OP•15mo ago

Hmm maybe I'm asking the wrong way. The title and description and other values don't need to be in any form, they are just to display some values on the page. The values that do matter are the RedirectOption and the HoursRead. But the viewmodel requires those two properties + the 15 other static properties when I submit the form in order for all the whole thing to be bound in case of an error an I have to return the whole view back to the page. I guess I just don't understand how it's supposed to work in this case. I'm used to just sending an api request with the values that I need and then if there was an error, just showing those error messages through JS. Every example I've looked at so far is just showing a whole page as a form, but that's not realistic. I could have a page with static content that comes from the CMS displays at the top, and then a call to action form at the bottom of the page. But using MVC, I would have to have all the static content bound to the viewmodel plus the form properties in order for me to be sent back to the same page and no values changed on the form if there was an error. Hopefully I'm making sense.

SiloCitizen3•15mo ago

So, stick those "for viewing purposes only" values in the ViewBag dictionary, on the Get controller action, and then in view load them from ViewBag.Whatever

SiloCitizen3•15mo ago

https://www.tutorialsteacher.com/mvc/viewbag-in-asp.net-mvc

ViewBag in ASP.NET MVC

Clink50OP•15mo ago

So don't have them in the ViewModel at all, and just use the ViewBag? I always remembered that using the ViewBag was bad practice but that was a long time ago haha Thank you for your help with this! I'll try this out and see if I can get it to work 👍

SiloCitizen3•15mo ago

if it's just to display some crap, that's pretty much what the ViewBag is for

Clink50OP•15mo ago

Okay cool that makes sense "ViewBag"

SiloCitizen3•15mo ago

yeah, you just wont get handholding with it, out of the box blah blah blah "The issue with ViewBags and the recommended best practice boils down to compile time checking. ViewBags are just dictionaries and with that you get 'magic' strings, so if you end up changing the object type of one of the viewbag items or the key name you won't know until runtime" as with all "best practices", it really all boils down to sense and sensability

Accord•15mo ago

Was this issue resolved? If so, run /close - otherwise I will mark this as stale and this post will be archived until there is new activity.

Gaming

Programming

❔ Need help understanding Model Binding better