FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

FineUI首页 WebForms - MVC & Core - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI(开源版) 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

FineUIMvc/Core v5.4.0 发布(Core基础版首发!) FineUIPro v5.4.0 发布(十年磨一剑,升级正当时) 欢迎加入【三石和他的朋友们】(基础版下载)

查看: 3962|回复: 6

FineUIMvc中动态创建表单元素

[复制链接]
发表于 2018-5-5 17:42:58 | 显示全部楼层 |阅读模式
需求来自知识星球内的用户提问:


参看FineUIPro的示例:http://pro.fineui.com/#/form/form_dynamic.aspx

在FineUIMvc中实现也不难,来看下关键代码:
1. 视图代码
  1. @(F.Form().BodyPadding(10).ID("Form1").IsFluid(true).CssClass("blockpanel").EnableCollapse(false).Title("表单").LabelWidth(120).LabelAlign(LabelAlign.Top)
  2.         .Rows(
  3.                 F.FormRow()
  4.                         .Items(
  5.                                 F.Label().ID("Label1").ShowLabel(false).Text("这是一个标签")
  6.                         ),
  7.                 F.FormRow()
  8.                         .Items(ViewBag.DynamicItems)
  9.         )
  10. )
  11. <br>
  12. 注:用户名和性别两个控件是动态创建的。
  13. <br>
  14. <br>

  15. @(F.Button().ID("Button1").ValidateForms("Form1").ValidateTarget(Target.Top).Text("验证表单并提交").OnClick(Url.Action("Button1_Click"), "Form1"))
复制代码


2. 控制器代码
  1. // GET: Form/FormDynamic
  2. public ActionResult Index()
  3. {
  4.         InitFormRows();

  5.         return View();
  6. }

  7. private void InitFormRows()
  8. {
  9.         List<Field> fields = new List<Field>();

  10.         TextBox tbxUser = new TextBox();
  11.         tbxUser.ID = "tbxUserName";
  12.         tbxUser.Text = "";
  13.         tbxUser.Label = "用户名";
  14.         tbxUser.ShowLabel = true;
  15.         tbxUser.ShowRedStar = true;
  16.         tbxUser.Required = true;
  17.         tbxUser.EmptyText = "请输入用户名";
  18.         fields.Add(tbxUser);

  19.         FineUIMvc.DropDownList ddlGender = new FineUIMvc.DropDownList();
  20.         ddlGender.ID = "ddlGender";
  21.         ddlGender.Label = "性别(自动回发)";
  22.         ddlGender.Items.Add("男", "0");
  23.         ddlGender.Items.Add("女", "1");
  24.         ddlGender.AutoSelectFirstItem = false;
  25.         // 添加后台事件处理函数
  26.         ddlGender.Events.Add(new Event("change", Url.Action("ddlGender_SelectedIndexChanged"), "ddlGender"));
  27.         fields.Add(ddlGender);

  28.         ViewBag.DynamicItems = fields.ToArray();
  29. }


  30. [HttpPost]
  31. [ValidateAntiForgeryToken]
  32. public ActionResult ddlGender_SelectedIndexChanged(string ddlGender_text)
  33. {
  34.         ShowNotify("选择的性别:" + ddlGender_text);

  35.         return UIHelper.Result();
  36. }


  37. [HttpPost]
  38. [ValidateAntiForgeryToken]
  39. public ActionResult Button1_Click(string tbxUserName, string ddlGender_text)
  40. {
  41.         ShowNotify("用户名:" + tbxUserName + "  性别:" + ddlGender_text);

  42.         return UIHelper.Result();
  43. }
复制代码


页面运行效果:



注意,FineUIMvc中在后台通过C#注册后台事件的方式:
  1. ddlGender.Events.Add(new Event("change", Url.Action("ddlGender_SelectedIndexChanged"), "ddlGender"));
复制代码
其中:
1. change - 前端库JS库对应的下拉列表的事件名称
2. ddlGender_SelectedIndexChanged - 对应的控制器方法

