Getting input value on submit MVC 3

Question

I've setup the default MVC 3 application and I'm new to it, but I've a problem when I'm trying to print a value from an input-field after I've clicked the submit button.

It's a simple register form with a submit button at the bottom. When I click the submit button nothing shall happen expect the text from one of the input-fields shall be printed to a label or something beneath the submit button. I'm totally lost on how to do this, I've tried to make a label with an id but I'm not able to get access to neither the input-fields value or the label.

Controller action looks like this:

[HttpPost]
        public ActionResult Create(Person person)
        {
            if (ModelState.IsValid)
            {
                db.Persons.Add(person);
                db.SaveChanges();
                return RedirectToAction("Index");  
            }

            return View(person);
        }

The complete form looks like this:

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>

        <div class="editor-label">
            @Html.LabelFor(model => model.Firstname)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Firstname)
            @Html.ValidationMessageFor(model => model.Firstname)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Lastname)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Lastname)
            @Html.ValidationMessageFor(model => model.Lastname)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Phone)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Phone)
            @Html.ValidationMessageFor(model => model.Phone)
        </div>
        <p>
            <button id="btn_Register">
                <span class="ui-button-text">Register</span>
            </button>
        </p>               
    </fieldset>
 }

MVC is completely different to asp.net. When you say "access to neither the input-fields value or the label" are you expecting to be able to do this in the code? — Tim B James, Aug 15 '11 at 12:44
@Tim: Not expecting it, but I'm new to MVC, so not sure how to get the value from an inputfield and put that value into a new label, that's all. — kokomo, Aug 15 '11 at 12:47

score 0 · Answer 1 · edited Jan 01 '13 at 01:56

As you do not want to submit the page or any other action, you have to perform this action on the client side using java script or Jquery. In java script just add onclick event to btn_Register button and set the value of label to the text field. If you are using jquery in the click event assign the value as below

btn_Register.click(function(){
    $("#label1").text($('txtfield1').val());
});

score 0 · Answer 2 · answered Aug 15 '11 at 12:50

0

In order to get all the values from the posted form, they will be ( in your example ) within the person object.

To output a value in a label, you will need to modify the person object with the new value, and then on the View output this value.

e.g.

person.labelvalue = "foo";

<span>@model.labelvalue</span>

I suggest you take a look at asp.net/mvc as a starting base before moving from asp.net to asp.net mvc

answered Aug 15 '11 at 12:50

Tim B James

20,084
4
73
103

You can also use `ViewBag`, `ViewData` or `TempData` for values that aren't part of the model. – GalacticCowboy Aug 15 '11 at 13:43
Yes, also these would be an option. – Tim B James Aug 15 '11 at 14:08

score 0 · Answer 3 · edited May 23 '17 at 11:47

You can have the way to go to the controller on button submit, get the input field value and set it on view to label you want to. However, if its just setting the label text on click of a button, then you don't need to have any server side code and so to say MVC code. Just use simple button instead of submit button. Write a JavaScript/jQuery event/function for button click and set the label text from required input-field. Something like...

$("#fooLabel").text($("#fooTextEditor").val());

To do this you will have to know the Ids of these two controls. As there is no built-in overload to provide Id to fields using @Html.EditorFor or @Html.LabelFor, you can either override HtmlHelper like suggested in this post.. How to specify ID for an Html.LabelFor<> (MVC Razor)

Or even simpler you can use any browser dev tool to find the generated Id for two controls and directly use them in your JaveScript/jQuery. Usually it is same as the model field name.

You get the property name as ID for each control. of for propery FirstName of your model would be id FirstName. therefore $("#FirstName").val() should be more then enough to get from the jquery use. — Anuj Pandey, Feb 16 '12 at 16:40

Getting input value on submit MVC 3

3 Answers3