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

First of all - I'm very new to c# and MVC .net core, etc. so I'm having difficulty understanding how basic things work. I have a view with Html.BeginForm which fills the model's properties on Click and calls a function from the controller which validates the properties that were set in the BeginForm. I would like the controller function to return a partial view which will appear as a pop-up on the ParentView which called the controller (it would be different popups based on the validation). Is there a way to do this? So far I have something like this:

Controller:

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);
}

Parent View:

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

PartialViewA:

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

PartialViewB:

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

As I mentioned above, I'd like the partial views to appear as popups on the parent view as opposed to just presenting the partial views themselves (which is what I have at the moment). TIA!!

CodePudding user response：

You can use ajax to request the partial view, then render it in modal with bootstrap. Here is the view.

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

Here is the action CalledFromParentView.

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

It should provide a form in 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>
}

And the result.