c# MVC 跳转页面

最新推荐文章于 2021-06-03 07:15:54 发布

原创最新推荐文章于 2021-06-03 07:15:54 发布 · 9.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#c# #mvc #跳转页面

c# web 专栏收录该内容

54 篇文章

订阅专栏

本文详细介绍了如何在Visual Studio中创建ASP.NET MVC4 WebApplication，并通过RouteConfig.cs文件配置默认路由。同时，展示了如何在Index.aspx和Add.aspx页面间进行跳转，包括使用JavaScript实现的跳转方式。

1）在VS中创建ASP.NET MVC 4 Web Application，在Project Template中选择Web API。

首先在Views\Home\中添加Add.aspx和Index.aspx

接下来我们将看的是系统默认首页Index.aspx和从Index.aspx跳转到Add.aspx

要看系统默认首页我们得看文件App_Start\RouteConfig.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace MvcApplication15
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
}

从这段代码中我相信有代码基础的你不难看出来系统启动后默认调用是controller = "Home", action = "Index"，

那我们就来看看Controllers\HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication15.Controllers
{
    public class HomeController : Controller
    {
        //对应Views\Home\Index.aspx
        public ActionResult Index()
        {
            return View();
        }
        //对应Views\Home\Add.aspx
        public ActionResult Add()
        {
            return View();
        }
    }
}

相信大家看到这段代码后恍然大悟，系统将调用Views\Home\Index.aspx页面（个人认为是通过系统文件名来联系的）。

接下来我们来看看是如何通过Javascript来跳转页面的下面是Views\Home|Index.aspx页面的代码：

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>Home Index</title>
    <script type="text/javascript" src="../../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //js跳转页面(/controller/action)
            $('#jsTest').click(function () {
                window.location.href = '/Home/Add';
            });
        });
    </script>
</head>
<body>
    <div>
        <%--html跳转(/controller/action)--%>
        <a href="/Home/Add">Home Add</a>
        <input id="jsTest" type="button" value="Home Add" />
    </div>
</body>
</html>

当单击<a>或者<input>系统将跳转到Controllers\HomeController.cs中的Add方法，然后再跳转到Views\Home\Add.aspx页面。