ASP.NET MVC get textbox input value

Question

I have a textbox input and some radio buttons. For example my textbox input HTML looks like that:

<input type="text" name="IP" id="IP" />

Once user clicks a button on a web page I want to pass data to my controller:

<input type="button" name="Add" value="@Resource.ButtonTitleAdd"  onclick="location.href='@Url.Action("Add", "Configure", new { ipValue =@[ValueOfTextBox], TypeId = 1 })'"/>

Maybe it is trivial but my problem is that I do not know how to get textbox value and pass it through to the controller. How can I read the textbox value and pass it to the controller through ipValue=@[ValueOfTextBox]?

Andrei · Accepted Answer · 2017-07-12 18:54:58Z

155

Simple ASP.NET MVC subscription form with email textbox would be implemented like that:

Model

The data from the form is mapped to this model

public class SubscribeModel
{
    [Required]
    public string Email { get; set; }
}

View

View name should match controller method name.

@model App.Models.SubscribeModel

@using (Html.BeginForm("Subscribe", "Home", FormMethod.Post))
{
    @Html.TextBoxFor(model => model.Email)
    @Html.ValidationMessageFor(model => model.Email)
    <button type="submit">Subscribe</button>
}

Controller

Controller is responsible for request processing and returning proper response view.

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Subscribe(SubscribeModel model)
    {
        if (ModelState.IsValid)
        {
            //TODO: SubscribeUser(model.Email);
        }

        return View("Index", model);
    }
}

Here is my project structure. Please notice, "Home" views folder matches HomeController name.

edited Jul 12, 2017 at 18:54

answered Sep 18, 2013 at 13:14

Andrei

44.9k39 gold badges163 silver badges228 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Willy Over a year ago

And if I need to pass more than one parameter apart from the textbox value, for example, a number to identify in the controller the type of something, this is possible with your method? If so, could you tell me how?

Koushik Saha Over a year ago

@AndreiMikhalevich can u pls give an example with html post?

Andrei Over a year ago

@user3132179 the only difference is that you need to put [HttpPost] attribute on an action, and obviously use Post method in a form.

user153923 Over a year ago

The C# View has (m => m.FirstName), and the View and Controller has @Html.TextBox("name"). Does the Html.TextBox "name" need to match up to the UserModel variable? If not, how are these page values mapped to the correct object property?

Alex M · Accepted Answer · 2017-11-30 11:13:46Z

27

You may use jQuery:

<input type="text" name="IP" id="IP" value=""/>
@Html.ActionLink(@Resource.ButtonTitleAdd, "Add", "Configure", new { ipValue ="xxx", TypeId = "1" }, new {@class = "link"})

<script>
  $(function () {
    $('.link').click(function () {
      var ipvalue = $("#IP").val();
      this.href = this.href.replace("xxx", ipvalue);
    });
  });
</script>

edited Nov 30, 2017 at 11:13

Alex M

2,8467 gold badges31 silver badges36 bronze badges

answered Sep 18, 2013 at 13:23

Andrey Gubal

3,4792 gold badges20 silver badges21 bronze badges

Comments

Alex M · Accepted Answer · 2017-11-30 11:10:56Z

19

Try This.

View:

@using (Html.BeginForm("Login", "Accounts", FormMethod.Post)) 
{
   <input type="text" name="IP" id="IP" />
   <input type="text" name="Name" id="Name" />

   <input type="submit" value="Login" />
}

Controller:

[HttpPost]
public ActionResult Login(string IP, string Name)
{
    string s1=IP;//
    string s2=Name;//
}

If you can use model class

[HttpPost]
public ActionResult Login(ModelClassName obj)
{
    string s1=obj.IP;//
    string s2=obj.Name;//
}

edited Nov 30, 2017 at 11:10

Alex M

2,8467 gold badges31 silver badges36 bronze badges

answered Jan 25, 2017 at 6:09

Vidhyadhar Galande

5957 silver badges15 bronze badges

Comments

Alex M · Accepted Answer · 2017-11-30 11:12:39Z

6

Another way by using ajax method:

View:

@Html.TextBox("txtValue", null, new { placeholder = "Input value" })
<input type="button" value="Start" id="btnStart"  />

<script>
    $(function () {
        $('#btnStart').unbind('click');
        $('#btnStart').on('click', function () {
            $.ajax({
                url: "/yourControllerName/yourMethod",
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                data: JSON.stringify({
                    txtValue: $("#txtValue").val()
                }),
                async: false
            });
       });
   });
</script>

Controller:

[HttpPost]
public EmptyResult YourMethod(string txtValue)
{
    // do what you want with txtValue
    ...
}

edited Nov 30, 2017 at 11:12

Alex M

2,8467 gold badges31 silver badges36 bronze badges

answered Mar 16, 2016 at 14:28

Andrei Karcheuski

3,3364 gold badges42 silver badges39 bronze badges

1 Comment

Harsh Raj Over a year ago

Every time I am getting null for txtValue in action method

Ali Tabandeh · Accepted Answer · 2018-02-05 14:58:18Z

you can do it so simple:

First: For Example in Models you have User.cs with this implementation

public class User
 {
   public string username { get; set; }
   public string age { get; set; }
 }

We are passing the empty model to user – This model would be filled with user’s data when he submits the form like this

public ActionResult Add()
{
  var model = new User();
  return View(model);
}

When you return the View by empty User as model, it maps with the structure of the form that you implemented. We have this on HTML side:

@model MyApp.Models.Student
@using (Html.BeginForm()) 
 {
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Student</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.username, htmlAttributes: new { 
                           @class = "control-label col-md-2" })
            <div class="col-md-10">
                 @Html.EditorFor(model => model.username, new { 
                                 htmlAttributes = new { @class = "form-
                                 control" } })
                 @Html.ValidationMessageFor(model => model.userame, "", 
                                            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="Create" class="btn btn-default" 
                 />
            </div>
        </div>
   </div>
}

So on button submit you will use it like this

[HttpPost]
public ActionResult Add(User user)
 {
   // now user.username has the value that user entered on form
 }

Collectives™ on Stack Overflow

ASP.NET MVC get textbox input value

5 Answers 5

Model

View

Controller

4 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Model

View

Controller

4 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related