Question 185000 in ASP.NET Question posted in
The official documentation can be found here.

Load modal as partial view with asp.net only

I’m a new in asp.net and web in general and I would like to know if there is any way to load bootstrap modal using asp.net controllers only?

For example:

partial view html named /View/Project/Edit.cshtml:

@model Project

<div class="modal fade" id="editProject" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="editHeader"></h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form asp-controller="Project" asp-action="Edit" method="post">
                <div class="modal-body">
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-floating mb-3 mt-3">
                                <input asp-for="Code" type="text" class="form-control" placeholder="Project code">
                                <label asp-for="Code">Project code</label>
                                <span asp-validation-for="Code" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

Index html named /View/Project/Index.cshtml:

... table start here ...
<tbody class="table-group-divider">
    @foreach (Project project in Model)
    {
        <tr>
            <td>@project.Description</td>
            <td>@project.Code</td>
            <td>@project.CellAgeCode</td>
            <td>@project.Current</td>
            <td>@project.Time</td>
            <td>@project.Series</td>
            <td>@project.Parallel</td>
            <td>@project.CurrentQC</td>
            <td>@project.TimeQC</td>
            <td>@project.OcvMin.Value</td>
            <td>@project.CcvMin.Value</td>
            <td>@project.OcvQC</td>
            <td>@project.CcvQC</td>
            <td>@project.OcvMax.Value</td>
            <td>@project.CcvMax.Value</td>
            <td>@project.Factory</td>
            <td>
                <div class="btn-group btn-group-sm" role="group">
                    <a asp-controller="Project" asp-action="Edit" asp-route-id="@project.Id" class="btn-group-sm btn-outline-primary">
                        <i class="bi bi-pencil-square"></i>
                    </a>
                    <a asp-controller="Project" asp-action="Delete" asp-route-id="@project.Id" class="btn-group-sm btn-outline-danger">
                        <i class="bi bi-trash3"></i>
                    </a>
                </div>
            </td>
        </tr>
    }
</tbody>
... end of table ...

And the code from the controller that fire when click on the <a> tag inside the table:

[HttpGet]
public async Task<IActionResult> Edit(int id)
{
    IEnumerable<Project> projects = await Getter.GetProjects();
    Project? project = projects?.FirstOrDefault(x => x.Id == id);
    if (project == null)
    {
        return View("Index");
    }
    else
    {
        return PartialView("Edit", project);
    }
}

Is there any why to make the modal to show as popup without any JS or JQuery?
Thanks 🙂

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks for everyone for the help, I had to implement the following code in the site.js:

    const buttons = 'button[data-bs-toggle="win-modal"]';

$(function () {
    $(document).on('click', buttons, function () {
        var url = $(this).data('url');
        var decodeUrl = decodeURIComponent(url);
        $.get(decodeUrl).done(function (data) {
            PlaceHolder.html(data);
            PlaceHolder.find('.modal').modal('show');
        })
    });
});

  2. 0

    No..I dont think so..you can render your Partial View with ajax in your main view

    Login or Signup to reply.
  3. 0

    For example look at this

            $.ajax({
        type: "POST",
        data: {
           AnyThing you need
        },
        url: '....',
        success: function (response) {
        //This is your modal that you want to inject your partial in it
            $('#bodyModal').html(response);
            $('#sdpModal').modal('show');
        },
        error: function () {
            alert("An error has occured!!!");
        }

    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search