敏捷思维学习Ext.Net MVC--3.5Form表单组件之复选组件（checkbox）暨母版页

来源：互联网发布：如何找风投知乎编辑：程序博客网时间：2024/05/17 06:28

敏捷思维学习Ext.Net MVC--3.5Form表单组件之复选组件（checkbox）暨母版页（Section）

经历了上一节的下拉菜单这节的复选组件简单了很多，利用这个机会看看建立的这些网页我们发现网页和网页之间有很多重复的东西，比如说我们每个网页必须注册的资源管理器：“@Html.X().ResourceManager()”。我们可不可以将这些重复性的东西打包，我们下次再建立网页的时候直接调用就行，这类似于Asp.Net的模板页，Razor（cshtml所用语法）中早就给我们想好了，而且应用起来更简单。下面根据我们敏捷的思维方式我们先建一个母版页跑起来再说，由于母版页是公用的我们将其放在View/Shared文件夹中，在该文件夹中新建_BaseLayout.cshtml文件，并在该文件中输入如下代码：

Layout = null;

HttpContext.Current.Items["ext.net.mvc.example"] = true;

}

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

@RenderSection("headtag", false)//(2)

</head>

<body>

@Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig)//(3)

@RenderSection("example", true)//(4)

</body>

</html>

（1）引入examples.css布局文件，注意这里使用的路径为绝对路径~/resources/css/examples.css ~表示文件的根目录。（2）@RenderSection("headtag", false) @RenderSection在母版页中占个位，然后让使用此母版页的子页，去呈现他们的Section。第一个参数定义的是Section名，第二个参数定义此Section是否在子页中必须被实现，如果定义为true则在子页中必须被实现否则将会报错，定义为false则在子页中不是必须实现的。（3）注册资源管理器，在子页就不用再注册了。（4）定义名称为example的Section，第二个参数为说明该Section在子页中必须被实现。

下面我们先就简单实现一个子页

一、在FormController中增加MyCheckBox函数如下所示

public ActionResult MyCheckBox()

{

return View();

}

二、右键单击添加View文件MyCheckBox.cshtml，将文件中的代码全部删除替换为以下代码：

Layout = "~/Views/Shared/_BaseLayout.cshtml";

}

@section headtag(2)

{

<p>I am headtag</p>

}

@section example//(4)

{

<p>I am example</p>

}

运行界面为：

（2）对应上母版页设置的@RenderSection("headtag", false)//(2)，可以看出这里的headtag为RenderSection的第一个参数，false的意思为这一Section是可以没有的，把它删掉运行系统没有出错，大括号里面的内容是子页需要添加的内容，我们这里为了简化暂时只让其显示文本“I am headtag”。（4）对应母版页设置的@RenderSection("example", true) //(4)，true的意思为这一Section是必须实现的如果把它删除系统将会报错。关于母版页的知识就先介绍到这里，我们会在以后的学习中逐渐深入。

三、在FormModel中新建FormAnimal类，如下：

public class FormAnimal

{

[Field(FieldLabel = "狗")]

public bool dog { get; set; }

[Field(FieldLabel = "猴子")]

public bool monkey{get;set;}

[Field(FieldLabel = "鸟")]

public bool bird { get; set; }

}

四、将FormController中的MyCheckBox函数修改如下：

public ActionResult MyCheckBox()

{

FormAnimal MyAnimal=new FormAnimal();//(1)

MyAnimal.bird = true;//(2)

return View(MyAnimal);//(3)

}

（1）新建FormAnimal对象，MyAnimal。（2）设置MyAnimal.bird值为真。（3）将MyAnimal对象推送到View端。

五、修改View文件MyCheckBox.cshtml如下：

@model ExtExamples.Models.FormAnimal

Layout = "~/Views/Shared/_BaseLayout.cshtml";

}

@section example

{

Html.X().FormPanelFor(m=>m) //(1)

.BodyPadding(10)

.DefaultAnchor("100%")

.Width(300)

.Buttons(Html.X().Button()

.Text("提交")

.DirectClickUrl(Url.Action("FormAnimalSubmit")) //(2)

)

}

（1）根据FormAnimal模型生成Form表单。（2）设置提交的路径为FormAnimalSubmit。

六、在FormController中添加数据处理函数

public ActionResult FormAnimalSubmit(FormAnimal FAnimal)//(1)

{

X.Msg.Alert("Employee", JSON.Serialize(FAnimal)).Show();//(2)

return this.Direct();

}

（1）通过FormAnimal对象FAnimal接收前端传来的信息。（2）将FAnimal对象序列化为字符串并返回前端。

运行该界面并选择三个选项的到如下结果：

0 0