Ajax functions are not executed

Question

Debugging comes in GetProducts.cshtml, executes foreach (Product p in Model) once(Picture-1), and then nothing happens.

Link project github.com

Product.cs

 namespace WebApplCore.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public decimal Price { get; set; }
        public int UnitsInStock { get; set; }

    }
}

ProductController.cs

 using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using WebApplCore.Models;

namespace WebApplCore.Controllers
{
    public class ProductController : Controller
    {
        List<Product> productList;

        public ProductController()
        {
            productList = new List<Product>
            {
                new Product {Id = 1, Name = "Name_1", Description = "Description_1", Price = 21, UnitsInStock = 31},
                new Product {Id = 2, Name = "Name_2", Description = "Description_2", Price = 22, UnitsInStock = 31},
                new Product {Id = 3, Name = "Name_3", Description = "Description_3", Price = 23, UnitsInStock = 33}
            };
        }

        public ActionResult Index()
        {

            var model = productList;

            return View(model);
        }

        public PartialViewResult GetProducts(string Name)
        {            
             var model = productList;

            return PartialView(model);
        }

    }
}

Index.cshtml

    @using WebApplCore.Models;

@model IEnumerable<Product>;

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<head>
    <link href="~/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

@{
    ViewBag.Title = "Products";
}

<h2>My Products</h2>

@*<body>
    <div class="container">*@
<table class="table table-sm table-hover table-striped">
    <thead class="thead-dark">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Description</th>
            <th>Price</th>
            <th>UnitsInStock</th>
        </tr>
    </thead>
    <tbody>
        @foreach (Product p in Model)
        {
            <tr>
                <td>@p.Id</td>
                <td>@p.Name</td>
                <td>@p.Description</td>
                <td>@p.Price</td>
                <td>@p.UnitsInStock</td>
            </tr>
        }
    </tbody>
</table>
@*</div>
    </body>*@
<div style="width:600px; margin-left:auto; margin-right:auto">
    <div style="background-color: lightgray">
        <h2>My Products</h2>
    </div><br />

    <p>
        Нажмите кнопку, чтобы получить продукты с помощью вызова Ajax<br />
        (Click the button to Get Products with an Ajax call)
    </p>

    <input id="btnAjax" name="btnAjax" type="button" value="Get Products" />
    <div id="products" style="background-color:lightskyblue"></div>
</div>
<script>
    $('#btnAjax').click(function () {
        $.ajax({
            url: '/Product/GetProducts',
            contentType: 'application/html; charset=utf-8',
            type: 'GET',
            dataType: 'html'

        })
            .success(function (result) {
                $('#products').html(result);
            })
            .error(function (xhr, status) {
                alert(status);
            })
    });
</script>

GetProducts.cshtml

@using WebApplCore.Models;    
@model IEnumerable<Product>;

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<head>
    <link href="~/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>

@{
    ViewBag.Title = "Products. Partial View";
}

<h2>My Products. Partial View</h2>

<table class="table table-sm table-hover table-striped">    
        <tr class="thead-dark">
            <th>ID</th>
            <th>Name</th>
            <th>Description</th>
            <th>Price</th>
            <th>UnitsInStock</th>
        </tr>

        @foreach (Product p in Model)
        {
            <tr>
                <td>@p.Id</td>
                <td>@p.Name</td>
                <td>@p.Description</td>
                <td>@p.Price</td>
                <td>@p.UnitsInStock</td>
            </tr>
        }    
</table>

Startup.cs

namespace WebApplCore
{
    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();

        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseRouting();
            app.UseStaticFiles();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Product}/{action=Index}/{id?}");
            });
        }
    }
}

Picture-1

Picture-2

Picture-3

score 1 · Accepted Answer · answered Jun 04 '20 at 05:53

Change success to done like below:

$('#btnAjax').click(function () {
    $.ajax({
        url: '/Product/GetProducts',
        contentType: 'application/html; charset=utf-8',
        type: 'GET',
        dataType: 'html'

    })
        .done(function (result) {
            $('#products').html(result);
        })
        .error(function (xhr, status) {
            alert(status);
        })
});

Result:

Reference:

jQuery.ajax handling continue responses: "success:" vs ".done"?

Ajax functions are not executed

1 Answers1