javascript - List object ID value bind with dialog modal property -

i have following list view

once click reject configured open modal dialog following

so once submit modal dialog want submit modal values method save in database table.

this relevant model classes

    public class productviewmodel     {         public ab_product products { get; set; }         public ienumerable<ab_product> lproducts { get; set; }     }      public partial class ab_product     {         public string productid { get; set; }         public string approvalstatus { get; set; }         public string reasonen { get; set; }         public string reasonar { get; set; }     } 

this view page code

@model project_name.models.productviewmodel  <table class="table">      <tr>         <th>             name         </th>         <th>             action         </th>     </tr>      @foreach (var obj in model.lproducts)     {         <tr>             @html.hiddenfor(modelitem => obj.productid)              <td>                 @html.displayfor(modelitem => obj.producttitleen)             </td>              <td>                  <div class="btn-group btn-group-sm" id="createbutton">                     <button type="button" class="btn btn-default" onclick="location.href='@url.action("create")';return false;">view product</button>                 </div>                  @if (obj.approvalstatus == "pending")                 {                     <div class="btn-group btn-group-sm" id="approvebutton">                         <button type="button" class="btn btn-success" onclick="location.href='@url.action("change_product_state","home", new { productid = obj.productid, value = "approved" },null)';return false;">approve</button>                     </div>                      <div class="btn-group btn-group-sm" id="rejectbutton">                         <button type="button" id="modal-opener" class="btn btn-danger" return false;">reject</button>                     </div>                  }                  <div class="btn-group btn-group-sm" id="createbutton">                     <button type="button" class="btn btn-primary" onclick="location.href='@url.action("create_productcomments","home", new { productid = obj.productid }, null)';return false;">add comments</button>                 </div>              </td>          </tr>     }  </table>   <div id="dialog-modal" title="basic modal dialog">     @using (ajax.beginform("change_product_state", "home", new { value = "rejected" }, new ajaxoptions { updatetargetid = "id", onsuccess = "onsuccess" }))     {         <div>             <fieldset>                 <legend>account information</legend>                  <div class="editor-label">                     @html.labelfor(m => m.products.reasonen)                 </div>                  <div class="editor-field">                     @html.textareafor(m => m.products.reasonen)                     @html.validationmessagefor(m => m.products.reasonen)                 </div>                  <div class="editor-label">                     @html.labelfor(m => m.products.reasonar)                 </div>                  <div class="editor-field">                     @html.textareafor(m => m.products.reasonar)                     @html.validationmessagefor(m => m.products.reasonar)                 </div>                  <p>                     <input type="submit" value="submit" />                 </p>              </fieldset>         </div>     } </div>   @section scripts {  <script>         $(function () {             $("#dialog-modal").dialog({                 autoopen: false,                 width: 400,                 height: 400,                 show: {                     effect: "blind",                     duration: 1000                 },                 hide: {                     effect: "explode",                     duration: 1000                 }             });              $("#modal-opener").click(function () {                  $("#dialog-modal").dialog("open");             });         });          function onsuccess() {             $("#dialog-modal").dialog("close");         } </script>  } 

how bind list object click productid m.products.productid

remove @html.hiddenfor(modelitem => obj.productid) foreach loop , inside ajax.beginform() add

@html.hiddenfor(m => m.products.productid) 

so value can posted. add value of productid data- attribute of button (and change id class - see notes below)

<button type="button" class="modal-opener btn btn-danger" data-id="@obj.productid">reject</button> 

and modify script to

$(".modal-opener").click(function () { // use class name     $('#products_productid').val($(this).attr("data-id")); // set value of hidden input     $("#dialog-modal").dialog("open"); }) 

note have lot of invalid html due duplicate id attributes generated foreach loop. use class names instead. html should be

@foreach (var obj in model.lproducts) {     <tr>         <td>@html.displayfor(modelitem => obj.producttitleen)</td>         <td>             <div class="btn-group btn-group-sm createbutton"> // change                 <button type="button" class="btn btn-default" onclick="location.href='@url.action("create")';return false;">view product</button>             </div>             @if (obj.approvalstatus == "pending")             {                 <div class="btn-group btn-group-sm approvebutton"> // change                     <button type="button" class="btn btn-success" onclick="location.href='@url.action("change_product_state","home", new { productid = obj.productid, value = "approved" },null)';return false;">approve</button>                 </div>                 <div class="btn-group btn-group-sm rejectbutton"> // change                     <button type="button" class="modal-opener btn btn-danger" data-id="@obj.productid">reject</button> // above                 </div>             }             <div class="btn-group btn-group-sm createbutton"> // change                 <button type="button" class="btn btn-primary" onclick="location.href='@url.action("create_productcomments","home", new { productid = obj.productid }, null)';return false;">add comments</button>             </div>         </td>     </tr> }