这个示例会添加到下个版本(v5.1.0)的官网示例中。





本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
发表于 2018-5-8 11:01:56 | 显示全部楼层
谢谢,关键是我在前台创建控件时,formrow也是动态的,不是在前台给固定死的,并且formrow的增加必须要依靠form的id,而form是在前台创建的,所以在后台初始化是取不到前台的form 的id,所以前面我问的问题的关键也是要如何动态创建formrow,如果能动态创建的话,后面的控件就好创建了!因为后面创建new formrow,要加上必须是form.rows.add(formrow),所以麻烦大大再帮我看看,多谢
回复 支持 反对

使用道具 举报

 楼主| 发表于 2018-5-8 14:25:36 | 显示全部楼层
nature919 发表于 2018-5-8 11:01
谢谢,关键是我在前台创建控件时,formrow也是动态的,不是在前台给固定死的,并且formrow的增加必须要依靠 ...
要加上必须是form.rows.add(formrow)

====
这个说法不对,我在知识星球给你回复了,你这是WebForms的思维模式。

MVC中,在Controller中通过C#代码创建FormRow[]对象,然后放到ViewBag.MyRows中,在View中直接设置.Rows(ViewBag.MyRows)
回复 支持 反对

使用道具 举报

发表于 2019-3-29 11:07:00 | 显示全部楼层
我现在也遇到这个问题了,能给一下示例代码嘛? 如何动态冲击formRow
回复 支持 反对

使用道具 举报

发表于 2019-3-29 11:53:05 | 显示全部楼层
sanshi 发表于 2018-5-8 14:25
====
这个说法不对,我在知识星球给你回复了,你这是WebForms的思维模式。

------------------------------页面代码---------------------------------@(F.Panel().IsFluid(true).CssClass("blockpanel").ID("Panel5").Title("Demo表格编写").BodyPadding(10).ShowBorder(true).ShowHeader(true)
    .Items(
        F.Form().ID("Form1").ShowBorder(false).BodyPadding(10).ShowHeader(false)
                .Rows(ViewBag.GridSelect)
       )
    )
-----------------------------------控制器代码--------------------------
   FormRow form = new FormRow();
            FormRow[] formRow = new FormRow[1] { form };


            form = new FormRow();
            TextBox tbxUser = new TextBox();
            tbxUser.ID = "tbxUserName";
            tbxUser.Text = "";
            tbxUser.Label = "用户名";
            tbxUser.ShowLabel = true;
            tbxUser.ShowRedStar = true;
            tbxUser.Required = true;
            tbxUser.EmptyText = "请输入用户名";
            form.Items.Add(tbxUser);

            formRow[0].Items.Add(form);

            ViewBag.GridSelect = formRow;

-------------------------------报错信息----------------------------------
与“FineUIMvc.FormExtension.Rows(params FineUIMvc.FormRowExtension[])”最匹配的重载方法具有一些无效参数

您好,我现在这么写是哪里有问题吗?麻烦给看一下,谢谢。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2019-3-29 16:03:27 | 显示全部楼层
steve 发表于 2019-3-29 11:53
------------------------------页面代码---------------------------------@(F.Panel().IsFluid(true).C ...

这个是我这边的问题,目前只有一个重载函数:
public FormExtension Rows(params FormRowExtension[] extensions)

下个版本(v5.5.0),我会增加另一个重载函数:
public FormExtension Rows(params FormRow[] rows)
回复 支持 反对

使用道具 举报

 楼主| 发表于 2019-3-29 16:03:42 | 显示全部楼层
steve 发表于 2019-3-29 11:53
------------------------------页面代码---------------------------------@(F.Panel().IsFluid(true).C ...

http://fineui.com/bbs/forum.php?mod=viewthread&tid=21654
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|FineUI 官方论坛 ( 皖ICP备13005369号-1 )

GMT+8, 2019-5-20 08:40 , Processed in 0.074879 second(s), 27 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表