在调用它的视图上将部分视图显示为弹出窗口

Question

首先 - 我对 c# 和 MVC .net 核心等非常陌生，所以我很难理解基本的工作原理。我有一个 Html.BeginForm 的视图，它在单击时填充模型的属性，并从控制器调用一个函数，该函数验证在 BeginForm 中设置的属性。我希望控制器函数 return 一个局部视图，它将作为弹出窗口出现在调用控制器的 ParentView 上（根据验证，它会是不同的弹出窗口）。有没有办法做到这一点？到目前为止，我有这样的东西：

控制器：

PartialView CalledFromParentView(MyModel model)
{
  //validate model properites
  //..
  if (model.isValid)
  {
    return PartialView("PartialViewA, model);
  }
   else
   {
    return PartialView("PartialViewB, model);
   }
}

ActionResult CancelFromPartialViewA(MyModel model)
{
  return View("ParentView", model);
}

ActionResult SubmitFromPartialViewA(MyModel model)
{
  model.UpdateDB();
  return View("SomeHomePage");
}

ActionResult OKFromPartialViewB(MyModel model)
{
  return View("ParentView", model);
}

父视图：

@model myModel


<html>
<body>
    @using (Html.BeginForm("CalledFromParentView", "ControllerName", FormMethod.Post))
    {
        <h1> first model propery</h1>
        @Html.TextBoxFor(model => model.FirstProperty)
        <h1> second model proper</h1>
        @Html.TextBoxFor(model => model.SecondProperty)
        // etc.
        <p>
            <button type="submit"> submit properties</button>
        </p>
    }
    
</body>

</html>

局部视图A：

@model myModel


<html>
<body>
<p> model properties are valid. Are you sure you want to submit the information?</p>
<input type="button"
    value="submit"
    onclick="location.href='<%: Url.Action("SubmitFromPartialViewA", "controllerName") %>'"/>

<input type="button"
    value="cancel"
    onclick="location.href='<%: Url.Action("CancelFromPartialViewA", "controllerName") %>'"/>
</body>

</html>

局部视图B：

@model MyModel

<html>
<body>
<p>The model properties are invalid please fix the following information:</p>
// will list models invalid properties
<input type="button"
         value="OK"
         onclick="location.href='<%: Url.Action("OKFromPartialViewB", "ControllerName") %>'" />
</body>
</html>

正如我上面提到的，我希望分部视图在父视图上显示为弹出窗口，而不是仅显示分部视图本身（这是我目前所拥有的）。 TIA!!

Answer 1

您可以使用 ajax 请求局部视图，然后使用 bootstrap 以模式呈现它。这是视图。

@model MyModel
@using (Html.BeginForm("CalledFromParentView", "home", FormMethod.Post))
{
    <h1> first model propery</h1>
    @Html.TextBoxFor(model => model.FirstProperty)
    <h1> second model proper</h1>
    @Html.TextBoxFor(model => model.SecondProperty)
    @*// etc.*@
    <p>
        <button type="submit" data-toggle="modal" data-target="#exampleModalLong"> submit properties</button>
    </p>
}

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                
            </div>
            
        </div>
    </div>
</div>
@section Scripts{
    <script>
        $("form").submit(function (e) {
            e.preventDefault()
            console.log($(this).serialize())
            $.ajax({
                url: '@Url.Action("CalledFromParentView", "home")',
                data: $(this).serialize(),
                success: function (data) {
                    $('.modal-body').html(data)
                    $('#exampleModalLong').show();
                },
                error: function (err) {

                }
            })
        });
    </script>
}

这是操作 CalledFromParentView。

public ActionResult CalledFromParentView(MyModel model)
    {
        
        if (ModelState.IsValid)
        {
            return PartialView("PartialViewA", model);
        }
        else
        {
            return PartialView("PartialViewB", model);
        }
    }

它应该在 PartialViewA 中提供一个表单：

@model MyModel

<p> model properties are valid. Are you sure you want to submit the information?</p>

@using (Html.BeginForm("SubmitFromPartialViewA", "home", FormMethod.Post))
{
  <h1> first model propery</h1>
  @Html.TextBoxFor(model => model.FirstProperty)
  <h1> second model proper</h1>
  @Html.TextBoxFor(model => model.SecondProperty)
  @*// etc.*@
  <p>
  <button type="submit" data-toggle="modal" data-target="#exampleModalLong"> submit</button>

  <button type="button"  data-dismiss="modal" aria-label="Close">
    cancel
  </button>
  </p>
}

结果。

在调用它的视图上将部分视图显示为弹出窗口

show a partial view as a popup on the view it was called from

c#

razor

asp.net-mvc-3

asp.net-core-mvc

asp.net-core