how to take input from TextBox and show in view in MVC

Question

I want to show one TextBox. In that if give any input string and button clicked it should so like this

hai , what is ur name
[TextBox]
welcome,ur name is "xyz"

I am new in MVC. Please help me to do this.

View

@{
    ViewBag.Title = "MyPage";
}

<h2>Mymethod</h2>
<h3>@ViewBag.Message</h3>
@Html.TextBox("Name")

<form method="post">
    <input type="submit" value="Submit" name="btn" />
</form>

HomeController.cs

public ActionResult Mymethod()
{
    ViewBag.Message = "Hello what is ur name ??? ";
    return View();
}

There are many good MVC tutorial videos, I suggest you go to Microsoft Virtual Academy or Youtube and you'll definitely find what you need there. — Peter B, Apr 29 '16 at 07:21

score 1 · Accepted Answer · edited May 23 '17 at 11:52

1

There are many ways to do this to accomplish what you want. I will provide you with a simplistic approach, please modify and change it to fit in with your scenario.

I would normally recommend using a view model above any other way, for example using a single string value or using FormCollection or ViewBag. They can work but I prefer to use view models.

I answered a question on what view models are and what they are supposed to do, please read it:

What is ViewModel in MVC?

First you will create a view model that will handle your input data, like first name, last name, age, etc. You will then pass this view model through to the view. In your example I will only include name:

public class ViewModel
{
     public string Name { get; set; }
}

In your Create action method you will instantiate this view model and pass it to the view. And when you click on the button to submit the form then the post action method will receive this view model as input parameter:

public ActionResult Create()
{
     ViewModel model = new ViewModel();

     return View(model);
}

[HttpPost]
public ActionResult Create(ViewModel model)
{
     if (!ModelState.IsValid)
     {
         // If validation fails send the view model back to the view and fix any errors
         return View(model);
     }

     // Do what you need to do here if there are no validation errors
     // In your example we are posting back to the current view to
     // display the welcome message
     return View(model);
}

And then finally you view will look like this:

@model Project.Models.ViewModel

@using (Html.BeginForm())
{
     @Html.TextBoxFor(m => m.Name)

     <button type="submit">Submit</button>

     if (!string.IsNullOrWhiteSpace(Model.Name))
     {
          <p>welcome, your name is @Model.Name</p>
     }
}

Please spend some time reading through the many online tutorials on ASP.NET MVC.

edited May 23 '17 at 11:52

Community

1
1

answered Apr 29 '16 at 09:28

Brendan Vogt

25,678
37
146
234

@STACK2 `Project` is just a name I used for the example. It will be the name of your project. `Models` would be a directory in this project and `ViewModel` is the class that will be in it. Please do some reading up on creating web applications with Visual Studio. – Brendan Vogt Apr 29 '16 at 10:48
i think its my project name = WebApplication4 – STACK2 Apr 29 '16 at 10:51
shall i add simple view ..or how to add view – STACK2 Apr 29 '16 at 10:51
how to add view model? – STACK2 Apr 29 '16 at 10:52
@STACK2 If your web application project is called `WebApplication4` then you put the `ViewModel` class in the `Models` directory. – Brendan Vogt Apr 29 '16 at 10:53
@STACK2 Right click and select add new class. – Brendan Vogt Apr 29 '16 at 10:54
@STACK2You are me basic Visual Studio questions that is not part of this post. Google it and get to know your editor and environment. Right click on the directory that says Models. With your mouse. I can't help you with these type of questions. – Brendan Vogt Apr 29 '16 at 11:07
ViewBag.Name = name;getting null.and getting null ref exception – STACK2 Apr 29 '16 at 13:56
We have answered your initial question ages ago. Accept an answer, move on to the next question. 1 question per post. By the looks of things now we are going to answer all your questions in 1 post. – Brendan Vogt Apr 29 '16 at 13:58

score 0 · Answer 2 · answered Apr 29 '16 at 08:02

Modify your current view to

    @using(Html.BeginForm("ControllerName","Mymethod",FormMethod.Post))
    {
       <input type="submit" value="Submit" name="btn" />
    }

Add another action method in your controller like this :

    [HttpPost]
    public ActionResult Mymethod(FormCollection form)
    {
        string Name = form["Name"];
        Viewbag.Name = Name;

        return View()
    }

Then add view to this controller and write this into it.

    Hi , Your Name is @Viewbag.Name

score 0 · Answer 3 · answered Apr 29 '16 at 08:14

You should wrap your form in form tag. It is a form after all. So when you click submit, you are submitting the form.

<form method="post">
    <h2>Mymethod</h2>
    <h3>@ViewBag.Message</h3>
    @Html.TextBox("Name")
    @if (!String.IsNullOrEmpty(ViewBag.Name))
    {
        <h3>
            welcome,ur name is @ViewBag.Name
        </h3>
    }

    <input type="submit" value="Submit" name="btn" />
</form>

On the controller, you need to add HttpPost handler for your Mymethod action. This is where your web server is accepting the form you've submitted.

[HttpPost]
public ActionResult Mymethod(string name)
{
    ViewBag.Message = "Hello what is ur name ???";
    ViewBag.Name = name;
    return View();
}

how to take input from TextBox and show in view in MVC

3 Answers3