Question

我在asp.net核心的一个页面结帐系统上工作我正在使用部分视图，当然我不能在下面使用，但是我想加载部分视图按钮点击结帐它将显示第2阶段等并隐藏第1阶段。我之前没有提出任何问题，但我使用的是新的asp.net核心，并且想知道它的最佳实践是什么。

@ Html.Partial（ “_ checkoutStage1.cshtml”）;

@ Html.Partial（“_ checkoutStage2.cshtml”）;

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

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

it = m_GameObjects.erase(it, m_GameObjects.end());

我的按钮

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

我的控制器在我的篮子控制器中。我有另一个问题，你可以将部分视图移动到另一个目录，或者〜/ views / basket / _ underscore为部分视图的正确命名约定加上前缀。

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

布局页面的负责人

public ActionResult LoadStage2(string searchText)
 {

        return PartialView("~/Views/Basket/_checkoutStage2.cshtml");
 }

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

我的Index.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>

完整的播放

@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>

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

<!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>

Answer 1

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

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

您可以在行

上设置断点

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

并查看响应是否包含任何内容。大概他们应该是HTML。

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

加载部分视图asp.net核心

1 个答案: