jsonresult 数据集传递给另一个 actionresult

Question

这是我的 json 结果操作的视图，它由属性 ID、IsChecked 复选框和属性标题列组成。

在此视图中，我可以选中或取消选中这些复选框。

一旦我 select 特定复选框并单击 创建宣传册 我想将这些值传递给另一个控制器方法。

例如：假设我检查了前两个结果

property ID | IsChecked
          1 |   True

          2 |   True

我想在单击后将上述值发送到另一个控制器，我该怎么做。

这是HTML代码

<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>

我有以下 json 脚本来从数据 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

如果您想继续上面的代码，请按照以下步骤操作：删除按钮 onclick properties.It 更好地使用 ajax。

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

现在实现按钮点击属性如下：

$('#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
  }
   });
   });

希望这会有所帮助。

Answer 2

您没有展示您的模型或 FetchProductProperties() 在做什么，但假设它正在创建对象集合（例如）List<ProductPropertyVM>，其中 ProductPropertyVM 包含属性 int ID、string Title 和 bool IsChecked 那么处理这个问题的最简单方法是 return 局部视图而不是 json。例如在控制器中

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

和_ProductProperty.cshtml局部视图

@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

然后在主视图中包含一个占位符来呈现局部

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

并将脚本修改为

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

如果您确实想通过 returning json 来执行此操作 - 即该方法具有 return Json(data, JsonRequestBehavior.AllowGet);，那么您需要生成具有正确名称属性（包括索引器）的控件。每行的 html 需要是（其中 # 是索引器 - 从零开始，? 是来自 json 数据的值）

<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>

生成它的最简单方法是将其作为模板放在隐藏的 div（例如 <div id="template">）和 form 元素之外。然后在 $.each() 函数中，克隆模板并更新值，包括更新索引器。

$.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());
});

参考此 DotNetFiddle 以获取 json 方法的示例

在这两种情况下，这将 post 返回到具有参数 List<ProductPropertyVM> model

的方法

jsonresult 数据集传递给另一个 actionresult

jsonresult dataset pass to another actionresult

javascript

json

ajax

asp.net-mvc

asp.net-mvc-3