开发者技术论坛 › DevExpress【综合资源】 › ASP.Net Core 使用DevExpress Bootstrap控件,求赞扬。

isnb 发表于 2018-12-10 10:47:47

ASP.Net Core 使用DevExpress Bootstrap控件,求赞扬。

本帖最后由 isnb 于 2018-12-10 10:59 编辑

修改Startup.cs
            services.AddMvc();            //使用DevExpress 服务
            services.AddDevExpressControls();         
            //使用Sqlite 数据库
            services.AddDbContext<DevExpressStarterProject.Models.NorthwindContext>(options => {
                options.UseSqlite(Configuration.GetConnectionString("NorthwindConnection"));

使用AJAX控件
在SampleController定义四个回调方法
      public IActionResult GridViewPartial() {
            return PartialView(NorthwindContext.Products);
      }
      public IActionResult AddNewRow(Product product) {
            try {
                if(ModelState.IsValid) {
                  product.ProductID = NorthwindContext.Products.Max(p => p.ProductID) + 1;
                  NorthwindContext.Products.Add(product);
                  NorthwindContext.SaveChanges();
                }
            } catch(Exception e) {
                ViewData["error"] = e.Message;
            }
            return PartialView("GridViewPartial", NorthwindContext.Products);
      }
      public IActionResult UpdateRow(Product product) {
            try {
                if(ModelState.IsValid) {
                  NorthwindContext.Products.Update(product);
                  NorthwindContext.SaveChanges();
                }
            } catch(Exception e) {
                ViewData["error"] = e.Message;
            }
            return PartialView("GridViewPartial", NorthwindContext.Products);
      }
      public IActionResult DeleteRow(int productID = -1) {
            var product = NorthwindContext.Products
                .FirstOrDefault(i => i.ProductID == productID);
            try {
                NorthwindContext.Products.Remove(product);
                NorthwindContext.SaveChanges();
            } catch(Exception e) {
                ViewData["error"] = e.Message;
            }
            return PartialView("GridViewPartial", NorthwindContext.Products);
      }
将控件的Razor代码添加到创建的局部视图中。为新操作方法指定AJAX请求路由映射：
@(Html.DevExpress()
    .BootstrapGridView<Product>("GridView")
    .KeyFieldName(m => m.ProductID)
    .Columns(columns => {
      columns.AddCommandColumn()
            .ShowEditButton(true)
            .ShowNewButtonInHeader(true)
            .ShowDeleteButton(true);
      columns.Add(m => m.ProductName);
      columns.Add(m => m.QuantityPerUnit);
      columns.Add(m => m.UnitPrice);
      columns.Add(m => m.UnitsInStock);
      columns
         .AddTextColumn()
         .FieldName("TotalPrice")
         .ReadOnly(true)
         .UnboundType(DevExpress.Data.UnboundColumnType.Decimal)
         .UnboundExpression("UnitPrice * UnitsInStock")
         .PropertiesTextEdit(properties => properties.DisplayFormatString("c"))
         .SettingsEditForm(editForm => editForm.Visible(false));
      columns.Add(m => m.Discontinued);
    })
    .Settings(settings => settings.ShowHeaderFilterButton(true))
    .EditErrorText(ViewData["Error"]?.ToString())
    .Routes(routes => routes
       .MapRoute(r => r
         .Action("GridViewPartial")
         .Controller("Sample"))
       .MapRoute(r => r
         .RouteType(GridViewRouteType.UpdateRow)
         .Action("UpdateRow")
         .Controller("Sample"))
       .MapRoute(r => r
         .RouteType(GridViewRouteType.AddRow)
         .Action("AddNewRow")
         .Controller("Sample"))
       .MapRoute(r => r
         .RouteType(GridViewRouteType.DeleteRow)
         .Action("DeleteRow")
         .Controller("Sample")))
    .Bind(Model))
自定义控件的外观
套件中的每个控件都有一个CssClasses方法，通过设置该方法改变控件外观
先添加样式代码


CSS



.my-button {    border-radius: 0;}

生成一个按钮控件并指定样式。


C#



@(Html.DevExpress()    .BootstrapButton("myButton")    .CssClasses(css => css.Control("my-button"))    .Text("My Button")







项目工程仅回复可见。项目依赖以下组件，自行安装。
[*]ASP.Net Core 2.0
[*]Bootstrap 3.3+ (including Bootstrap 4 Beta)
[*]JQuery 2+
求赞扬。求赞扬。求赞扬。求赞扬。 求赞扬。求赞扬。求赞扬。

fidan 发表于 2018-12-10 10:56:27

感谢分享！

qqtome 发表于 2018-12-17 17:34:49

感谢分享！！！！！

hpygzhx520 发表于 2018-12-27 16:31:30

从哪个版本支持ASP.Net Core 2.0

gudan1ren 发表于 2019-1-5 12:01:13

从哪个版本支持ASP.Net Core 2.0

不存在的会员 发表于 2019-1-14 13:36:06

这个厉害，大声

Kane 发表于 2019-1-17 15:19:23

下来学习，感谢分享

Justin_oo 发表于 2019-2-1 15:36:08

很想看看楼主的实现方法，有demo吗

20a20 发表于 2019-2-10 17:08:36

这个分享很不错，谢谢分享

cjking 发表于 2019-5-21 22:34:45

从哪个版本支持ASP.Net Core 2.0

wlv404 发表于 2019-5-23 16:19:15

感谢分享.

skyhair 发表于 2019-5-23 17:50:48

学习一下，顶啦

phf870627 发表于 2019-9-1 10:55:37

下来学习，感谢分享

aa770512100 发表于 2020-8-13 15:15:56

看看111111111111111

skyymrj20 发表于 2021-3-17 14:15:50

厉害哦。。

查看完整版本: ASP.Net Core 使用DevExpress Bootstrap控件,求赞扬。