我目前正在使用SweetAlert填充对话框，允许用户在表中选择多行，然后使用通过MVC Core映射到控制器的ajax请求保存到数据库。
但是，在弹出之前，我无法在视图中填充DataTable。让这个工作的最佳方法是什么？
这是我的SweetAlert调用，它使用TableView触发弹出窗口：
$('#ApplicationTable').on('change', '#enableApp', function (event) {
if ($(this).is(':checked')) {
$.ajax({
url: '@Url.Action("EnableApplication")',
data: {
'AppId': this.value, 'UserId': @Model.Id },
type: "post",
cache: false,
success: function (status) {
swal({
title: 'Permissions',
content: {
element: 'div',
attributes: {
id: 'searchTableWrapPermissions'
}
}
});
},
error: function (xhr, ajaxOptions, thrownError) {
swal("Error enabling app, please contact support.");
}
});
我的想法是创建一个带有div的弹出框，然后我可以将表附加到放置在内容中的id。
OnDeviceReady我也称之为：
$('<table id="PermissionsTable" class="searchTable table table-striped stripe row-border dataTable">< thead ><tr><th>Name</th><th>Description</th><th>Edit</th></tr></thead ></table >').appendTo('#searchTableWrapPermissions');
在我看来它会在逻辑上起作用，但由于某种原因，我无法通过sweetalert视图弹出它。
答案 0 :(得分：1)
当您使用Ajax时，您可以使用JsonResult作为来自控制器的返回类型（不是partialView），这样您就不依赖于razorengine，而是使用JQuery或纯JavaScript将数据附加到该div从控制器返回json。这也为您提供了更多的控制权。
答案 1 :(得分：0)
MVC POP UP： 1.第1步：创建共享页面
_help1.cshtml
@model string
<script>
$("#helpDIV").ready(function () {
$('#helpmnu').dataTable({ "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]] });
});
$("#wrapper").draggable({ cursor: "move" });
document.onkeyup = CloseHelp;
function CloseHelp()
{
var KeyID = (window.event) ? event.keyCode : e.keyCode;
if (KeyID == 27)
{
$('#helpDIV').html("");
}
else if(KeyID==undefined)
{
$('#helpDIV').html("");
}
else
{
}
}
function HelpRowClick(id) {
var field = $('#ReferanceFieldID').val().split('/');
var columnnm = $('#ReferanceColumn').val().split('/');
var row = document.getElementById(id);
for (var i = 0; i <= field.length - 1; i++) {
var col = document.getElementById("helpmnu").rows[row.rowIndex].cells[columnnm[i]].innerHTML;
$("#" + field[i]).val(col);
if (i == 0) {
$("#" + field[i]).focus();
}
}
$('#helpDIV').html("");
}
</script>
<script>
function imgpreview(id)
{
var w = 500;
var h = 200;
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
if (screen.width <= 768)
{
w = 10;
h = 10;
}
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var ctrlimg = document.getElementById(id).src;
txtCode = "<HTML><HEAD>"
+ "</HEAD><BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINHEIGHT=0 MARGINWIDTH=0 style='background-color:rgba(0, 0, 0, 0.56)'><CENTER>"
+ "<IMG src='" + ctrlimg + "' BORDER=0 NAME=FullImage "
+ "onload='window.resizeTo(document.FullImage.width,document.FullImage.height)'>"
+ "</CENTER>"
+ "</BODY></HTML>";
mywindow = window.open('', 'image', 'toolbar=0,location=0,menuBar=0,scrollbars=0,resizable=0, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
mywindow.document.open();
mywindow.document.write(txtCode);
}
</script>
<style type="text/css">
#textarea {
border: none;
overflow: auto;
height: 400px;
width: 100%;
background-color: cornsilk;
}
#wrapper {
background-color: white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
float: left;
border: 1px #D3D3D3 solid;
box-shadow: 0 0 5px rgba(255, 231, 43, 0.00);
overflow: hidden;
width: 350px;
height: 420px;
}
#helpDIV {
position: fixed;
top: 50%;
left: 50%;
width: 30em;
height: 18em;
margin-top: -15em; /*set to a negative number 1/2 of your height*/
margin-left: -13em; /*set to a negative number 1/2 of your width*/
}
</style>
<div id="wrapper">
<input type="hidden" id="ReferanceFieldID" value="" />
<input type="hidden" id="ReferanceColumn" value="" />
<div style="height:30px;width:100%;background-color:#27658a;vertical-align:middle; font-weight:bold">
<table id="tableHeader" width="100%" height="100%" cellpadding="3px" cellspacing="3px">
<tr>
@*Take a refresh button*@
<td align="center" style="width:80%;color:#eee;text-align:center"> </td>
<td align="center" style="width:10%;color: darkorange;">
<span title="Refresh" class="glyphicon glyphicon-refresh" style="color:red;vertical-align:middle;cursor:pointer;"></span>
</td>
<td align="center" style="width:10%">
<span title="Close" onclick="CloseHelp();" class="glyphicon glyphicon-off" style="color:red;vertical-align:middle;cursor:pointer;"></span>
</td>
</tr>
</table>
</div>
<div id="textarea" style="padding:5px; font-size:11px">
@(new HtmlString(Model))
</div>
</div>
2＆gt;步骤2：下载datatable.js enter link description here
并与主cshtml页面链接 3＆gt;步骤3：视图页面（cshtml页面）
cshtml页面： 放置代码：
<head>
function GetHelp(urlstring, id, colnm, caption) {
$.ajax({
type: 'get',
url: path of controller page function,
success: function (result) {
$('#ReferanceFieldID').val(id);
$('#ReferanceColumn').val(colnm);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#WaitingMode").hide();
msgError("Error: " + textStatus + "," + errorThrown);
}
});
}
</head>
<body>
<div class="col-md-4">
<div class="editor-field">
@Html.EditorFor(model => model.M_WEEK.COMPCD, new { htmlAttributes = new { @class = "form-control textbox_image", id = "COMPCD", @placeholder = "COMPCD", maxlength = 4 } })
<img src="~/Image/search.png" width="20px" height="20px" class="Help_image_button" title="Help" onclick="GetHelp('@Url.Action("GetCompanyDetails", PageControllerName)','COMPCD/COMPNM','1/0','Company Code')" />
</div>
</div>
<div class="col-md-11">
<div class="editor-field">
@Html.EditorFor(model => model.M_COMP.COMPNM, new { htmlAttributes = new { @class = "form-control", id = "COMPNM", @TabIndex = -1, @placeholder = "COMPNM", maxlength = 60, @readonly = "readonly" } })
</div>
</div>
<div class="container">
<div id="helpDIV">
</div>
</div>
</body>
4＆gt;步骤4：
控制器页面
public string PRODGRPCD_help(ImprovarDB DB)
{
var query = (from c in DB.M_PRODGRP
join i in DB.M_CNTRL_HDR on c.M_AUTONO equals i.M_AUTONO
where i.INACTIVE_TAG == "N"
select new
{
code = c.PRODGRPCD,
name = c.PRODGRPNM,
}).ToList();
System.Text.StringBuilder SB = new System.Text.StringBuilder();
SB.Append("<table id='helpmnu' class='table-hover' cellpadding='3px' cellspacing='3px' width='100%'><thead style='background-color:#2965aa; color:white'><tr>");
SB.Append("<th>Product Group Name</th><th>Product Group Code</th></tr></thead>");
SB.Append("<tbody>");
for (int i = 0; i <= query.Count - 1; i++)
{
SB.Append("<tr id='Hrow_" + i.ToString() + "' onclick='HelpRowClick(this.id)'><td>" + query[i].name + "</td><td>" + query[i].code + "</td></tr>");
}
SB.Append("</tbody></table>");
return SB.ToString();
}
return PartialView("_Help1", PRODGRPCD_help(DB));
这里我使用LINQ查询你可以使用 普通查询
query = (from c in DB.M_PRODGRP
join i in DB.M_CNTRL_HDR on c.M_AUTONO equals i.M_AUTONO
where i.INACTIVE_TAG == "N"
select new
{
code = c.PRODGRPCD,
name = c.PRODGRPNM,
}).ToList();
答案 2 :(得分：0)
为数据表和ajax调用swalplugin的成功函数做一件事情。
var htmlcontent ="<table></table>"
swal({
title: "what ever",
text: htmlcontent,
html: true
});