Razor Core 2.2：将 cshtml 元素设置为变量

Question

In my view, I want to assign a partial view to a variable that I can then use in a javascript function. Is there a good way to do this?

so, I want to do something like:

var foo = <partial name="_partial.cshtml"/>

then I could use foo later, like:

<script>
    $("#button").on("click", () => $("#table tbody").append(@foo));
</script>

Answer 1

You can save your partial in a c# variable and get this when you click the button.

C#:

@{
  IHtmlString partialView = Html.Partial("yourview", yourmodel);
}

Javascript:

<script>
    var partialView = `@partialView`;
    $("#button").on("click", () => $("#table tbody").append(partialView));
</script>

Answer 2

You could return PartialView from the controller and show it in the success function of ajax, the below is a simple demo that you could refer to:

Product Model:

 public class Product
{
    public int Id { get; set; }
    public string  Name { get; set; }
    public int Price { get; set; }
}

The main View:

@model IEnumerable<Product>

<table class="table">
<thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Price)
        </th>
        <th></th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)
            </td>
            <td>
                <button class="btnAdd" onclick="GetProduct(@item.Id)">Add To Cart</button>
            </td>
        </tr>
    }
</tbody>
</table>

<div>
  <label>ProductCart</label>
  <table id="table">
    <thead>
        <tr>
            <th>
                Name
            </th>
            <th>
                Price
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>


@section Scripts
{
<script type="text/javascript">
    function GetProduct(id) {
        $.ajax({
            type: "get",
            url: "/home/getpartial?id="+id,
            success: function (result) {
                console.log(result);
                $("#table tbody").append(result);
            }
        });
    }
</script>
}

PartialView:

@model Product
<tr>
  <td>
     @Html.DisplayFor(model => model.Name)
  </td>
  <td>
     @Html.DisplayFor(model => model.Price)
  </td>
</tr>

Controller:

public async Task<IActionResult> Products()
    {
        var products =await  _context.Products.ToListAsync();
        return View(products);
    }

    public IActionResult GetPartial(int id)
    {
        var model = _context.Products.Find(id);
        return PartialView("_ItemPartial", model);
    }

Result: