kendo-ui - Kendo UI Grid 在弹出窗口中带有表单
问题描述
我想为 ajax 调用实现单独的表单。我想要一个命令,它会打开一个带有一个字段的新弹出窗口,用户填写此字段,然后单击“发送”,然后我对控制器进行 ajax 调用。我的代码:
$(document).ready(function () {
var grid = $("#memberList-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action("MemberSearchList", "RandomPoolSelection"))",
type: "POST",
dataType: "json",
data: function () {
var data = {
SearchMember: $('#@Html.IdFor(model => model.SearchMember)').val(),
SelectionId: $('#SelectionId').val()
};
addAntiForgeryToken(data);
return data;
}
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
error: function (e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: @(Model.PageSize),
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [@(Model.AvailablePageSizes)],
@await Html.PartialAsync("_GridPagerMessages")
},
scrollable: false,
columns: [
{
field: "PrimaryID",
title: "@T("PoolMemberList.Fields.PrimaryID")",
width: 150
},
{
field: "FirstName",
title: "@T("PoolMemberList.Fields.FirstName")",
width: 150
},
{
command:
{
text: "Exclude",
click: showExclude
},
title: " ",
width: 100
}
]
});
wndExclude = $("#exclude")
.kendoWindow({
title: "Excuse Reason",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
excludeTemplate = kendo.template($("#excludeTemplate").html());
});
function showExclude(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wndExclude.content(excludeTemplate(dataItem));
wndExclude.center().open();
}
和模板:
<script type="text/x-kendo-template" id="excludeTemplate">
<div id="exclude-container">
<input type="text" class="k-input k-textbox" id="note">
<br />
</div>
</script>
如何实现将此数据(带 ID)发送到控制器?
解决方案
做你想做的事的一个简单方法是使用partial view
.
这是你的command grid
{
command:
{
text: "Exclude",
click: showExclude
},
title: " ",
width: 100
}
在这里你的功能:
function showExclude(e) {
$(document.body).append('<div id="excludeWindow" class="k-rtl"></div>');
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
$('#excludeWindow').kendoWindow({
width: "80%",
title: 'excludeForm',
modal: true,
resizable: false,
content: "/YourController/GetPartial?id=" + dataItem.Id,
actions: [
"Close"
],
refresh: function () {
$("#excludeWindow").data('kendoWindow').center();
},
close: function() {
setTimeout(function () {
$('#excludeWindow').kendoWindow('destroy');
}, 200);
}
}).data('kendoWindow');
}
单击按钮后,加载窗口(弹出窗口)并调用加载 a 的操作来
partial view
填充content
.
您可以将任何您想要的东西传递给您的(例如,这里我只是发送)window
partial view
Id
public ActionResult GetPartial(Guid id)
{
var viewModel= new ViewModelExclude
{
Id = id,
};
return PartialView("_exclude", viewModel);
}
是partial view
这样的:
@model ViewModelExclude
@using (Html.BeginForm("", "Your action", FormMethod.Post, new { id = "SendForm"}))
{
<input class="k-rtl" name="@nameof(Model.Id)" value="@Model.Id">
<button type="submit" class="btn btn-primary">Send</button>
}
然后点击send
按钮后调用你的ajax:
$("#SendForm").submit(function (e) {
e.preventDefault();
var form = $(this);
var formData = new FormData(this);
$.ajax({
type: "POST",
url: '@Url.Action("send", "yourController"),
data: formData,
contentType: false,
processData: false,
success: function (data) {
},
error: function (data) {
}
});
});
你的send
动作是这样的:
[HttpPost]
public ActionResult Send(ViewModelExclude view)
{
....
return Json();
}
推荐阅读
- ios - 当我在代码中使用 ObjectMapper 时,出现“变异运算符的左侧具有不可变类型”的问题
- ios - 坠机原因是什么?
- android - 如何翻译活动中包含的布局?
- c# - angular4中的d3图表实现
- spring - spring security JWT 实现是否处理 alg:none 攻击?
- python-3.x - 尝试从网站抓取信息时如何修复“预期的字符串或类似字节的对象”?
- c# - 如何在 C# 应用程序中强制使用 ODBC 版本 2.x
- c# - 无法在存储库中注入 DbContext
- java - Spring Boot 测试如何使用不同的 application.properties 进行集成测试
- c# - 弹性搜索:如何提取与查询短语/字符串匹配的所有“字段名称”