【发布时间】：2021-05-19 11:02:49
【问题描述】：
我不确定在使用 AJAX Jquery 后如何刷新表格数据。
我需要帮助。我有一个剃刀视图，在按钮单击按钮上我正在发送带有文本框和下拉选择值的发布请求，然后在控制器中，传递烤面包机的 Json 响应状态。
下一个控制器返回一个视图并正确显示烤面包机状态。
主要问题是我不知道如何在烤面包机响应状态后用新插入的记录刷新该表。
这是我对控制器的看法：
@using SimplCommerce.WebHost.Models @model dynamic
<body>
<form method="post" id="map_Form">
<table id="tbl_btn">
<tr>
<td align="center">
<button type="submit">Catalog Mapping</button>
</td>
</tr>
</table>
<table id="tb_properties" style="width:100%">
<tr>
@foreach (ApiMapDbViewModel itemApiProp in Model.dynApiPropModel)
{
<td>
<input type="text" value="@itemApiProp.Key" readonly="readonly" />
<hr />
<select>
<option value="">-Select-</option>
@foreach (ApiMapDbViewModel itemK360Prop in Model.dynK360PropModel)
{
<option>@itemK360Prop.Key</option>
}
</select>
</td>
}
</tr>
</table>
<div id="partial_div">
@Html.Partial("KPartialIndex")
</div>
</form>
</body>
</html>
@section scripts{
<script>
$(function () {
$("button[type='submit']").click(function () {
event.preventDefault();
var properties = [];
$("#tb_properties tr:first").find("td").each(function (index, item) {
var propertyname = $(item).find("input[type='text']").val();
var selctedvalue = $(item).find("select").val();
properties.push('"' + propertyname + '":"' + selctedvalue + '"');
});
var jsonstr = '{' + properties.join(",") + '}';
var jsobject = JSON.parse(jsonstr);
$.ajax({
type: "Post",
url: "/KMap/Insert",
data: { jsonModel: jsobject },
success: function (response) {
toastr.error(response.status + "----->" + response.message);
//info//warning//error//success
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-center",
"preventDuplicates": false,
"onclick": null,
"showDuration": "1000",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
$("#map_Form select").val("");
$("#partial_div").load("/KMap/LoadPartialViewOnPost"); // not working
},
error: function (xhr, textStatus, errorThrown) {
console.log('in error');
}
});
});
});
</script>
}
这是我的部分观点：
@using SimplCommerce.WebHost.Models @model dynamic
<table>
@if (Model.dynMappedDataModel != null)
{
@foreach (K360mapMaster itemMappedData in Model.dynMappedDataModel)
{
<tr>
<td>@itemMappedData.ClientCatalog</td>
<td>@itemMappedData.K360catalog</td>
</tr>
}
}
</table>
这是我的控制器：
public IActionResult Index()
{
dynamic dynModel = new ExpandoObject();
dynModel.dynApiPropModel = GetListApiProp();
dynModel.dynMappedDataModel = ListMappedData();
dynModel.dynK360PropModel = GetListK360Prop();
return View(dynModel);
}
[HttpPost]
public IActionResult LoadPartialViewOnPost()
{
dynamic mymodel = new ExpandoObject();
mymodel.dynMappedDataModel = ListMappedData();
return PartialView("KPartialIndex", mymodel);
}
public List<K360mapMaster> ListMappedData()
{
List<K360mapMaster> items = new List<K360mapMaster>();
var query = from K360mapMaster in _context.K360mapMasters
select K360mapMaster;
var mappings = query.ToList();
foreach (var mappingData in mappings)
{
items.Add(new K360mapMaster()
{
ClientCatalog = mappingData.ClientCatalog,
K360catalog = mappingData.K360catalog
});
}
return items;
}
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Insert(ApiJsonViewModel jsonModel)
{
if (!ModelState.IsValid)
{
var errors = ModelState.SelectMany(x => x.Value.Errors, (y, z) => z.Exception.Message);
return BadRequest(errors);
}
Type type = jsonModel.GetType();
PropertyInfo[] props = type.GetProperties();
List<K360mapMaster> K360mapListObj = new List<K360mapMaster>();
K360mapListObj = props.Where(c => !string.IsNullOrEmpty(c.GetValue(jsonModel, null)?.ToString()))
.Select(c => new K360mapMaster() { ClientCatalog = c.Name, K360catalog = c.GetValue(jsonModel, null)?.ToString() })
.ToList();
if (K360mapListObj.Count > 0)
{
try
{
var ListCatalogs = K360mapListObj.Select(l => l.ClientCatalog).ToList();
foreach (var item in ListCatalogs)
{
var DbCatalogs = (from p in _context.K360mapMasters
where p.ClientCatalog == item
select p).FirstOrDefault();
if (DbCatalogs != null)
{
return Json(new { Status = "This is an information notification provided by K360 eCommerce. ", Message = "Selected catalog " + item + " already mapped." });
}
}
_context.K360mapMasters.AddRange(K360mapListObj);
_context.SaveChanges();
return Json(new { Status = "This is a success notification from K360 eCommerce. ", Message = "Product catalog's mapped sucessfully." });
}
catch
{
return Json(new { Status = "This is an error notification provided by K360 eCommerce. ", Message = "Mapping failed" });
}
}
else
{
return Json(new { Status = "This is a warning notification provided by K360 eCommerce. ", Message = "No product catalog selected." });
}
}
我想在烤面包机响应状态后刷新新的插入记录。请帮忙谢谢
问题现已解决。
为局部视图中的表格提供了 ID。
并在 Jquery Sucess 函数中添加了一段代码
$("#par_tbl").load(window.location.href + " #par_tbl");
【问题讨论】：
标签： c# jquery asp.net-core razor asp.net-core-mvc