MVC专题 专题
您的位置:csharp > MVC专题专题 > ASP.Net MVC助手
ASP.Net MVC助手
作者:--    发布时间:2019-11-19

在asp.net web表单中,开发人员正在使用工具箱来在任何特定的页面上添加控件。 但是,在asp.net mvc应用程序中,没有工具箱可用于在视图上拖放html控件。 在asp.net mvc应用程序中,如果想创建一个视图,它应该包含html代码。 所以那些刚接触mvc的开发者,特别是在网页表单的背景下,发现这个有点难。

为了克服这个问题,asp.net mvc提供了htmlhelper类,它包含不同的方法来帮助你编程创建html控件。 所有的htmlhelper方法都会生成html并以字符串形式返回结果。 最终的html是由这些函数在运行时生成的。 htmlhelper类用于生成ui,不应该在控制器或模型中使用。

有不同类型的帮手方法。

  • createinputs - 为文本框和按钮创建输入。
  • createlinks - 创建基于来自路由表的信息的链接。
  • createforms - 创建表单标签,可以回发到动作,或回发到另一个控制器上的操作。

如果有看过前面视图教程文章中(项目:mvcsimpleapp)employeecontroller控制器的index动作生成的视图,将看到以html开始的操作符前缀,如html.actionlink和html.displaynamefor等,如下面的代码所示。

@model ienumerable<mvcsimpleapp.models.employee>
@{
   layout = null;
} 

<!doctype html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width" />
      <title>index</title>
   </head>

   <body>
      <p>
         @html.actionlink("create new", "create")
      </p>

      <table class = "table">
         <tr>
            <th>
               @html.displaynamefor(model => model.name)
            </th>

            <th>
               @html.displaynamefor(model => model.joiningdate)
            </th>

            <th>
               @html.displaynamefor(model => model.age)
            </th>

            <th></th>
         </tr>

         @foreach (var item in model) {
            <tr>
               <td>
                  @html.displayfor(modelitem => item.name)
               </td>

               <td>
                  @html.displayfor(modelitem => item.joiningdate)
               </td>

               <td>
                  @html.displayfor(modelitem => item.age)
               </td>

               <td>
                  @html.actionlink("edit", "edit", new { id = item.id }) |
                  @html.actionlink("details", "details", new { id = item.id }) |
                  @html.actionlink("delete", "delete", new { id = item.id })
               </td>
            </tr>
         }

      </table>
   </body>
</html>

这个html是从viewpage基类继承的一个属性。所以,它在所有的视图中都可用,并返回一个名为htmlhelper的实例。

我们来看看一个简单的例子,让用户可以编辑员工信息。 因此,此编辑操作将使用大量不同的html助手。

如果看上面的代码,会在最后部分看到下面的html helper方法 -

@html.actionlink("edit", "edit", new { id = item.id })

在actionlink助手中,第一个参数是“edit”链接,第二个参数是控制器中的动作方法,也是“edit”,第三个参数id是要编辑的员工编号。

我们通过添加静态列表来更改employeecontroller类,并使用以下代码更改索引操作。

public static list<employee> emplist = new list<employee>{
   new employee{
      id = 1,
      name = "allan",
      joiningdate = datetime.parse(datetime.today.tostring()),
      age = 23
   },

   new employee{
      id = 2,
      name = "carson",
      joiningdate = datetime.parse(datetime.today.tostring()),
      age = 45
   },

   new employee{
      id = 3,
      name = "carson",
      joiningdate = datetime.parse(datetime.today.tostring()),
      age = 37
   },

   new employee{
      id = 4,
      name = "laura",
      joiningdate = datetime.parse(datetime.today.tostring()),
      age = 26
   },

};

public actionresult index(){
   var employees = from e in emplist
   orderby e.id
   select e;
   return view(employees);
}

下面来更新编辑操作。您将看到两个编辑操作,一个用于get,一个用于post。这里更新get的编辑操作,其中只有参数中的id,如下面的代码所示。

// get: employee/edit/5
public actionresult edit(int id){
   list<employee> emplist = getemployeelist();
   var employee = emplist.single(m => m.id == id);
   return view(employee);
}

现在,我们知道有编辑的动作,但是没有任何对应此动作的视图。 所以还需要添加一个视图(view)。 为此,请右键单击edit操作,然后选择添加视图。从“模板”下拉列表中选择edit,从“模型”下拉列表中选择“employee” -

以下是edit视图中的默认实现。参考以下示例代码 -

@model mvcsimpleapp.models.employee

@{
    layout = null;
}

<!doctype html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>edit</title>
</head>
<body>
    @using (html.beginform())
    {
        @html.antiforgerytoken()

        <div class="form-horizontal">
            <h4>employee</h4>
            <hr />
            @html.validationsummary(true, "", new { @class = "text-danger" })
            @html.hiddenfor(model => model.id)

            <div class="form-group">
                @html.labelfor(model => model.name, htmlattributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @html.editorfor(model => model.name, new { htmlattributes = new { @class = "form-control" } })
                    @html.validationmessagefor(model => model.name, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @html.labelfor(model => model.joiningdate, htmlattributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @html.editorfor(model => model.joiningdate, new { htmlattributes = new { @class = "form-control" } })
                    @html.validationmessagefor(model => model.joiningdate, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @html.labelfor(model => model.age, htmlattributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @html.editorfor(model => model.age, new { htmlattributes = new { @class = "form-control" } })
                    @html.validationmessagefor(model => model.age, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="save" class="btn btn-default" />
                </div>
            </div>
        </div>
    }

    <div>
        @html.actionlink("back to list", "index")
    </div>
</body>
</html>

html.beginform非常有用,因为它使您能够更改url,更改方法等。

在上面的代码中,看到另一个html助手:@ html.hiddenfor,它用于生成隐藏的字段。

mvc框架足够聪明地发现这个id字段在模型类中,因此它需要防止被编辑编修改,这就是为什么它被标记为隐藏字段的原因。

html.labelfor html助手在屏幕上创建标签。如果在进行更改时错误地输入了任何内容,则html.validationmessagefor助手将显示正确的错误消息。

还需要更改post的编辑操作,需要更新员工信息时,它就会调用这个动作。参考以下代码 -

// post: employee/edit/5
        [httppost]
        public actionresult edit(int id, formcollection collection)
        {
            try
            {
                // todo: add update logic here
                list<employee> emplist = getemployeelist();
                var employee = emplist.single(m => m.id == id);
                if (tryupdatemodel(employee))
                {
                    //to do:- database code
                    return redirecttoaction("index");
                }
                return view(employee);
            }
            catch
            {
                return view();
            }
        }

让我们运行这个应用程序,并请求以下url:http://localhost:64466/employee员工。将会看到以下输出。

点击任何特定员工的编辑链接,以点击员工编号为1编辑链接为示例,您将看到以下视图显示结果。

将年龄从23岁改为29岁,然后点击“保存”按钮,然后会在index视图中看到更新的年龄。


网站声明:
本站部分内容来自网络,如您发现本站内容
侵害到您的利益,请联系本站管理员处理。
联系站长
373515719@qq.com
关于本站:
编程参考手册