将 jQuery JSON 对象保存到 SQL table 而无需在 MVC ASP.NET Core 中创建视图模型 class

Question

我正在努力从 URL 读取 JSON 数据并将其插入 SQL table。我使用了这个示例 URL https://raw.githubusercontent.com/wedeploy-examples/supermarket-web-example/master/products.json 并创建了一个模型 class 文件，如下所示。

查看模型Class

public class ApiJsonViewModel
{
    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; }
}

我有一个带有一个文本框控件的表单，用于显示来自第三方 API URL 的 JSON 关键数据和一个包含来自数据库的值的下拉列表。

The model class used to populate dropdownlist

     public class K360DbCatgViewModel

    {
        public string Name { get; set; }
        public string MetaTitle { get; set; }
        public string MetaKeywords { get; set; }
        public string MetaDescription { get; set; }      
        public string ShortDescription { get; set; }
        public string Description { get; set; }
        public string Specification { get; set; }
        public decimal Price { get; set; }
        public decimal? OldPrice { get; set; }
        public decimal? SpecialPrice { get; set; }
        public DateTimeOffset? SpecialPriceStart { get; set; }
        public DateTimeOffset? SpecialPriceEnd { get; set; }     
        public int StockQuantity { get; set; }
        public string Sku { get; set; }
        public string Gtin { get; set; }
        public string NormalizedName { get; set; }
        public int DisplayOrder { get; set; }     
        public int ReviewsCount { get; set; }
        public double? RatingAverage { get; set; }      
    }

Razor 查看页面

<table class="table" id="tb_properties" style="width:100%">
<tr>
    @if (ViewBag.ApiProp != null)
    {
        @foreach (var itemApiProp in ViewBag.ApiProp)
        {       
        <td>
            <input type="text" value="@itemApiProp.Key" class="form-control" />
        
                <select class="form-control">
                    <option value="">--Select-- </option>
                    @foreach (var itemK360Prop in ViewBag.K360Prop)
                    {
                    <option>@itemK360Prop.Key</option>
                    }
                </select>
        </td>
        
        }
    }
</tr>
<tr>
      <td> 
          <button type="submit" class="btn btn-primary" style="margin- 
          right:50px">Catalog Mapping</button>
     </td>
</tr>
</table>

为视图控件获取值的控制器代码

public IActionResult Index()
{
    string strAPIUrl = "https://raw.githubusercontent.com/wedeploy-examples/supermarket-web-example/master/products.json";
    string jsonUrlProducts;
    using (WebClient client = new WebClient())
    {
        jsonUrlProducts = client.DownloadString(strAPIUrl);
    }

    CreateDynamicAPiProp(jsonUrlProducts);
    CreateK360Prop();
    return View();
}

[HttpGet]
public IActionResult CreateDynamicAPiProp(string ApiUrl)
{
    Dictionary<string, object> dictResultsAdd = new Dictionary<string, object>();
    var objResponseB = JsonConvert.DeserializeObject<List<Dictionary<string, object>>>(ApiUrl);
    foreach (Dictionary<string, object> DictMainKV in objResponseB)
    {
        foreach (KeyValuePair<string, object> item in DictMainKV)
        {
            dictResultsAdd.Add(item.Key, item.Value);
        }

        break;
    }

    ViewBag.ApiProp = dictResultsAdd;
    return RedirectToAction("Index");
}

[HttpGet]
public IActionResult CreateK360Prop()
{
    var ListK360Prop = new List<ApiMapDbViewModel>();
    PropertyInfo[] propertyInfosK360 = typeof(K360DbCatgViewModel).GetProperties();
    foreach (PropertyInfo propertyInfoK360 in propertyInfosK360)
    {
        ListK360Prop.Add(new ApiMapDbViewModel{Value = propertyInfoK360.Name.ToString(), Key = propertyInfoK360.Name.ToString()});
    }

    ViewBag.K360Prop = ListK360Prop;
    return RedirectToAction("Index");
}

我使用了下面的 jQuery 并将 JSON 模型对象传递给 HTTP post 上的控制器插入方法以保存选定的记录。

jQuery代码

@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: "/KEMap/Insert",
                data: {
                    jsonModel: jsobject
                },
                success: function(response) {
                    toastr.info(response.status + "<br>" + "<br>" + response.message);
                    $("#tb_properties select").val("");
                    $("#partial_div").load(window.location.href + " #partial_div");
                },
                error: function(xhr, textStatus, errorThrown) {
                    console.log('in error');
                }
            });

        });
    });
</script>

插入方法

