问题描述
我不确定使用AJAX Jquery后如何刷新表数据.
I'm not sure how to refresh table data after I use AJAX Jquery.
我需要帮助.我有一个剃刀视图,单击按钮上的按钮,我正在发送带有文本框和下拉所选值的帖子请求,然后在控制器中,传递了Toastr的Json响应状态.
i need an help. i've a razor view, on button click button I am sending post request with textbox and dropdown selected values, then in controller, passed Json response status for toastr.
下一控制器返回一个视图并正确显示烤面包机状态.
Next controller returns a view and display toaster status correctly.
主要问题是在烤面包机响应状态后,我不知道如何用新插入的记录刷新该表.
The main problem is that I dont know how to refresh that table with newly inserted records after toastr response status.
这是我对控制器的看法:
This is my view of the Controller:
@using SimplCommerce.WebHost.Models @model dynamic
<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>
@section脚本{
@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
@if(Model.dynMappedDataModel!=空)
@if (Model.dynMappedDataModel != null)
{
@foreach (K360mapMaster itemMappedData in Model.dynMappedDataModel)
{
<tr>
<td>@itemMappedData.ClientCatalog</td>
<td>@itemMappedData.K360catalog</td>
</tr>
}
}
这是我的控制者:
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." });
}
}
我想在烤面包机响应状态后刷新新的插入记录.请帮助
I want to refresh the new insert records after toastr response status .Please HelpThanks
问题现在已解决.
在部分视图中为表提供的ID.
Provided id for the table in partial view.
并在Jquery Sucess函数中添加了以下代码
and in Jquery Sucess function addded below piece of code
$("#par_tbl").load(window.location.href + " #par_tbl");
推荐答案
您可以使用JQuery遍历< td>
元素,并使用JQuery Selector获取属性名称和所选值.然后,根据该值生成一个JS对象,并使用JQuery Ajax调用控制器的action方法并将该对象存储到数据库中.
You could use JQuery to loop through the <td>
elements, and use JQuery Selector gets the property name and selected value. Then, according to the value to generate a JS object, and use JQuery Ajax to call the controller action method and store the object into the database.
请参考以下示例代码:
型号:
public class SMJsonModel
{
public string title { get; set; }
public string type { get; set; }
public string description { get; set; }
public string fileName { get; set; }
public string height { get; set; }
public string width { get; set; }
public string price { get; set; }
public string rating { get; set; }
}
public class PropertyInfoK360
{
public string Value { get; set; }
public string Key { get; set; }
}
控制器:
public class SupermarketController : Controller
{
public IActionResult Index()
{
//initial data:
List<SMJsonModel> JsonResultList = new List<SMJsonModel>()
{
new SMJsonModel(){
title="Brown eggs",
type="dairy",
description="Raw organic brown eggs in a basket",
fileName="0.jpg",
height = "600",
width="400",
price="28.1",
rating="4"
}
};
ViewData["K360DbPropVD"] = new List<PropertyInfoK360>()
{
new PropertyInfoK360(){ Value="AAA", Key="AAA"},
new PropertyInfoK360(){ Value="BBB", Key="BBB"},
new PropertyInfoK360(){ Value="CCC", Key="CCC"},
new PropertyInfoK360(){ Value="DDD", Key="DDD"},
new PropertyInfoK360(){ Value="EEE", Key="EEE"},
new PropertyInfoK360(){ Value="FFF", Key="FFF"},
new PropertyInfoK360(){ Value="GGG", Key="GGG"},
};
return View(JsonResultList);
}
// this method is used to insert data into database.
[HttpPost]
public IActionResult Insert(SMJsonModel jsonModel)
{
//insert object into database.
return Ok("success");
}
}
索引视图页面:
@model IEnumerable<netcore5.Models.SMJsonModel>
<div class="container">
<table class="table table-striped table-bordered" id="tb_properties" style="width:100%">
<thead>
</thead>
<tbody>
<tr>
@foreach (var property in Model.GetType().GetGenericArguments()[0].GetProperties())
{
<td>
<input type="text" value="@property.Name" class="form-control" />
@{var K360list = new SelectList((System.Collections.IEnumerable)ViewData["K360DbPropVD"], "Value", "Key");}
<select asp-items="K360list" class="form-control"></select>
</td>
}
</tr>
</tbody>
</table>
</div>
<div class="container">
<table class="table table-striped table-bordered" style="width:100%">
<tr>
<td align="center">
<button type="submit" class="btn btn-primary">Catalog Mapping</button>
</td>
</tr>
</table>
</div>
@section scripts{
<script>
$(function () {
$("button[type='submit']").click(function () {
event.preventDefault();
var properties = []; //define an array to store the property name and the selected value.
$("#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 + '"');
});
//According the properties to genereate the json string.
var jsonstr = '{' + properties.join(",") + '}';
//convert the json string to js object.
var jsobject = JSON.parse(jsonstr);
//call the Inset method and store data into the database.
$.ajax({
type: "Post",
url: "/Supermarket/Insert",
data: { jsonModel: jsobject },
success: function (response) {
console.log(response);
},
error: function (xhr, textStatus, errorThrown) {
console.log('in error');
}
});
});
});
</script>
}
以下截图:
更新
如评论中所述,要将JsModel的属性名称存储为K360ECommerceS表中的第一列,并将其值存储为第二列的值,您可以引用以下代码:
As mentioned in the comment, to store the JsModel's property name as the first column and its value as the second column's value in the K360ECommerceS table, you could refer the following code:
[HttpPost]
public IActionResult Insert(SMJsonModel jsonModel)
{
//insert object into database.
//required using System.Reflection;
//use GetType() and GetProperties() method to get object's property name and its value.
Type type = jsonModel.GetType();
PropertyInfo[] props = type.GetProperties();
List<K360Master> k360Masters = new List<K360Master>();
foreach(var item in props)
{
K360Master master = new K360Master()
{
ClientCatalog = item.Name,
K360catalog = item.GetValue(jsonModel, null)?.ToString()
};
k360Masters.Add(master);
}
_context.K360Master.AddRange(k360Masters);
_context.SaveChanges();
return Ok("success");
}
此后,K360Master表中的结果如下:
After that, the result in the K360Master table as below:
[注意]在上面的示例中,我的DBContext如下所示,它将数据插入K360Master表中,请检查您的代码并确保您使用的是正确的Entity和Tables.
[Note] In the above sample, my DBContext as below, it will insert data into the K360Master table, please check your code and make sure you are using the correct Entity and Tables.
public class ApplicationDbContext : IdentityDbContext
{
public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
: base(options)
{
}
public DbSet<K360Master> K360Master { get; set; }
}
更新
在Insert方法中,可以在将值保存到数据库之前检查该值是否为null.代码如下:
In the Insert method, you could check whether the value is null or not before save them to database. Code as below:
[HttpPost]
public IActionResult Insert(SMJsonModel jsonModel)
{
//insert object into database.
Type type = jsonModel.GetType();
PropertyInfo[] props = type.GetProperties();
List<K360Master> k360Masters = new List<K360Master>();
foreach(var item in props)
{
//check if the value is null or not.
if(!string.IsNullOrEmpty(item.GetValue(jsonModel, null)?.ToString()))
{
K360Master master = new K360Master()
{
ClientCatalog = item.Name,
K360catalog = item.GetValue(jsonModel, null)?.ToString()
};
// if the value is not null, add it to the list
k360Masters.Add(master);
}
}
//insert the list items into database.
_context.K360Master.AddRange(k360Masters);
_context.SaveChanges();
return Ok("success");
}
以下截图:
更新
根据您的描述,如果您不想使用每个语句来遍历8个字段,则可以尝试使用LINQ where子句来过滤数据.而且,如果要将控制器操作方法的多个值返回给Ajax函数,则可以引用Json结果.请检查以下示例:
From your description, if you don't want to use for each statement to loop through the 8 fields, you could try to use LINQ where clause to filter the data. And, if you want to return multiple value from controller action method to the Ajax function, you could refer a Json result. please check the following sample:
[HttpPost]
public IActionResult Insert(SMJsonModel jsonModel)
{
//insert object into database.
Type type = jsonModel.GetType();
PropertyInfo[] props = type.GetProperties();
List<K360Master> k360Masters = new List<K360Master>();
//using where clause to filter data.
k360Masters = props.Where(c => !string.IsNullOrEmpty(c.GetValue(jsonModel, null)?.ToString()))
.Select(c=> new K360Master() { ClientCatalog= c.Name, K360catalog = c.GetValue(jsonModel, null)?.ToString() })
.ToList();
if(k360Masters.Count > 0)
{
try
{
//foreach (var item in props)
//{
// //check if the value is null or not. if the value is not null, add it to the list
// if (!string.IsNullOrEmpty(item.GetValue(jsonModel, null)?.ToString()))
// {
// K360Master master = new K360Master()
// {
// ClientCatalog = item.Name,
// K360catalog = item.GetValue(jsonModel, null)?.ToString()
// };
// k360Masters.Add(master);
// }
//}
_context.K360Master.AddRange(k360Masters);
_context.SaveChanges();
return Json(new { Status = "Success", Message = "Insert Success!" });
}
catch (Exception)
{
return Json(new { Status = "Error", Message = "Fail to insert data into database" });
}
}
else
{
return Json(new { Status = "Warning", Message = "No selected item" });
}
}
Ajax代码:
//According the properties to genereate the json string.
var jsonstr = '{' + properties.join(",") + '}';
//convert the json string to js object.
var jsobject = JSON.parse(jsonstr);
$.ajax({
type: "Post",
url: "/Supermarket/Insert",
data: { jsonModel: jsobject },
success: function (response) {
alert(response.status + "--" + response.message);
//then, based on the status to choose
},
error: function (xhr, textStatus, errorThrown) {
console.log('in error');
}
});
结果如下:
这篇关于jQuery/Ajax更新表[ASP.NET Core MVC]的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!