ASP.NET MVC Core TextBoxFor event pass model from View to Controller

Question

To be up front, my career has mostly been back end C# work and nothing on the front end, so my knowledge on all things front end is very limited.

To begin, I have scoured everywhere looking for how to pass a model from the view to the controller when the enter key is pressed while in a textbox. I have looked at ajax and js, but no example showed me how to pass in a model. I got close and what resulted is the model was null while in the controller action method. As an example, the below code I would like to have an event on the Zip textbox when someone presses the Enter key while focus is in said textbox, it will pass the Model containing any and all values to the GotZip controller action.

Any assistance would be greatly appreciated!

Help me Obi-Wan Kenobi, you're my only hope...

Index.cshtml

@model MyProject.Models.MyModel
@{
    ViewBag.Title = "MyApp";
}

<div class="text-left">
    <form asp-controller="Home" asp-action="Index">
        <table>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Name)
                    @Html.TextBoxForFor(model => model.Name)
                </th>               
            </tr>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Address1)
                    @Html.TextBoxForFor(model => model.Address1)
                </th>               
            </tr>           
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.City)
                    @Html.TextBoxForFor(model => model.City)
                </th>               
            </tr>   
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.State)
                    @Html.TextBoxForFor(model => model.State)
                </th>               
            </tr>   
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Zip)
                    @Html.TextBoxForFor(model => model.Zip)
                </th>               
            </tr>               
        </table>
        <input name="Submit" type="submit" asp-action="SubmitButton" value="Submit" />      
    </form>
</div>

MyModel.cs

namespace MyProject.Models
{
    public class MyModel
    {
        public string Name { get; set; }
        public string Address1 { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string Zip { get; set; }
    }
}

HomeController.cs

namespace MyProject.Controllers
{
    [Authorize]
    public class HomeController : Controller
    {
        public IActionResult SubmitButton([FromForm] MyModel model)
        {
            //do stuff with model

            ModelState.Clear();

            return View("Index", myModel);
        }

        public IActionResult GotZip([FromForm] MyModel model)
        {
            //do stuff with model

            ModelState.Clear();

            return View("Index", myModel);
        }

    }
}

Answer 1

how to pass a model from the view to the controller when the enter key is pressed while in a textbox.

I would like to have an event on the Zip textbox when someone presses the Enter key while focus is in said textbox, it will pass the Model containing any and all values to the GotZip controller action

Your action GotZip returns a ViewResult, if you'd like to render a view to browser client while user press the Enter key in textbox, you can try to use a hidden submit button and manually trigger it to submit data to action you expect, like below.

    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Zip)
            @Html.TextBoxFor(model => model.Zip, new { @onkeydown = "return myfunc(event);" })
        </th>
    </tr>
</table>
<input name="Submit" type="submit" asp-action="SubmitButton" value="Submit" />
<input id="SubmitToGotZip" type="submit" asp-action="GotZip" value="Submit" style="display:none;" />

JS function

function myfunc(e) {
    if (e.which == 13) {

        $("#SubmitToGotZip").click();

        return false;
    }
    return true;
}

I have looked at ajax and js, but no example showed me how to pass in a model.

If you'd like to post form data through ajax, you can try:

function myfunc(e) {
    if (e.which == 13) {
        var form = new FormData($('form')[0]);
         
        $.ajax({
            type: 'POST',
            url: '/home/GotZip',
            data: form,
            processData: false,
            contentType: false,
            success: function (result) {
                
                //code logic here
            },
            error: function () {
                console.log('error');
            }
        });

        return false;
    }
    return true;
}