How To Render A PartialView On ButtonClick with Asp.Net Razor

Question

I am new to Jquery and creating partial views. I have a "Create Project" button where I am trying to make it so that if the user clicks it the page renders a partial view that contains a form post inside a where the user can input data and can execute OnPost() in the code behind the razor page.

Here is my 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>

This is the Button that I monitor onclick event with jquery:

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

Then On-Click I want the partial view to be rendered within this div:

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

Jquery that checks for on-click

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

Note: I have also tried: @Html.Raw(Url.Action("OnGetPartialProject")) instead of what is in the parameter for load() above.

Finally, this is the method where I try to render the partial view

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

I have tried to follow examples that use MVC and tried to manipulate it with Razor but I am unsure what to fix. I know that the Jquery isn't calling the handler method that is supposed to render the partial view because the breakpoint that I have placed there is never reached. Therefore it leaves me to believe that the Jquery is incorrect but am unsure why. If after fixing that would the rest of the syntax for calling a partial view that I have made here work for my scenario of loading that partial view into the with id="partial" ?

Nan Yu · Accepted Answer · 2019-10-01 06:18:04Z

0

Please try below steps :

Move _CreateProject.cshtml shared page to Shared folder inside Pages folder .

Assume you have Portfolio folder inside Pages folder , and have CreatePortfolio.cshtml page in it . Modify your jquery url to :

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

The OnGetPartialProject method will like :

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

answered Oct 1, 2019 at 6:18

Nan Yu

27.7k9 gold badges75 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dannyriv Over a year ago

I tried this but it did not work. When I click the button nothing happens. It never the handler method so it may be an issue with the button or the Jquery still?

dannyriv Over a year ago

I understand now that the syntax for Razor is a little different when it comes to this. I was able to make the button reach the handler by wrapping the button with a <form asp-page-handler="PartialProject" method="post">. This calls handler but Im not sure if it will fill the <div id="partial"> because I don't think the jQuery was called. Im now getting: ArgumentNullException: Value cannot be null. Parameter name: viewData because the partial view doesnt know of ProjectName, ProjectDescription, etc. Is there a way for me to display this form in the div so user can input their info and post?

Nan Yu Over a year ago

Not sure about your current scenario , you might provide more details .

Collectives™ on Stack Overflow

How To Render A PartialView On ButtonClick with Asp.Net Razor

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related