通过 ASP.NET MVC Core 3.1 中的 jQuery 附加 html 以获取部分视图的问题

Question

I seem to be unable to find an answer to this issue, so here it is:

I created an ASP.NET MVC Core 3.1 Entity Framework Code-First Migrations application. In the Create view for one of the entities, I render a Partial View that I created:

        <div class="container" id="Things">
            <partial name="_CreateThingPartial" for="Things[0]" />
        </div>

This renders just fine.

I want to append another rendering of the same partial view in that container with the click of a button. Here is my current jQuery:

var y = 0;

    $('#addThing').click(function () {
        y = y + 1;
        var newDiv = '<partial name="_CreateThingPartial" for="Things[' + y + ']" />';
        $('#Things').append(newDiv);
    });

But with this, clicking the button is doing nothing, and I can't figure out why.

If I simply add that html line in the view, like this:

        <div class="container" id="Things">
            <partial name="_CreateThingPartial" for="Things[0]" />
            <partial name="_CreateThingPartial" for="Things[1]" />
        </div>

That renders fine.

If I set the newDiv like this:

var newDiv = '<input type="button" value=' + y + ' />';

That works fine!

So it seems to only be an issue with the use of the partial view via jQuery.

Answer 1

partial is not a html tag but is related to how the .net razor template renders a partial view. So the actual HTML renderd on the page will not be partial but the content of the partial file _CreateThingPartial.

However when you modify the page with jQuery it is done in the frontend and the backend logic of your razor template will not be known. So when you try and add a tag called partial it will not be allowed because in the frontend that is not a valid tag.

To get a better understanding of how the .net razor template renders to the frontend i would sugest you open the view source or inspection page.

Answer 2

<partial> is not a HTML tag. it's a server-side tag helper defined by .NET Core.

Consider your Things entities. It's stored in the database. Unless you render all the entities in your.cshtml file, you can't have them in client side without sending additional requests to your server.

<partial> tag helper is executed when rendering the resultant HTML markup at the server , while jQuery is executed at the client (eg browser). That's why you cannot simply put the <partial> inside your jQuery and get the data you want.

Possible solution

The following code snippets show you the idea on how to handle this problem. Copy-and-paste directly does not work. You have to understand the concept and do some google search in order to make it works.

You can define a partial action in your controller:

public ActionResult GetThingPartial (int id)
{
    /* get Thing[id] from database using EF Core */
    var videModel = Thing[id];
    return PartialView( "_CreateThingPartial", viewModel );
}

Fetch the partial result using jQuery's ajax call.

In your.cshtml file:

var url = '@Url.Action("GetThingPartial", "YourControllerName")';

$.get(url, function(data) {
    /* append the data, which should be the partial HTML, to the corresponding <div> */
});

This article may also helpful to solve the problem you met: https://www.c-sharpcorner.com/uploadfile/manas1/sending-partialview-using-jquery-ajax-request-in-asp-net-mvc/