devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

WinForm（十三）WebView2

作者：凡人多烦事01 | 2024-06-10 21:27:18

赞

踩

winform webview2

WebView是WinForm框架中一个控件，用来对网页信息交互，有时Web自己开发的，有时Web是三方的。

下面通过一个例子来看看WebView2的使用。

首先看Web的逻辑，是一个商品添加页面，用AlpineJS和BootStrap来开发的，业务上点击添加按钮，弹出modal框窗，然后保存结果，完成添加，代码如下：

View

  1. @{
  2.     ViewData["Title"] = "商品管理";
  3. }
  4. @section Css{
  5.     <style>
  6.         .form-switch {
  7.             display: flex !important;
  8.             flex-direction: row-reverse !important;
  9.             justify-content: space-between !important;
  10.         }
  11. </style>
  12. }
  13. <div x-data="querydata()" id="ttt">
  14.     <div class="row" style="margin:4px">
  15.  
  16.  
  17.         <div class="col-sm-4">
  18.         </div>
  19.         <div class="col-sm-4">
  20.         </div>
  21.         <div class="col-sm-4" style="text-align:right" style="margin:4px 0px">
  22.  
  23.  
  24.             <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#addgoods">
  25.                 追加
  26.             </button>
  27.  
  28.  
  29.         </div>
  30.     </div>
  31.     <hr />
  32.  
  33.  
  34.     <div class="mb-3 row">
  35.         <table class="table table-striped">
  36.             <thead>
  37.                 <tr>
  38.                     <th>ID</th>
  39.                     <th>名前</th>
  40.                     <th>価格</th>
  41.                     <th>説明</th>
  42.                     <th>有効</th>
  43.                     <th>シリアル番号</th>
  44.                     <th>製品タイプ</th>
  45.                     <th>操作</th>
  46.                 </tr>
  47.             </thead>
  48.             <tbody>
  49.                 <template x-for="goods in Goodses">
  50.                     <tr>
  51.                         <td x-text="goods.ID"></td>
  52.                         <td x-text="goods.Name"></td>
  53.                         <td x-text="goods.Price"></td>
  54.                         <td x-text="goods.Describe"></td>
  55.                         <td x-text="goods.Validate"></td>
  56.                         <td x-text="goods.SerialNumber"> </td>
  57.                         <td x-text="goods.GoodsType"></td>
  58.                         <td>
  59.                             <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modifygoods" x-on:click="modify(goods)">改訂</button>
  60.                             <button type="button" class="btn btn-danger btn-sm" x-on:click="remove(goods.ID)">消去</button>
  61.                         </td>
  62.                     </tr>
  63.                 </template>
  64.             </tbody>
  65.         </table>
  66.     </div>
  67.     <div class="modal fade" id="addgoods" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  68.         <div class="modal-dialog">
  69.             <div class="modal-content">
  70.                 <div class="modal-header">
  71.                     <h5 class="modal-title" id="staticBackdropLabel"> 追加Goods</h5>
  72.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  73.                 </div>
  74.                 <div class="modal-body">
  75.                     <div class="container-fluid">
  76.                         <div class="mb-3 row">
  77.                             <label for="GoodsTypeID" class="col-sm-4 col-form-label">Goodsタイプ</label>
  78.                             <div class="col-sm-8">
  79.  
  80.  
  81.                                 <select class="form-select" x-model="Goods.GoodsTypeID" id="GoodsTypeID" aria-label="Default select example">
  82.                                     <option selected>製品タイプ</option>
  83.                                     <template x-for="(item,index) in GoodsTypes" :key="index">
  84.                                         <option x-text="item.Name" :value="item.ID"></option>
  85.                                     </template>
  86.                                 </select>
  87.  
  88.  
  89.                             </div>
  90.                         </div>
  91.                         <div class="mb-3 row">
  92.                             <label for="name" class="col-sm-4 col-form-label">お名前</label>
  93.                             <div class="col-sm-8">
  94.                                 <input type="text" class="form-control" x-model="Goods.Name" placeholder="" id="Name">
  95.                             </div>
  96.                         </div>
  97.  
  98.  
  99.                         <div class="mb-3 row">
  100.                             <label for="Price" class="col-sm-4 col-form-label">価格</label>
  101.                             <div class="col-sm-8">
  102.                                 <input type="number" class="form-control" x-model="Goods.Price" placeholder="" min="1" id="Price">
  103.                             </div>
  104.                         </div>
  105.  
  106.  
  107.                         <div class="mb-3 row">
  108.                             <label for="Describe" class="col-sm-4 col-form-label">説明</label>
  109.                             <div class="col-sm-8">
  110.                                 <input type="text" class="form-control" x-model="Goods.Describe" placeholder="" min="1" id="Describe">
  111.                             </div>
  112.                         </div>
  113.  
  114.  
  115.                         <div class="mb-3 row">
  116.                             <label for="SerialNumber" class="col-sm-4 col-form-label">シリアル番号</label>
  117.                             <div class="col-sm-8">
  118.                                 <input type="number" class="form-control" x-model="Goods.SerialNumber" placeholder="" min="1" id="SerialNumber">
  119.                             </div>
  120.                         </div>
  121.                         <div class="form-check form-switch mb-3 row" style="margin-left:150px">
  122.                             <label class="form-check-label" for="IsCollapse">有効</label>
  123.                             <input class="form-check-input" type="checkbox" role="switch" x-model="Goods.Validate" id="Validate" checked>
  124.                         </div>
  125.  
  126.  
  127.                         <div></div>
  128.                     </div>
  129.                     <div class="modal-footer">
  130.                         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉鎖</button>
  131.                         <button type="button" class="btn btn-primary" data-bs-dismiss="modal" x-on:click="sava">保存</button>
  132.                     </div>
  133.                 </div>
  134.             </div>
  135.         </div>
  136.     </div>
  137.     @section Scripts{
  138.         <script src="~/js/Alpine.js" defer></script>
  139.         <script>
  140.             function querydata() {
  141.                 return {
  142.  
  143.  
  144.                     GoodsTypes: [],
  145.                     Goodses: [],
  146.                     Goods: {
  147.                         Name: '',
  148.                         Price: 0,
  149.                         Describe: '',
  150.                         Validate: true,
  151.                         SerialNumber: 0,
  152.                         GoodsTypeID: 0,
  153.                         GoodsType: '',
  154.                     },
  155.                     init() {
  156.                         that = this
  157.                         $.get("/home/goodses", {}, function (data) {
  158.                             if (data != null) {
  159.                                 that.GoodsTypes = data.Data.GoodsTypes
  160.                                 that.Goodses = data.Data.Goodses
  161.                             } else {
  162.                                 console.log("/Home/Goodses is error")
  163.                             }
  164.                         });
  165.                     },
  166.                     sava() {
  167.                         $.ajax({
  168.                             type: "POST",
  169.                             url: "/home/goods",
  170.                             data: this.Goods,
  171.                             success: function (data) {
  172.  
  173.  
  174.                                 if (data.Result) {
  175.                                     alert("送信に成功!")
  176.                                     that.init()
  177.                                     that.Goods = {
  178.                                         Name: '',
  179.                                         Price: 0,
  180.                                         Describe: '',
  181.                                         Validate: true,
  182.                                         SerialNumber: 0,
  183.                                         GoodsTypeID: 0,
  184.                                         GoodsType: '',
  185.                                     }
  186.                                 } else {
  187.                                     alert("提出に失敗しました：" + data.Message)
  188.                                 }
  189.                             }
  190.                         });
  191.                     }
  192.                 }
  193.             }
  194. </script>
  195.     }
  196. </div>

Controller

  1. using Microsoft.AspNetCore.Mvc;
  2. using System.Collections.Immutable;
  3. using System.Diagnostics;
  4. using WinFormDemo12WebHost.Models;
  5.  
  6.  
  7. namespace WinFormDemo12WebHost.Controllers
  8. {
  9.     public class HomeController : Controller
  10.     {
  11.         private readonly ILogger<HomeController> _logger;
  12.  
  13.  
  14.         public HomeController(ILogger<HomeController> logger)
  15.         {
  16.             _logger = logger;
  17.         }
  18.         public IActionResult Goods()
  19.         {
  20.             return View();
  21.         }
  22.         static List<GoodsType> _goodsTypes = new List<GoodsType> {
  23.             new GoodsType {ID=1,Name="A类型" },
  24.             new GoodsType {ID=2,Name="B类型" },
  25.         };
  26.         static List<Goods> _goodses = new List<Goods>
  27.         {
  28.  
  29.  
  30.         };
  31.         [HttpGet("/home/goodses")]
  32.         public async Task<JsonResult?> QueryGoodsesAsync()
  33.         {
  34.             try
  35.             {
  36.                 _logger.LogInformation("BackQuery Goods List");
  37.                 var goodsTypes = _goodsTypes;
  38.                 var goodses = _goodses;
  39.  
  40.  
  41.                 return new JsonResult(
  42.                     new
  43.                     {
  44.                         Data = new
  45.                         {
  46.                             GoodsTypes = goodsTypes,
  47.                             Goodses = goodses
  48.                         }
  49.                     });
  50.             }
  51.             catch (Exception exc)
  52.             {
  53.                 _logger.LogCritical(exc, exc.Message);
  54.                 return new JsonResult(new
  55.                 {
  56.                     Result = false,
  57.                     Message = exc.Message
  58.                 });
  59.             }
  60.         }
  61.         [HttpDelete("/home/goods")]
  62.         public async Task<JsonResult?> DeleteGoodsAsync(int id)
  63.         {
  64.             try
  65.             {
  66.                 _logger.LogInformation("delete goods");
  67.                 var result = _goodses.Remove(_goodses.SingleOrDefault(s => s.ID == id));
  68.                 return new JsonResult(
  69.                     new
  70.                     {
  71.                         Result = result
  72.                     });
  73.             }
  74.             catch (Exception exc)
  75.             {
  76.                 _logger.LogCritical(exc, exc.Message);
  77.                 return new JsonResult(new { Result = false, Message = exc.Message });
  78.             }
  79.         }
  80.         [HttpPut("/home/goods")]
  81.         public async Task<JsonResult?> ModifyGoodsAsync(Goods goods)
  82.         {
  83.             try
  84.             {
  85.                 _logger.LogInformation("modify goods");
  86.                 _goodses.Remove(_goodses.SingleOrDefault(s => s.ID == goods.ID));
  87.                 goods.ID = _goodses.Max(s => s.ID) + 1;
  88.                 _goodses.Add(goods);
  89.                 return new JsonResult(
  90.                     new
  91.                     {
  92.                         Result = goods
  93.                     });
  94.             }
  95.             catch (Exception exc)
  96.             {
  97.                 _logger.LogCritical(exc, exc.Message);
  98.                 return new JsonResult(new { Result = false, Message = exc.Message });
  99.             }
  100.         }
  101.         [HttpPost("/home/goods")]
  102.         public async Task<JsonResult?> AddGoodstAsync(Goods goods)
  103.         {
  104.             try
  105.             {
  106.                 _logger.LogInformation("add goods");
  107.                 goods.ID = _goodses.Count > 0 ? _goodses.Max(s => s.ID) + 1 : 1;
  108.                 _goodses.Add(goods);
  109.                 return new JsonResult(
  110.                     new
  111.                     {
  112.                         Result = true,
  113.                         Data = goods
  114.                     });
  115.             }
  116.             catch (Exception exc)
  117.             {
  118.                 _logger.LogCritical(exc, exc.Message);
  119.                 return new JsonResult(new { Result = false, Message = exc.Message });
  120.             }
  121.         }   
  122.     }
  123.     public class GoodsType
  124.     {
  125.         public int ID { get; set; }
  126.         public string? Name { get; set; }
  127.     }
  128.     public class Goods
  129.     {
  130.         public int ID { get; set; }
  131.         public string? Name { get; set; }
  132.         public decimal Price { get; set; }
  133.         public string? Describe { get; set; }
  134.         public bool Validate { get; set; }
  135.         public int GoodsTypeID { get; set; }
  136.         public int SerialNumber { get; set; }
  137.         public string GoodsType { get; set; }
  138.         public decimal MaxPrice
  139.         {
  140.             get
  141.             {
  142.                 return Price >= 70000 ? Price + 3000 : (Price > 0 ? Price + 2000 : 0);
  143.             }
  144.         }
  145.         public decimal MinPrice
  146.         {
  147.             get
  148.             {
  149.                 return Price >= 70000 ? Price - 3000 : (Price > 2000 ? Price - 2000 : 0);
  150.             }
  151.         }
  152.     }
  153. }

