Как визуализировать PartialView на ButtonClick с Asp.Net Razor

Question

Я новичок в Jquery и создаю частичные представления. У меня есть кнопка «Создать проект», где я пытаюсь сделать так, чтобы, если пользователь щелкает по ней, страница отображала частичное представление, содержащее сообщение формы внутри, где пользователь может вводить данные и выполнять OnPost () в коде. за бритвой.

Вот мой PartialView: _CreateProject.cshtml

@page
@model Visportfolio.Pages.CreatePortfolioModel
@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@


    <form enctype="multipart/form-data" method="post" id="partial">


        <label asp-for="Category">Category:  </label>
        <select asp-for="Category" asp-items="Model.categorylist">
            <option value="">---Select Category---</option>
        </select>


        <label asp-for="SubCategoryId">Subcategory:</label>
        <select asp-for="SubCategoryId"><option value="">---Select Subcategory---</option></select>

        <div class="row">
            <div class="col-md-4">
                <label asp-for="ProjectName"></label>
                <input asp-for="ProjectName" class="form-control" />
                <span class="alert-danger" asp-validation-for="ProjectName"></span>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4">
                <label asp-for="ProjectDescription"></label>
                <input asp-for="ProjectDescription" class="form-control" />
            </div>
        </div>

        <div class="for-group-row">
            <label asp-for="FileUpload" class="col-sm-2 col-form-label"></label>
            <div class="col-md-4">
                <div class="custom-file">
                    <input asp-for="FileUpload" class="form-control custom-file-input" />
                    <label class="custom-file-label">Choose File</label>
                </div>
            </div>
        </div>

        <div class="form-group row">
            <div class="col-sm-10">
                <button type="submit" class="btn btn-primary">Create</button>
            </div>
        </div>
    </form>

Это кнопка , которую я наблюдаю за событием onclick с помощью jquery:

<button class="btn btn-default" id="call_partial">New Project</button>

Затем При нажатии Я хочу, чтобы частичное представление было отображено в этом div:

<div id="partial">
        //the form post from partial here
</div>

Jquery , который проверяет наличие нажатия

$('#call_partial').click(function () {
                        $('#partial').load("~/Pages/Portfolio/CreatePortfolio/OnGetPartialProject");
                    });

Примечание. Я также попытался: @ Html.Raw (Url.Action ("OnGetPartialProject")) вместо того, что указано в параметре для load () выше.

НаконецЭто метод, при котором я пытаюсь визуализировать частичное представление

public IActionResult OnGetPartialProject()
        {
            return Partial("~/Pages/Portfolio/_CreateProject.cshtml");
        }

Я пытался следовать примерам, использующим MVC, и пытался манипулировать им с помощью Razor, но я не уверен, что исправить. Я знаю, что Jquery не вызывает метод-обработчик, который должен визуализировать частичное представление, потому что точка останова, которую я там установил, никогда не достигается. Поэтому мне остается верить, что Jquery неверен, но я не уверен, почему. Если после исправления этого оставшаяся часть синтаксиса для вызова частичного представления, которую я здесь сделал, будет работать для моего сценария загрузки этого частичного представления в with id = "partal "?

Answer 1

Пожалуйста, попробуйте выполнить следующие действия:

1. Переместить _CreateProject.cshtml общую страницу в папку Shared внутри папки Pages.

2. Предположиму вас есть папка Portfolio внутри папки Pages и страница CreatePortfolio.cshtml. Измените ваш jquery url:

   $('#call_partial').click(function () {
       $('#partial').load("/Portfolio/CreatePortfolio?handler=PartialProject");
               });
   

   Метод OnGetPartialProject будет выглядеть так:

   public IActionResult OnGetPartialProject()
   {
       return Partial("_CreateProject");
   }