加载局部视图 asp.net core答案

【问题标题】：Load a partial view asp.net core加载局部视图 asp.net core
【发布时间】：2017-07-21 22:09:22
【问题描述】：

我正在使用 asp.net 核心中的一页结帐系统我正在为每个阶段使用部分视图当然我不你可以只在下面使用，但我想在按钮单击时加载部分视图结帐它将显示第 2 阶段等并隐藏第 1 阶段。我之前可能没有问过这个问题，但我正在使用新的 asp.net 核心，并且想知道它的最佳实践是什么。

@Html.Partial("_checkoutStage1.cshtml");

@Html.Partial("_checkoutStage2.cshtml") ;

这将呈现一个部分视图，但我想要能够做的是单击一个按钮以显示第二阶段。

我找到了一些 javascript，并在我的主视图中尝试了它

<script type="text/javascript">
$("#loadPartialView").click(function () {
    $.get('@Url.Action("LoadStage2", "Basket")', {}, function (response) {
        $("#Display").html(response);
    });
});
</script>

我的按钮

<button id="search"  class="btn btn-success">Checkout <span class="glyphicon glyphicon-play"></span> 
</button>

我的控制器在我的篮子控制器中。我还有一个问题，您能否将部分视图移动到另一个目录，或者 ~/views/basket/ _ 下划线前缀是部分视图的正确命名约定。

public ActionResult LoadStage2(string searchText)
 {
  
        return PartialView("~/Views/Basket/_checkoutStage2.cshtml");
 }

我的布局页面的头部

<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
     
</head>

有人可以帮我解决这个我们不希望页面刷新的obv，所以我需要在按钮点击时将它放在一个div中。

基于购物篮布局的我的 Index.cshtml

@model List<solitudedccore.models.basket.basketlines>
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_BasketLayout.cshtml";
}

<head>
     
    <script type="text/javascript">
        $("#checkout").click(function () {
    $.get('@Url.Action("LoadStage2", "Basket")', {}, function (response) {
        $("#Display").html(response);
    });
});
    </script>


</head>

@Html.Partial("_checkoutStage1.cshtml");


<div  id="Display"></div>

完整的篮子布局

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.css" />
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    </environment>
    <script>

  
    </script>
</head>
<body>
 
  
        @RenderBody()
 
</body>
</html>

结帐阶段 1 包含我想从中加载阶段 2 的按钮，这可能是我对来自 15 年网络表单的页面周期的误解。

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-10 col-md-offset-1">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Quantity</th>
                        <th class="text-center">Price</th>
                        <th class="text-center">Total</th>
                        <th> </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="col-sm-8 col-md-6">
                            <div class="media">
                                <a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a>
                                <div class="media-body">
                                    <h4 class="media-heading"><a href="#">Product name</a></h4>
                                    <h5 class="media-heading"> by <a href="#">Brand name</a></h5>
                                    <span>Status: </span><span class="text-success"><strong>In Stock</strong></span>
                                </div>
                            </div>
                        </td>
                        <td class="col-sm-1 col-md-1" style="text-align: center">
                            <input type="email" class="form-control" id="exampleInputEmail1" value="3">
                        </td>
                        <td class="col-sm-1 col-md-1 text-center"><strong>$4.87</strong></td>
                        <td class="col-sm-1 col-md-1 text-center"><strong>$14.61</strong></td>
                        <td class="col-sm-1 col-md-1">
                            <button type="button" class="btn btn-danger">
                                <span class="glyphicon glyphicon-remove"></span> Remove
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td class="col-md-6">
                            <div class="media">
                                <a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a>
                                <div class="media-body">
                                    <h4 class="media-heading"><a href="#">Product name</a></h4>
                                    <h5 class="media-heading"> by <a href="#">Brand name</a></h5>
                                    <span>Status: </span><span class="text-warning"><strong>Leaves warehouse in 2 - 3 weeks</strong></span>
                                </div>
                            </div>
                        </td>
                        <td class="col-md-1" style="text-align: center">
                            <input type="email" class="form-control" id="exampleInputEmail1" value="2">
                        </td>
                        <td class="col-md-1 text-center"><strong>$4.99</strong></td>
                        <td class="col-md-1 text-center"><strong>$9.98</strong></td>
                        <td class="col-md-1">
                            <button type="button" class="btn btn-danger">
                                <span class="glyphicon glyphicon-remove"></span> Remove
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>   </td>
                        <td>   </td>
                        <td>   </td>
                        <td><h5>Subtotal</h5></td>
                        <td class="text-right"><h5><strong>$24.59</strong></h5></td>
                    </tr>
                    <tr>
                        <td>   </td>
                        <td>   </td>
                        <td>   </td>
                        <td><h5>Estimated shipping</h5></td>
                        <td class="text-right"><h5><strong>$6.94</strong></h5></td>
                    </tr>
                    <tr>
                        <td>   </td>
                        <td>   </td>
                        <td>   </td>
                        <td><h3>Total</h3></td>
                        <td class="text-right"><h3><strong>$31.53</strong></h3></td>
                    </tr>
                    <tr>
                        <td>   </td>
                        <td>   </td>
                        <td>   </td>
                        <td>
                            <button type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-shopping-cart"></span> Continue Shopping
                            </button>
                        </td>
                        <td>
                            

                            <button id="checkout"  class="btn btn-success">Checkout <span class="glyphicon glyphicon-play"></span> 
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div id="detailsDiv" class="detailsDiv"></div>

【问题讨论】：

标签： asp.net asp.net-mvc asp.net-core

【解决方案1】：

乍一看，如果您想通过单击按钮来显示第 2 阶段，则您的单击侦听器需要绑定到 $('#search') 按钮。在您的代码中，您将单击事件绑定到 $('#loadPartialView')，您不会在任何地方显示该事件。

您还需要进行一些调试才能准确了解问题出在哪里。您已经发布了一些代码，但您没有说明当前代码到底发生了什么。部分视图是否通过get成功返回？点击监听器是否触发？

你可以在行上放一个断点

$("#Display").html(response);

并查看响应是否有任何内容。大概它们应该是 HTML。

关于您关于局部视图命名约定的第二个问题。通常，如果跨控制器使用局部视图，我将其放在 /Shared 中。但是，如果它只在一个控制器中使用（看起来像你的情况），将部分放在控制器文件夹中就可以了。是的，_ 是命名部分的正确约定。

【讨论】：

我试过了，但运气不好，由于某种原因，我什至不能在那条线上设置刹车点，因为我正在运行 2017 社区我在上次编辑中包含了更多我的文件，看看是否可以指出问题