ASP.Net MVC视图

MVC专题专题

您的位置：csharp > MVC专题专题 > ASP.Net MVC视图

ASP.Net MVC视图

作者：-- 发布时间：2019-11-19

在asp.net mvc应用程序中，当在url中指定路径时，可像页面那样但不包含对应的任何内容直接显示给用户。在asp.net mvc应用程序中最接近页面的东西就是视图。

在asp.net mvc应用程序中，所有传入的浏览器请求都由控制器处理，并将这些请求映射到控制器操作。控制器操作可能会返回一个视图，或者也可能执行一些其他类型的操作，例如重定向到另一个控制器动作。

下面通过创建一个新的asp.net mvc项目，来演示如何应用视图的简单例子。
打开visual studio，然后单击菜单：文件 -> 新建 -> 项目选项。创建一个名称为：mvcviewdemo 的mvc项目。

详细创建过程请参考：http://www.h3.com/asp.net_mvc/asp.net_mvc_getting_started.html

通过在解决方案资源管理器 中右键单击 controllers 文件夹来添加一个控件器：homecontroller。在弹出菜单项中选择：添加 -> 控制器 。

将在controllers文件夹中看到一个新的 c# 文件 -homecontroller.cs，x在visual studio中打开并进行编辑。修改更新homecontroller.cs文件中的代码，其中包含两个操作方法，如下面的代码所示。

using system;
using system.collections.generic;
using system.linq;

using system.web;
using system.web.mvc;

namespace mvcviewdemo.controllers {
   public class homecontroller : controller{
      // get: home
      public actionresult index(){
         return view();
      }

      public string mycontroller(){
         return "hi, i am a controller";
      }
   }
}

运行这个应用程序，打开浏览器访问：http://localhost:63461/home/mycontroller，将收到以下输出结果 -

由于mycontroller操作只是返回字符串，要从操作返回一个view，需要首先添加一个view。参考以下步骤 -

第1步： 在添加视图之前，添加另一个操作，它将返回一个默认视图。

using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.mvc;

namespace mvcviewdemo.controllers
{
    public class homecontroller : controller
    {
        // get: home
        public actionresult index()
        {
            return view();
        }

        public string mycontroller()
        {
            return "hi, i am a controller";
        }

        public actionresult myview()
        {
            return view();
        }
    }
}

运行这个应用程序，并在浏览器的url中添加http://localhost:63461/home/myview，然后按回车，将收到以下输出。

在这里看到有一个错误，这个错误实际上是相当具有描述性的，告诉我们它找不到myview视图。

第2步 - 要添加一个视图，右键单击myview动作(方法)并选择添加视图。如下图所示 -

它将显示“添加视图” 对话框，并将添加默认名称。

第3步 - 取消选中“使用布局页面”复选框，然后单击“添加”按钮。现在新建的这个视图内有默认的代码。如下所示 -

第4步 - 使用以下代码在此视图中添加一些文本。

@{
   layout = null;
}

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

   <body>
      <div>
         hi, i am a view
      </div>
   </body>

</html>

第5步 - 运行该应用程序，并将打开浏览器访问url：http://localhost:63461/home/myview，将收到以下输出。