如何在样式文件及控制器与动作中创建独立的Html.PartialView

我来一步步教你实现独立的PartialView，涵盖控制器逻辑编写、视图创建以及样式/脚本的处理细节：

1. 编写控制器与对应Action #

首先在控制器中定义一个返回PartialView的Action，就像你给出的示例那样，逻辑很清晰：

public class RentCarController : Controller 
{ 
    public ActionResult Cars() 
    { 
        // 如果需要给视图传递模型数据，可以在这里准备，比如：
        // var carData = _carRepository.GetAvailableCars();
        // return PartialView("Cars", carData);
        
        return PartialView("Cars"); 
    } 
}

这个Action的核心作用就是返回指定的PartialView，要是需要传参，直接把模型对象作为参数传给PartialView()方法就行。

2. 创建PartialView视图（Cars.cshtml） #

接下来在Views/RentCar目录下创建对应的PartialView文件（如果想让这个视图全局可用，也可以放在Views/Shared目录）。你给出的代码里已经包含了依赖的样式和脚本，这里需要注意两个关键点：

• 如果这个PartialView只是嵌入到主视图中使用，可以把公共的样式/脚本移到主布局里，避免重复加载；
• 如果需要让它能独立访问（比如直接通过/RentCar/Cars打开），那必须包含所有依赖的样式和脚本，保证页面能正常渲染。

整理后的视图代码如下：

<!-- 引入依赖样式文件 -->
<link href="/eliteadmin-material/bootstrap3/dist/css/bootstrap3.min.css" rel="stylesheet">
<link href="/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css">

<!-- PartialView的核心HTML内容 -->
<div class="car-rental-section">
    <!-- 这里放你的租车功能相关HTML结构，比如车辆列表、日期选择器等 -->
    <input type="text" class="form-control datepicker" placeholder="选择取还车日期">
</div>

<!-- 引入依赖脚本并初始化功能 -->
<script src="/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script>
    $(function() {
        // 初始化日期选择器
        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true
        });
    });
</script>

3. 在主视图中调用PartialView #

有两种常用的调用方式，根据你的需求选择：

方式一：通过Action调用（会执行控制器逻辑） #

使用Html.Action()方法，它会先执行RentCarController中的Cars Action，再渲染返回的PartialView，适合需要先处理业务逻辑再渲染的场景：

@Html.Action("Cars", "RentCar")

方式二：直接渲染视图（不经过控制器Action） #

如果不需要执行控制器的逻辑，直接渲染PartialView文件即可，适合静态内容或者已经提前准备好数据的场景：

@Html.Partial("~/Views/RentCar/Cars.cshtml")
<!-- 若视图在Shared目录，可简化为：@Html.Partial("Cars") -->

额外实用提示 #

• 为了避免路径错误，建议使用Url.Content()生成资源路径，适配不同部署环境：

  <link href="@Url.Content("~/eliteadmin-material/bootstrap3/dist/css/bootstrap3.min.css")" rel="stylesheet">
  <script src="@Url.Content("~/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js")"></script>
  

• 如果担心重复加载样式/脚本，可以使用@section或者ASP.NET的Bundle机制来统一管理资源，减少冲突。
• 要是需要让PartialView能独立访问，可以给Action添加[HttpGet]特性，确保通过URL能直接打开。

内容的提问来源于stack exchange，提问作者ynsbldk