How to implement Razor Pages model binding with standard HTML?

Question

I'm currently building a web application using ASP.NET MVC. I have a few forms in my view that receive data to be put into a post response body. I would like to attach those inputs to my view model, and then pass my view model back to my controller in order to work on them.

Here's a sample of something I have in my web app:

<select id="ServiceSelect" size="3" style="width:600px; overflow-y:auto" multiple="multiple">
                <option value="Service 1" class="pad">Service 1 </option>
                <option value="Service 2" class="pad">Service 2</option>
                <option value="Service 3" class="pad">Service 3</option>
            </select> 

            <input type="hidden" id="service" name="service" value="" />
            
            <!-- this puts the two buttons side by side after the select -->
            <br />

            <input type="submit" name="start" value="Start Service(s)" />
            <input type="submit" name="stop" value="Stop Service(s)" />

(the hidden input is populated using jQuery functions based on select form)

I would like to make use of Razor Pages' model binding characteristics in order to add my hidden input to my model upon selecting one of the submit buttons. Currently, through Fiddler, I can see that it is populating the response body correctly, but I'm thinking the native MVC model binding might be a cleaner approach.

However, in code examples like such:

<td>
     @Html.DropDownListFor(m => m.Gender /* <- this being what I want */, new List<SelectListItem>
     { new SelectListItem{Text="Male", Value="M"},
       new SelectListItem{Text="Female", Value="F"}}, "Please select")
</td>

I can't see a way to include my current functionality and style that I have set up with my own select tag (multiple select, style).

I'm new to Razor Pages, so I don't quite know the syntax well for it's built in functions. I find the raw HTML to be easier to code, read, and style, but haven't been able to find any online resources in order to help me with this problem.

Is there a way to take advantage of MVC/Razor Pages model binding characteristics while incorporating one's own HTML forms, rather than the less extensible (to my possibly misguided knowledge and opinion) built-in @Html ones?

Using `@Html.DropDownListFor()` (or `ListBoxFor()` if you want a ` — , Sep 24 '18 at 23:26
And is this [Razor Pages](https://learn.microsoft.com/en-us/aspnet/core/razor-pages/?view=aspnetcore-2.1&tabs=visual-studio) in asp.net-core? — , Sep 24 '18 at 23:27
It is in asp.net-mvc as tagged, but I believe it's the same. I have never seen ListBoxFor(); it does seem to be a solution to my problem if I am to refactor and go that route, which I'm not necessarily opposed to. I'm just curious if there is a way to implement the model binding behavior without changing my current HTML code structure, but I'm open to doing so if it is necessary. — nostalgk, Sep 24 '18 at 23:29
But why would you not want to use the `HtmlHelper` methods which give you 2-way model binding, client side validation etc? (you would need to write hundreds of line of additional code to make it work correctly with your manual html) — , Sep 24 '18 at 23:34
I was not entirely aware of them and am working to update a previous solution that is already created, so it will require a rewrite and implementation in order to do so if I am to use those methods. Which is preferable if, like you say, hundreds of lines of additional code would already be necessary. I am mainly looking to see if I can implement that binding by attaching a method to existing HTML rather than using things like ListBoxFor(), but I am open to it if there isn't another solution. — nostalgk, Sep 24 '18 at 23:37
Your comments here compiled would be sufficient enough for an answer I think! — nostalgk, Sep 24 '18 at 23:37

score 2 · Accepted Answer · answered Sep 25 '18 at 13:37

As per my understanding you are looking for Model binding

To implement the same your code should be look like below Sample code :

View

Index.cshtml

@model WebApplication3.Models.Test
@{
ViewBag.Title = "Home Page";
}


@using (Html.BeginForm("Save", "Home", FormMethod.Post))
{
 <div class="row">
 <div class="col-md-4">
    @Html.TextBoxFor(m => m.EmployeeName)

 </div>

 <input type="submit" value="Save" />

 </div>
}

Controller

 public ActionResult Index()
    {
        Test objTest= new Test();
        objTest.EmployeeName = "Test";
        return View(objTest);
    }
  public ActionResult Save(Test obj)
    {
        return View("About");
    }

Model

 public class Test
{
    public string EmployeeName { get; set; }
}

Please follow the same to implement the Model Binding

Thank you, I really appreciate your examples, it's obvious to me now that I'm going to have to use the HtmlHelper classes. — nostalgk, Sep 28 '18 at 13:37

score 1 · Answer 2 · answered Sep 24 '18 at 23:44

So you asked a lot of things that i think that i understood but i'm not sure if got it all.

First of you need to set the @model in the top of the razor page to get the razor to understand what model you're using.

Secondly, if you want a POST action you should be you a code like this:

@Html.BeginForm(){
enter code here
}

An you can put the hidden input using the @Html.HiddenFor(model => model.service)

And the last thing that i understood that you were asking was the styles.

Every Html.HiddenFor or Html.TextBoxFor have an optional builder value of an object of htmlAttributes. You can use that to pass style to the tags, for instance:

@Html.TextBoxFor(txt => txt.name, new { @class= "textbox"})

How to implement Razor Pages model binding with standard HTML?

2 Answers2