[HttpPost]
public IActionResult Insert(ApiJsonViewModel jsonModel)
{
    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)
    {
        _context.K360mapMasters.AddRange(K360mapListObj);
        _context.SaveChanges();
        return Json(new { Status = "Sucess", Message = "Mapped" });
    }

    return Json(new { Status = "Fail", Message = "Not done" });
}

SQL Table

CREATE TABLE [dbo].[K360Map_Master](
    [Id] [int] IDENTITY(1,1) NOT NULL,
    [ClientCatalog] [nvarchar](450) NOT NULL,
    [K360Catalog] [nvarchar](450) NOT NULL,
    [MapFlag] [bit] NOT NULL,
 CONSTRAINT [PK_K360Map_Master] PRIMARY KEY CLUSTERED 
(
    [Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

一切正常。我能够将选定的文本框和下拉列表值插入 SQL table.

问题是 JSON 我使用的来自第三方的数据 API URL 动态不同。例如，对于下面的 2 个示例 URLs，我需要再次创建 2 个模型 class file.https://gist.githubusercontent.com/dpetersen/1237910/raw/6ceb2161f756d4b4d5c22754d1ed8d869249f186/product_grid.js https://raw.githubusercontent.com/mdn/fetch-examples/master/fetch-json/products.json.

我收到的反馈是使用静态数据进行硬编码。我不允许为每个 URL.

创建一个单独的模型 class

我也不知道如何在不创建模型 class 文件的情况下继续操作。我需要在没有 JSON 模型对象的情况下将选定的控制值传递给控制器插入方法。

我希望有人能在这里帮助我。

Answer 1

这是一个您可以关注的工作演示：

型号：

public class ApiMapDbViewModel
{
    public string Value { get; set; }
    public string Key { get; set; }
}
public class K360mapMaster
{
    public string ClientCatalog { get; set; }
    public string K360catalog { get; set; }
}
public class K360DbCatgViewModel
{
    public string AA { get; set; }
    public string BB { get; set; }
    public string CC { get; set; }
    public string DD { get; set; }
}

查看：

<table class="table" id="tb_properties" style="width:100%">
    <tr>
        @if (ViewBag.ApiProp != null)
        {
            @foreach (var itemApiProp in ViewBag.ApiProp)
            {
                <td>
                    <input type="text" value="@itemApiProp.Key" class="form-control" />

                    <select class="form-control">
                        <option value="">--Select-- </option>
                        @foreach (var itemK360Prop in ViewBag.K360Prop)
                        {
                            <option>@itemK360Prop.Key</option>
                        }
                    </select>
                </td>

            }
        }
    </tr>
    <tr>
        <td>
            <button type="submit" class="btn btn-primary" style="margin-
          right:50px">
                Catalog Mapping
            </button>
        </td>
    </tr>
</table>

JS(添加 data: jsonstr,contentType:"application/json"):

@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: "/KEMap/Insert",
                    //data: jsobject,
                    data: jsonstr,
                    contentType:"application/json",
                    success: function (response) {
                        toastr.info(response.status + "<br>" + "<br>" + response.message);
                        $("#tb_properties select").val("");
                        $("#partial_div").load(window.location.href + " #partial_div");
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        console.log('in error');
                    }
                });

            });
        });
    </script>
}

控制器：

[HttpPost]
public IActionResult Insert([FromBody]JObject jsonModel)
{
    Type type = jsonModel.GetType();
    PropertyInfo[] props = type.GetProperties();
    List<K360mapMaster> K360mapListObj = new List<K360mapMaster>();
    foreach (JProperty prop in jsonModel.Children())
    {
        string key = prop.Name.ToString();
        string value = prop.Value.ToString();
        K360mapListObj.Add(new K360mapMaster() { ClientCatalog = key, K360catalog = value });
    }
       
    //do your stuff...
    return Json(new { Status = "Fail", Message = "Not done" });
}

注1:

因为ApiJsonViewModel中映射的属性首字母大写，所以这里ClientCatalog = c.Name,得到的数据是capital.From我提供的代码，这里的代码string key = prop.Name.ToString(); 得到 json(https://raw.githubusercontent.com/wedeploy-examples/supermarket-web-example/master/products.json) key name 比较小 case.If 你想保留第一个字母大写，你可以更改以下行：

string key = prop.Name.ToString().First().ToString().ToUpper() + prop.Name.ToString().Substring(1);

注2:

如果您的项目是 asp.net 核心 3.x 或 asp.net 5，请确保您的项目有 Newtonsoft 支持,否则无法传数据到后端 successfully.More 详情可参考:

结果：

将 jQuery JSON 对象保存到 SQL table 而无需在 MVC ASP.NET Core 中创建视图模型 class

Save jQuery JSON object into SQL table without creating View model class in MVC ASP.NET Core

c#

jquery

razor

asp.net-core-mvc