通过部分视图提交

Question

我有一个作为表格的部分视图，它将通过主视图中的下拉选择进行刷新。 此下拉列表包括公司名称。 在下表中，与每家公司有关的信息事项，并且对于此信息的每一行，都有一个下拉列表，其中列出了我可以使用该行执行的所有功能（例如删除或修改信息），并带有弹出模式.

如何在主 Model 中调用方法或提交内容？ 或者我可以在我的案例中使用 Model 创建一个局部视图吗？

这是我的主要观点：

@page
@model Fachinformationsdienst_Kundenportal.Pages.Information_listModel
@{
}

<form>
    <div class="form-row align-items-center">
        <div class="form-group col-md-4">
            <label for="inputState">Wählen Sie eine Unternehmen aus</label>
            <select id="inputState" class="form-control">
                @for (int i = 0; i < Model.companies.Count; i++)
                {
                    <option>@Model.companies[i].FirmenKurzBezeichnung</option>
                }
            </select>
        </div>
        <div class="form-group col-md-6">
            <input class="form-control" id="myInput" type="text" style="margin-top: 31px;" placeholder="Suche...">
        </div>
        <div class="form-group col-md-2">
            <button type="button" class="btn btn-primary" style="margin-top: 31px;">
                <i class="fas fa-plus"></i>
            </button>
        </div>
    </div>
</form>
<div id="fachinfoContainer">
    <partial name="_FachinfoPartial" model="@Model.myViewModel" />
</div>
@section Scripts{
    <script type="text/javascript">
        $(function () {
            $("#inputState").change(function () {
                var selectcompany = "";
                if ($(this).val() != "Wählen Sie die Firma aus...") {
                    selectcompany = $(this).val();
                }
                $.ajax({
                    url: "/Actions/Information-List?handler=fachinfoPartial",
                    type: "Get",
                    data: { company: selectcompany },
                    success: function (result) {
                        $("#fachinfoContainer").html(""); //clear the fachinfo container.
                        $("#fachinfoContainer").html(result); //populate the container.
                    },
                    error: function (result) {
                        alert(result);
                    }
                });
            });
        });
    </script>
}

这是我的部分视图

@model Fachinformationsdienst_Kundenportal.Models.MyViewModel
<table class="table table-striped" id="FachinfoTable">
    <thead>
        <tr>
            <th scope="col">Nr.</th>
            <th scope="col">Name</th>
            <th scope="col">Status</th>
            <th scope="col">Letzte Änderung</th>
            <th scope="col">Aktuelle Version</th>
            <th scope="col">Auftrag</th>
        </tr>
    </thead>
    <tbody id="myTable">
        @if (@Model.Fachinfos != null)
        {
            @for (int i = 0; i < @Model.Fachinfos.Count; i++)
            {
                <tr>
                    <th scope="row">@Model.Fachinfos[i].FachinfoNummer</th>
                    <td>@Model.Fachinfos[i].FachinfoName</td>
                    <td>@Model.Fachinfos[i].Status</td>
                    <td>@Model.Fachinfos[i].Datum</td>
                    <td>@Model.Fachinfos[i].PdfVersion</td>
                    <td>
                        <div class="dropdown">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                @for (int c = 0; c < @Model.SelectedCompany.Permissions.Count; c++)
                                {
                                    if (Model.SelectedCompany.Permissions[c] != Models.Company.Permission.ERSTERFASSEN && Model.SelectedCompany.Permissions[c] != Models.Company.Permission.ABFRAGEN)
                                    {
                                        <a class="dropdown-item" data-toggle="modal" data-number="@Model.Fachinfos[i].FachinfoNummer" data-version="@Model.Fachinfos[i].PdfVersion" data-target="#@Model.SelectedCompany.Permissions[c]">@Model.SelectedCompany.Permissions[c]</a>
                                    }
                                }
                            </div>
                        </div>
                    </td>
                </tr>
            }
        }
    </tbody>
</table>
<!-- The Delete Modal -->
<div class="modal fade" id="@Models.Company.Permission.LOESCHEN">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Bestätigen</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <span id="deletMessege">Sind Sie sicher, dass Sie diese Fachinformation löschen möchten?</span>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button id="confirm" type="submit" class="btn btn-primary">Senden</button>
            </div>
        </div>
    </div>
</div>
<script>

 $('#@Models.Company.Permission.LOESCHEN').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var fiNumber = button.data('number') // Extract info from data-* attributes
        var modal = $(this)
        modal.find('.modal-title').text('Fachinfonummer ' + fiNumber)
    })
</script>

这是我的主要 model

using Fachinformationsdienst_Kundenportal.Classes;
using Fachinformationsdienst_Kundenportal.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;

namespace Fachinformationsdienst_Kundenportal.Pages
{
    public class Information_listModel : PageModel
    {
        public List<Company> companies { get; set; }
        public List<Fachinfo> fachinfos = new List<Fachinfo>();
        public MyViewModel myViewModel = new MyViewModel();

        public void OnGet()
        {
            companies = APIRequester.GetCompanies(User.Identity.Name);
            foreach (var company in companies)
            {
                fachinfos.AddRange(APIRequester.GetFachinfos(company.FirmenKurzBezeichnung));
            }
        }

        public PartialViewResult OnGetFachinfoPartial(string company)
        {
            //based on the selctedcompany to filter data, then return to the partial view.
            companies = APIRequester.GetCompanies(User.Identity.Name);
            myViewModel = new MyViewModel()
            {
                SelectedCompany = companies.Find(r => r.FirmenKurzBezeichnung == company),  //get the company object here
                Fachinfos = APIRequester.GetFachinfos(company)
            };

            return Partial("_FachinfoPartial", myViewModel);
        }
        
        //Submit this Method from Partial view
        public IActionResult onDelete(string fiNumber)
        {
            return Page();
        }
    }
}

Answer 1

您可以使用 JQUERY AJAX 调用此

$.ajax({
    type: "POST",
    url: '/Information_listModel?handler=Ondelete', 
    contentType: "application/json; charset=utf-8",
    dataType: "json"
}).done(function (data) {
    console.log(data.result);
})

你的方法应该返回类型IActionResult