javascript - jsonresult 数据集传递给另一个 actionresult

Question

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

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

选中特定的复选框并单击创建宣传册后，我想将这些值传递给另一个 Controller 方法。

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

property ID | IsChecked
          1 |   True

          2 |   True

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

这是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 脚本来从数据表中检索数据

<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

你还没有展示你的模型或者是什么FetchProductProperties()正在做，但假设它正在创建一个对象集合(比如)List<ProductPropertyVM>其中 ProductPropertyVM包含属性 int ID , string Title和 bool IsChecked那么处理这个问题的最简单方法是返回一个局部 View 而不是 json。例如在 Controller 中

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

和 _ProductProperty.cshtml局部 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

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

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

并将脚本修改为

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

如果您确实想通过返回 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 方法的例子

在这两种情况下，这将回传到一个具有参数 List<ProductPropertyVM> model 的方法