MVC4 - How to use submit buttons in table rows

Question

I have a table and within each row I have one submit button, I want to submit the data of that row via HTTP POST. I've written my code but the form doesn't render. I am trying to render form each row so I can pass the row values. I am using GridMVC to render my table.

View

@model Business.Models.Administration.StatsImerptsViewModel
@using GridMvc.Html

    <h2>Application Stages portal</h2>

    <table>
        <tr>
            <td>
                IMechE Date:
            </td>
            <td>@Html.DropDownListFor(m => m.IMecheData, Model.ListOfYears)
            </td>
            <td>
                <input type="submit" value="View/Amend" />
            </td>
        </tr>
    </table>
    <br />

    <div id="grid-wrap" style="width: 500px;">
        @Html.Grid(Model.CouncilRegistrationReports).Named("ApplicationsGrid").Columns(columns =>
   {
       columns
  .Add()
  .Titled("Start Date")
  .Filterable(true)
  .Format("{0:dd/MM/yyyy}")
  .Encoded(false)
  .Sanitized(false)
  .SetWidth(30)
  .RenderValueAs(m =>

     @Html.TextBoxFor(t => m.StartDate, "{0:dd/MM/yyyy}", new { @class = "datepicker" })
  );
       columns
 .Add()
 .Titled("End Date")
 .Filterable(true)
 .Format("{0:dd/MM/yyyy}")
 .Encoded(false)
 .Sanitized(false)
 .SetWidth(30)
 .RenderValueAs(m =>

   @Html.TextBoxFor(t => m.EndDate, "{0:dd/MM/yyyy}", new { @class = "datepicker" })
 );

       columns
.Add()
.Titled("Date sent to EC")
.Filterable(true)
.Format("{0:dd/MM/yyyy}")
.Encoded(false)
.Sanitized(false)
.SetWidth(30)
.RenderValueAs(m =>

  @Html.TextBoxFor(t => m.ECDate, "{0:dd/MM/yyyy}", new { @class = "datepicker" })
);
       columns
.Add()
.Titled("CEng")
.Filterable(true)
.Encoded(false)
.Sanitized(false)
.SetWidth(30)
.RenderValueAs(m =>

@Html.TextBoxFor(t => m.CEng)
);
       columns
.Add()
.Titled("IEng")
.Filterable(true)
.Encoded(false)
.Sanitized(false)
.SetWidth(30)
.RenderValueAs(m =>

@Html.TextBoxFor(t => m.IEng)
);

       columns
.Add()
.Titled("EngTech")
.Filterable(true)
.Encoded(false)
.Sanitized(false)
.SetWidth(30)
.RenderValueAs(m =>

@Html.TextBoxFor(t => m.EngTech)
);
       columns
  .Add()
  .Encoded(false)
  .Sanitized(false)
  .SetWidth(30)
  .RenderValueAs(m =>

      @<b>
    @*  @Html.ActionLink("Update", "UpdateStatsImerpts", routeValues: new { Id = m.Id, StartDate = m.StartDate, EndDate = m.EndDate, ECDate = m.ECDate, CEng = m.CEng, IEng = m.IEng, EngTech = m.EngTech },
                               htmlAttributes: new { onclick = "", Id = m.Id })*@

                               @using (Html.BeginForm("StatsImerpts", "Administration", new { m = m }))
                               {
                                    <input type="submit" value="Update" />
                               }
      </b>
  );
       columns
       .Add()
       .Encoded(false)
       .Sanitized(false)
       .SetWidth(30)
       .RenderValueAs(m =>

           @<b> <a href="@Url.Action("DeleteStatsImerpts", "Administration", routeValues: new { Id = m.Id })" id="@m.Id">
               <img src="../../Images/delete.gif" alt="Delete" />
           </a></b>
  );

   }).WithPaging(50)
    </div>

    <script>
        $(function () {
            $(".datepicker").datepicker({
                changeMonth: true,
                changeYear: true
            });
        });
    </script>

HTML where I am trying to use html.beginForm()

@Html.TextBoxFor(t => m.EngTech)
);
       columns
  .Add()
  .Encoded(false)
  .Sanitized(false)
  .SetWidth(30)
  .RenderValueAs(m =>

      @<b>
    @*  @Html.ActionLink("Update", "UpdateStatsImerpts", routeValues: new { Id = m.Id, StartDate = m.StartDate, EndDate = m.EndDate, ECDate = m.ECDate, CEng = m.CEng, IEng = m.IEng, EngTech = m.EngTech },
                               htmlAttributes: new { onclick = "", Id = m.Id })*@
                           @using (Html.BeginForm("StatsImerpts", "Administration", new { m = m }))
                           {
                                <input type="submit" value="Update" />
                           }
  </b>

);

Has anyone tried to do this before? I know that I can use javascript and pass all the values of the row to a function but if I could just do a POST and pass the row values I think that would be simpler.

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

I'm not familiar with GridMvc, but I have done something similar for a shopping cart before (to update quantities or remove items) and I ended up using javascript to POST to an Action in the controller with the row's Id and a new Quantity.

EDIT: Look up how to POST using AJAX and see what comes up. There are a number of similar examples that might help. Also, see this post here, specifically the example using XMLHttpRequest.

edited May 23 '17 at 11:49

Community

1
1

answered Aug 06 '14 at 15:34

RemedialBear

644
5
15

Hey I am using this grid http://gridmvc.codeplex.com/ . I would like to try and get it to work with submit buttons but if it's not possible I will write the JS. – nick gowdy Aug 06 '14 at 15:38
if you are fine with JS and are more concerned with presentation, then you can add a generic JS post function and each row can have an Update button (formatted how you like) that calls the JS with OnClick – RemedialBear Aug 06 '14 at 15:42

MVC4 - How to use submit buttons in table rows

1 Answers1