WebView2与控件与Web的交互主要通过webView21.CoreWebView2.ExecuteScriptAsync方法完成，所以不同的Web内容，JS的写法不一样，当然这里的JS实现简单交互还行，更复杂的就有点吃力了，可以使用一些UI自动化工库来操作更快捷。在WinForm中使用WebView，更多的是用来展现数据，而不是互操作，所以下面只是一个简单交互例子而已。

下面是模拟三个动作：点击添加按钮，在商品添加页面中完成信息录入，然后点击保存按钮（即使保存成功或失败后的alter也能针对处理）。

  1. using System.Collections.Generic;
  2.  
  3.  
  4. namespace WinFormsDemo13
  5. {
  6.     public partial class Form1 : Form
  7.     {
  8.         public Form1()
  9.         {
  10.             InitializeComponent();
  11.         }
  12.         private void Form1_Load(object sender, EventArgs e)
  13.         {
  14.             webView21.Source = new Uri(@"http://localhost:5026/home/goods");
  15.         }
  16.         private void button1_Click(object sender, EventArgs e)
  17.         {
  18.             var js = """
  19.                 $(".btn-info").click()
  20.                 """;
  21.             webView21.CoreWebView2.ExecuteScriptAsync(js);
  22.         }
  23.         int sn = 1;
  24.         private void button2_Click(object sender, EventArgs e)
  25.         {
  26.             int mark = DateTime.Now.Millisecond * 1000 + DateTime.Now.Microsecond;
  27.             var js = $"""   
  28.                 var goods=document.querySelector('[x-data]')._x_dataStack[0].Goods;
  29.                 goods.GoodsTypeID={mark % 2 + 1};
  30.                 goods.Name="商品{mark}";
  31.                 goods.Price={100 * new Random().Next(1, 20)};
  32.                 goods.Describe="商品{mark}说明";
  33.                 goods.SerialNumber={sn};
  34.                 goods.Validate={(mark % 2 == 0).ToString().ToLower()};
  35.                 goods.GoodsType="{(mark % 2 == 0 ? "A类型" : "B类型")}";
  36.                 """;
  37.             webView21.CoreWebView2.ExecuteScriptAsync(js);
  38.             sn++;
  39.         }
  40.         private void button3_Click(object sender, EventArgs e)
  41.         {
  42.             var js = """
  43.                 $("#addgoods .btn-primary").click()
  44.                 """;
  45.             webView21.CoreWebView2.ExecuteScriptAsync(js);
  46.         }     
  49.         private void CoreWebView2_ScriptDialogOpening(object? sender, Microsoft.Web.WebView2.Core.CoreWebView2ScriptDialogOpeningEventArgs e)
  50.         {
  51.             e.Accept();
  52.         }
  55.         private void webView21_CoreWebView2InitializationCompleted(object sender, Microsoft.Web.WebView2.Core.CoreWebView2InitializationCompletedEventArgs e)
  56.         {
  57.             if (e.IsSuccess)
  58.             {
  59.                 webView21.CoreWebView2.Settings.AreDefaultScriptDialogsEnabled = false;
  60.                 webView21.CoreWebView2.ScriptDialogOpening += CoreWebView2_ScriptDialogOpening;
  61.             }
  62.         }
  63.     }
  64. }

运行结果：

803d6b66da9fd36035e8f5b21b266fbe.png

技术群：添加小编微信并备注进群

小编微信：mm1552923   

公众号：dotNet编程大全    

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/700429
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号