FineUIMvc中动态创建表单元素

sanshi

需求来自知识星球内的用户提问：


参看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. 
    
16. @(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. 
   
6.         return View();
   
7. }
   
8. 
   
9. private void InitFormRows()
   
10. {
    
11.         List<Field> fields = new List<Field>();
    
12. 
    
13.         TextBox tbxUser = new TextBox();
    
14.         tbxUser.ID = "tbxUserName";
    
15.         tbxUser.Text = "";
    
16.         tbxUser.Label = "用户名";
    
17.         tbxUser.ShowLabel = true;
    
18.         tbxUser.ShowRedStar = true;
    
19.         tbxUser.Required = true;
    
20.         tbxUser.EmptyText = "请输入用户名";
    
21.         fields.Add(tbxUser);
    
22. 
    
23.         FineUIMvc.DropDownList ddlGender = new FineUIMvc.DropDownList();
    
24.         ddlGender.ID = "ddlGender";
    
25.         ddlGender.Label = "性别（自动回发）";
    
26.         ddlGender.Items.Add("男", "0");
    
27.         ddlGender.Items.Add("女", "1");
    
28.         ddlGender.AutoSelectFirstItem = false;
    
29.         // 添加后台事件处理函数
    
30.         ddlGender.Events.Add(new Event("change", Url.Action("ddlGender_SelectedIndexChanged"), "ddlGender"));
    
31.         fields.Add(ddlGender);
    
32. 
    
33.         ViewBag.DynamicItems = fields.ToArray();
    
34. }
    
35. 
    
36. 
    
37. [HttpPost]
    
38. [ValidateAntiForgeryToken]
    
39. public ActionResult ddlGender_SelectedIndexChanged(string ddlGender_text)
    
40. {
    
41.         ShowNotify("选择的性别：" + ddlGender_text);
    
42. 
    
43.         return UIHelper.Result();
    
44. }
    
45. 
    
46. 
    
47. [HttpPost]
    
48. [ValidateAntiForgeryToken]
    
49. public ActionResult Button1_Click(string tbxUserName, string ddlGender_text)
    
50. {
    
51.         ShowNotify("用户名：" + tbxUserName + "  性别：" + ddlGender_text);
    
52. 
    
53.         return UIHelper.Result();
    
54. }

复制代码

页面运行效果：



注意，FineUIMvc中在后台通过C#注册后台事件的方式：

1. ddlGender.Events.Add(new Event("change", Url.Action("ddlGender_SelectedIndexChanged"), "ddlGender"));

复制代码

其中：
1. change - 前端库JS库对应的下拉列表的事件名称
2. ddlGender_SelectedIndexChanged - 对应的控制器方法

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

nature919

谢谢，关键是我在前台创建控件时，formrow也是动态的，不是在前台给固定死的，并且formrow的增加必须要依靠form的id,而form是在前台创建的，所以在后台初始化是取不到前台的form 的id，所以前面我问的问题的关键也是要如何动态创建formrow，如果能动态创建的话，后面的控件就好创建了！因为后面创建new formrow，要加上必须是form.rows.add（formrow），所以麻烦大大再帮我看看，多谢

sanshi

nature919 发表于 2018-5-8 11:01
谢谢，关键是我在前台创建控件时，formrow也是动态的，不是在前台给固定死的，并且formrow的增加必须要依靠 ...

要加上必须是form.rows.add（formrow）

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

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

steve

我现在也遇到这个问题了，能给一下示例代码嘛？ 如何动态冲击formRow

steve

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[])”最匹配的重载方法具有一些无效参数

您好，我现在这么写是哪里有问题吗？麻烦给看一下，谢谢。

sanshi

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)

sanshi

steve 发表于 2019-3-29 11:53
------------------------------页面代码---------------------------------@(F.Panel().IsFluid(true).C ...

http://fineui.com/bbs/forum.php?mod=viewthread&tid=21654