jsonresult dataset pass to another actionresult

Question

This is the view of my json result action,its consisting property ID , IsChecked checkboxes and Propery title columns .

at this view I can checked or uncheck of these check boxes .

once I select specific check boxes and click Create Brochure I want to pass those values to another controller method.

Ex: lets say I checked first two results

property ID | IsChecked
          1 |   True

          2 |   True

I want to send above values to another controller once I click, how can I do that.

this is HTML code

<table class="table">
    <thead>
        <tr>
            <th>Property ID</th>
            <th>IsChecked</th>
            <th>Property Tile</th>
        </tr>
    </thead>
    <tbody id="table"></tbody>
</table>

<table id="template" class="table" style="display: none;">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>


</table>
<div style="width:50%; float:left;text-align:left"><button id="resetborchure" type="button" class="btn btn-warning submit">Reset Brochure</button> </div>
<div style="width:50%; float:left;text-align:right"><button id="createborchure" type="button" class="btn btn-danger submit" onclick="location.href='@Url.Action("Create_Brochure", "Brochure")'">Create Brochure</button> </div>

I have following json script to retrieve data from a data table

<script type="text/javascript">

        var url = '@Url.Action("FetchProductProperties")';
        var editUrl = '@Url.Action("Edit")';

        var template = $('#template');
        var table = $('#table');
        $('#search').click(function () {
            table.empty();
            $.getJSON(url, { function (populated_data) {
                $.each(populated_data, function (index, item) {
                    var clone = template.clone();
                    var cells = clone.find('td');
                    cells.eq(0).text(item.ID);

                    if (item.CheckOrNot === true)
                    {
                        cells.eq(1).html("<input type='checkbox' value='1' checked='" + item.CheckOrNot + "'>");
                    }
                    else
                    {
                        cells.eq(1).html("<input type='checkbox' value='0'>");
                    }

                    cells.eq(2).text(item.Name);
                    table.append(clone.find('tr'));
                });
            });
        });

        $('#resetborchure').click(function () {
            table.empty();
        });

</script>

Answer 1

You have not shown your models or what the FetchProductProperties() is doing, but assuming it is creating a collection of objects (say) List<ProductPropertyVM> where ProductPropertyVM contain properties int ID, string Title and bool IsChecked then the easiet way to handle this would be to return a partial view rather than json. For example in the controller

public ActionResult FetchProductProperties(...)
{
  List<ProductPropertyVM> data = ..... // your query
  return PartialView("_ProductProperty", data);
}

and the _ProductProperty.cshtml partial view

@model List<ProductPropertyVM>
<table>
  ... // thead elements
  <tbody>
    @for(int i = 0; i < Model.Count; i++)
    {
      <tr>
        <td>
          @Html.DisplayFor(m => m[i].ID)
          @Html.HiddenFor(m => m[i].ID)
        </td>
        <td>@Html.CheckBoxFor(m => m[i].IsChecked)</td>
        <td>@Html.DisplayFor(m => m[i].Title)</td>
      </tr>
    }
  </tbody>
</table>
.... // buttons

Then in the main view include a placeholder to render the partial

<div id="productproperties"></div>

and modify the script to

$('#search').click(function () {
  $('#productproperties').load(url, { .... }); // add data to be passed to the method as required
});

If you do want to do this by returning json - i.e. the method has return Json(data, JsonRequestBehavior.AllowGet); then you need to generate the controls with the correct name attributes including indexers. The html for each row would need to be (where # is the indexer - starting a zero and ? is the value from the json data)

<tr>
  <td>
    <span> // value of ID property </span>
    <input type="hidden" name="[#].ID value="?" />
  </td>
  <td>
    <input type="checkbox" name="[#].IsChecked" value="true" />
    <input type="hidden" name="[#].IsChecked" value="false" />
  </td>
  <td>
    <span> value of Title property </span>
  </td>
</tr>

The easiest way to generate this is to have this as a template inside a hidden div (say <div id="template">) and outside the form element. Then in the $.each() function, clone the template, and update the values, including updating the indexer.

$.each(data, function (index, item) {
  var clone = $('#template').clone();
  // update indexers
  clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
  // update input values as display text
  var cells = clone.find('td');
  cells.eq(0).children('span').text(item.ID);
  cells.eq(0).children('input').val(item.ID);
  cells.eq(1).children('input').first().prop('checked', item.IsChecked)
  cells.eq(2).children('span').text(item.Title);
  table.append(clone.html());
});

Refer this DotNetFiddle for an example of the json approach

In both cases this will post back to a method which has a parameter List<ProductPropertyVM> model

Answer 2

If you wanna continue with above code then follow this: Remove button onclick properties.It's better use ajax.

<div style="width:50%; float:left;text-align:right"><button id="createborchure" type="button" class="btn btn-danger submit">Create Brochure</button> </div>

Now Implement the button click properties like this:

$('#createborchure').click(function () {
        var data=[];
 $('#table tr').each(function(){
           // creating json data based on checked row.
           $this=$(this)
           var value=$this.find('input:checked').val();
           if(value=="1"){
            var row={"id":$(this).find("td").eq(0).html(),
                      "Ischecked":"true",
                       "title":$(this).find("td").eq(2).html()}
            data.push(row);
           }        
 });
  // Now use Ajax to send data to controller
  $.ajax({
  type: "POST",
  contentType: "application/json; charset=utf-8",
  url: "/Brochure/Create_Brochure",
  data: data,
  success: function (result) {
       //do somthing here
  }
   });
   });

Hope this will help.