jsonresult 数据集传递给另一个 actionresult
jsonresult dataset pass to another actionresult
这是我的 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>
如果您想继续上面的代码,请按照以下步骤操作:
删除 按钮 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
}
});
});
希望这会有所帮助。
您没有展示您的模型或 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
的方法
这是我的 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>
如果您想继续上面的代码,请按照以下步骤操作: 删除 按钮 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
}
});
});
希望这会有所帮助。
您没有展示您的模型或 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