Jquery/Ajax 更新表[ASP.NET Core MVC]

Question

我不确定在使用 AJAX Jquery 后如何刷新表数据。

我需要帮助。 我有一个 razor 视图，在按钮单击按钮上我发送带有文本框和下拉选择值的发布请求，然后在 controller 中，将 Json 响应传递给状态。

接下来 controller 返回视图并正确显示烤面包机状态。

主要问题是我不知道如何在 toastr 响应状态后用新插入的记录刷新该表。

这是我对 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 脚本{

<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 != null)

 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." });
        }

    }

这是我的 controller：

 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." }); } }

我想在 toastr 响应状态后刷新新的插入记录。请帮助谢谢

问题现已修复。

为部分视图中的表提供了 ID。

并在 Jquery Sucess function 中添加了以下代码

 $("#par_tbl").load(window.location.href + " #par_tbl");

Answer 1

您可以使用 JQuery 循环遍历<td>元素，并使用 JQuery 选择器获取属性名称和选定值。 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; }
}

Controller：

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 表中的第一列并将其值存储为第二列的值，您可以参考以下代码：

    [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 表中的结果如下：

[注意] 在上面的示例中，我的 DBContext 如下所示，它将向 K360Master 表中插入数据，请检查您的代码并确保您使用了正确的实体和表。

public class ApplicationDbContext : IdentityDbContext
{
    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
        : base(options)
    {
    }

    public DbSet<K360Master> K360Master { get; set; }
}

更新

只有当我们 select 所有 8 个下拉列表时，才会插入它。 无法 select 仅 2 或 3 个下拉列表，它显示无法将值 NULL 插入“K360Catalog”列。 它不是 null 列。 请指导我。 任务需要在今天之前完成

在 Insert 方法中，您可以在将它们保存到数据库之前检查值是否为 null。 代码如下：

    [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");
    }

截图如下：

更新

根据您的描述，如果您不想使用 for 每个语句循环遍历 8 个字段，您可以尝试使用 LINQ where 子句过滤数据。 而且，如果您想从 controller 操作方法返回多个值到 Ajax function，您可以参考 ZEED163385B84088856C 结果。 请检查以下示例：

    [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');
            }
        });

结果是这样的：

Answer 2

问题现已修复。

为部分视图中的表提供了 ID。

并在 Jquery Sucess function 中添加了以下代码

$("#par_tbl").load(window.location.href + "#par_tbl");