Question

我目前正在使用表单进行一些测试。单击提交后，我试图将所选值显示在同一页面上。因此，如果单击提交，则所选值将直接显示在下面。但是当前单击提交时，我将被引导到空白页面，并显示所选值。如何使输出显示在同一页面上？

型号：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace PAM_Dashboard_Project.Models
{
    public class Vaults
    {
         public string Envs { get; set; }
    }

    public enum Envs
    {
         RTPprod,
         OMA,
         BG1,
         BG2,
         Cloud,
         Workstation,
         QA
    }
}

查看：

<form asp-controller="CyberArk" asp-action="CyberArk" method="post" role="form" onsubmit="return confirm('Do you really want to carry out this action?');" id="form1" style="display:none;">
  @* Form 1 *@
  <form asp-controller="CyberArk" asp-action="CyberArk" method="post" role="form" onsubmit="return confirm('Do you really want to carry out this action?');" id="form1" style="display:none;">
        <div id="accordion" role="tablist" aria-multiselectable="true">
            <div class="card">
                <div class="card-header" role="tab" id="headingTwo">
                    <h5 class="mb-0">
                        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:15px;">
                            Vault Status
                        </a>
                    </h5>
                </div>
                <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
                    <div class="card-block">
                        <div class="form-group">
                            <div class="form-group">

                                <p>  This script returns status of vault servers for the chosen environment. It is used to determine if any servers overlap in order to detect a split brain.</p>
                            </div>
                            @model PAM_Dashboard_Project.Models.Vaults
                            @Html.DropDownList("Envs", new SelectList(Enum.GetValues(typeof(Envs))), "Select Enivronment", new { @class = "form-control" })





                            &nbsp;
                            <button type="submit">Submit</button>
                            &nbsp;
                        </div>
                        &nbsp;
                    </div>
                </div>
            </div>
</form>

控制器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using PAM_Dashboard_Project.Models;

namespace PAM_Dashboard_Project.Controllers
{
    public class CyberArkController : Controller
    {
        public IActionResult CyberArk()
        {
            return View();
        }

        [HttpPost]
        public string CyberArk(Vaults newVault)
        {
             string SelectedValue = newVault.Envs;
             return(SelectedValue);
        }
    }
}

Answer 1

您的控制器我的朋友：

public class Vaults
{
    public string Envs { get; set; }
}

public enum Envs
{
    RTPprod,
    OMA,
    BG1,
    BG2,
    Cloud,
    Workstation,
    QA
}

public class PassValue
{
    public string passValue { get; set; }
}

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult Tut112(PassValue passVal)
    {
        return Json(new
        {
            RetVal = passVal.passValue
        }
        , @"application/json");
    }

    public ActionResult Tut112()
    {
        return View();
    }

您的视图：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Tut112</title>
    <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#ajaxButton").click(function () {
                var SendData = { passValue: $("#passValue").val() };

                $.ajax({
                    type: "POST",
                    url: '/Home/Tut112',
                    data: SendData,
                    dataType: "json",
                    success: function (data) {
                        $("#stackDataHere").append('<div>' + data.RetVal + "</div>");
                    }
                });
            })
        })
    </script>
</head>
<body>
    @*<form asp-controller="CyberArk" asp-action="CyberArk" method="post" role="form"
        onsubmit="return confirm('Do you really want to carry out this action?');" id="form1" style="display:none;">*@
    @using (Html.BeginForm())
    {
        @* Form 1 *@
        @*<form asp-controller="CyberArk" asp-action="CyberArk" method="post" role="form"
            onsubmit="return confirm('Do you really want to carry out this action?');" id="form1" style="display:none;">*@
        using (Html.BeginForm())
        {
            <div id="accordion" role="tablist" aria-multiselectable="true">
                <div class="card">
                    <div class="card-header" role="tab" id="headingTwo">
                        <h5 class="mb-0">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:15px;">
                                Vault Status
                            </a>
                        </h5>
                    </div>
                    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="card-block">
                            <div class="form-group">
                                <div class="form-group">
                                    <p>  This script returns status of vault servers for the chosen environment. It is used to determine if any servers overlap in order to detect a split brain.</p>
                                </div>
                                @model Testy20161006.Controllers.Vaults
                                @Html.DropDownList("Envs", new SelectList(Enum.GetValues(typeof(Testy20161006.Controllers.Envs))), "Select Enivronment", new { id = "passValue", @class = "form-control" })
                                &nbsp;
                                @*<button type="submit">Submit</button>*@
                                <input type="button" id="ajaxButton" value="Submit" />
                                &nbsp;
                                <div id="stackDataHere"></div>
                            </div>
                            &nbsp;
                        </div>
                    </div>
                </div>
            </div>
            @*</form>*@
        }
        @*</form>*@
    }
</body>
</html>

ASP.NET MVC在同一页面上显示输出

1 个答案: