CODEWITHSUNDEEP
c#asp.net-mvcrazor
Arpita
Arpita

Reputation: 455

How to pass TextBox value to URL.Action in MVC razor?

I have an ASP.Net MVC website and I want to pass a textbox value from view to controller using URL Action.

Below is my code,

<table class="table table-striped table-bordered table-hover" id="products" width="100%">
   <thead>
       <tr>
          <th>ProductId</th>
          <th>Name</th>
          <th>ShortName</th>
          <th>ProductNamePrefix</th>
          <th>Minimum Count</th>
          <th>Add Product</th>
       </tr>
   </thead>
   <tbody>
      @foreach (var item in Model)
      {
         <tr>
            <td>
               @Html.DisplayFor(modelItem => item.ProductId)
            </td>
            <td>
               @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
               @Html.DisplayFor(modelItem => item.ShortName)
            </td>
            <td>
               @Html.DisplayFor(modelItem => item.ProductNamePrefix)
            </td>
            <td>
               @Html.TextBox("MinCount", item.MinimumCount, new {@class = "form-control" + " " + item.ProductId})
            </td>
            <td>
               @if (item.IfExists == true)
               {
                  <div class='isa_success'><i class='fa fa-check'></i></div>
               }
               @if (item.IfExists == false)
               {
                  <a href="@Url.Action("AddProduct", "Home", new { ProductId = item.ProductId, Name = item.Name, ShortName = item.ShortName, ProductNamePrefix= item.ProductNamePrefix, MinimumCount= item.MinimumCount})"><div class='isa_info'><i class='fa fa-plus-circle'></i></div></a>
               }
           </td>
        </tr>
      }
   </tbody>
</table>

I want to pass the textbox value in url action method to controller. I am creating a custom class based on the id for textbox but I am not able to retrieve it using javascript or jQuery.

Upvotes: 1

Views: 3135

Answers (1)

David
David

Reputation: 218847

but I am not able to retrieve it using javascript or jQuery

Why not? It's pretty simple.

In the absence of JavaScript, you can't do this with just a link. Instead, you'd need to use a form. So you'd have to wrap each table row in a form element and replace your link with an input type="submit". (And, of course, style it according to your needs.) This would post the values of the contained form elements (including the text box) to the form's action.

This does get a little ugly, since you can't wrap a form around a tr, so you'd have to nest your structure. Something like this:

<table>
  <tr>
    <td>
      <form>
        <table><!-- Your 1-row table goes here --></table>
      </form>
    </td>
  </tr>
</table>

The outer tr is what gets repeated for each row of your "table", so each row is actually a single cell containing a nested table which itself has only one row. As I said, a bit ugly. But it gets the job done.

Upvotes: 3

Related Questions