點擊Button refresh form return json

2018-07-18

工作上遇到了需要點及儲存之後 refresh form 的問題

這時候問了神人主管

立馬解決了問題

重點就是先再你要post 的method return json的地方多傳一個字串(放入你要執行的js)

之後在前端 ajax 去接收並且執行js

-----------------------action的地方放上

form submit 的jquery returnScript = "$(\"#form_BSP001Execute\").submit();"; 藍色是要submit的form id

return Json(new { success = true, returnScript});

--------------------------view的地方ajax要調整

success: result => {
if (result.success) {
popUp.hide();

if (result.returnScript) {
console.log(result);
eval(result.returnScript);
}//執行那個returnScript 指令

loadPanel.hide()

if (callback) {
callback("資料存檔成功!", result["key"]);
}

}

去執行就完成了

-----------------------------------------------------------------------下面是寫給自己看----------------------大家可以略過-----------------------------------------------------------------------

step 1.

controller var string returnScript = "";

returnScript = "$(\"#form_BSP001Execute\").submit();";

return Json(new { success = true, returnScript});

step 2.

var instance = $("div.dxLoadPanel").dxLoadPanel("instance");
return instance;

途中發現上面這兩行code 會跳出錯誤阻礙我們神人主管用了下面方法排除錯誤

try {
var instance = $("div.dxLoadPanel").dxLoadPanel("instance");
return instance;
}
catch (ex) {
var instance = { show: function () { }, hide: function () { } };
return instance;
}

有問題就塞假的Instance

step3 重頭戲來了

function CreateLoadingPanel(message) {
if ($("div.dxLoadPanel").length == 0) {
$("<div/>", { class: "dxLoadPanel" }).appendTo("body"), { shading: true, shadingColor: "argb(0, 0, 0, 0.5)" };
$("div.dxLoadPanel").dxLoadPanel({
shading: true,
shadingColor: "argb(0, 0, 0, 0.5)",
message: message || "資料讀取中..."
});
}

return $.ajax({
method: "post",
url: url ? url : $(element).attr("action"),
data: $(element).serialize(),
success: function (data) {
$("#" + $(element).data("target")).html(data);
loadPanel.hide();
},
error: function (err) {
loadPanel.hide();
DevExpress.ui.dialog.alert("" + err.responseText + "", "發生錯誤");
}

上面這邊改成下面這樣

return $.ajax({
method: "post",
url: url ? url : $(element).attr("action"),
data: $(element).serialize(),
success: function (data) {
$("#" + $(element).data("target")).html(data);
},
error: function (err) {
DevExpress.ui.dialog.alert("" + err.responseText + "", "發生錯誤");
}
}).done(function () {
loadPanel.hide();
});

$.ajax({
url: url,
data: postData,
method: "post",
success: result => {
if (result.success) {
popUp.hide();
loadPanel.hide()
if (callback) {
callback("資料存檔成功!", result["key"]);
}

改成下面這樣

$.ajax({
url: url,
data: postData,
method: "post",
success: result => {
if (result.success) {
popUp.hide();

if (result.returnScript) {
console.log(result);
eval(result.returnScript);
} //上面這邊去接json 傳的script 並且執行他 eval(result.returnScript)

loadPanel.hide()

if (callback) {
callback("資料存檔成功!", result["key"]);
}

} else {
popUp.content().find("form.ajax").replaceWith(result);
preparePopup(popUp, url, callback);
loadPanel.hide();
DevExpress.ui.notify("請先修正資料", "error", 5000);
}
},

歡迎高手低手來看看指教指教切磋切磋教學香腸

ASP.NET

回首頁