display url slug instead of id in asp.net core 2.2

Question

actually I can not want to visible my id when I was something delete.so I want to slug here.but can not understand how I modify or convert id to slug type. here is my code:

startup.cs

            app.UseMvc(routes =>
            {
                routes.MapRoute(
                  name: "areas",
                  template: "{area=Customer}/{controller=Home}/{action=Index}/{id?}"
                );
            });

    [HttpGet]
        public ActionResult Delete(int? id)
        {
            if (id == null)
            {
                NotFound();
            }

            var product = _db.Spray.Include(c => c.ProductTypes).FirstOrDefault(c => c.Id == id);
            if (product == null)
            {
                return NotFound();
            }
            return View(product);
        }



        [HttpPost]
        [ActionName("Delete")]      //DeleteConfirm nam ke delete namei chinbo




        public async Task<IActionResult> DeleteConfirm(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }
            var product = _db.Spray.FirstOrDefault(c => c.Id == id);
            if (product == null)
            {
                return NotFound();
            }
            _db.Spray.Remove(product);
            await _db.SaveChangesAsync();

            return RedirectToAction(nameof(Index));
        }
    }
}

Delete.cshtml

form asp-action="Delete" method="post" enctype="multipart/form-data">
    <div class="p-4 rounded border-row">
        <div asp-validation-summary="ModelOnly" class="text-danger">

        </div>

        <div>

            <div class="col-8">



                <div class="form-group row">
                    <div class="col-4">
                        <label asp-for="Name"></label>
                    </div>
                    <div class="col-8">
                        <input type="hidden" asp-for="Id" />
                        <input asp-for="Name" readonly="readonly" class="form-control" />
                    </div>
                    <span asp-validation-for="Name" class="text-danger"></span>
                </div>

I have no idea to add how to add slug. I don't want to see my visible id for that I tried to make its slug. but I don't understand actually how to take process. I am beginner, please help anyone.

Answer 1

It seems you want to make id unvisible in the url, the simple way is to change Delete action to the post type.

Index.cshtml:

<table class="table">
<thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
    </tr>
</thead>
<tbody>
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            <form method="post" asp-action="Delete" asp-controller="Sprays">
                <input type="hidden" value="@item.Id" name="id" />
                <input type="submit" value="Delete" />
           </form>
        </td>
    </tr>
}
    </tbody>
</table>

Controller:

[HttpPost]
public ActionResult Delete(int? id)
{
     //..
}

[HttpPost]
//[ActionName("Delete")]    
public async Task<IActionResult> DeleteConfirm(int? id)
{
    //...
}

Be sure your Delete.cshtml should be like below:

<form asp-action="DeleteConfirm" method="post" enctype="multipart/form-data">

Result:

Update:

Index.cshtml:

<form method="post" asp-action="Delete" asp-controller="Sprays" asp-route-slug="my-delete-id">
      <input type="hidden" value="@item.Id" name="id" />
      <input type="submit" value="Delete" />
</form>

Controller:

[HttpPost]
public async Task<IActionResult> Delete(string slug)
{
    var data = HttpContext.Request.Form["id"].First();
    var id = int.Parse(data);
    //...
}
[HttpPost]
//[ActionName("Delete")]    
public async Task<IActionResult> DeleteConfirm(int? id)
{
    //...
}

Startup.cs:

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

Result:

Whole Controller:

public class TestsController : Controller
{
    private readonly MyDbContext _context;

    public TestsController(MyDbContext context)
    {
        _context = context;
    }

    // GET: Tests
    public async Task<IActionResult> Index()
    {
        return View(await _context.Test.ToListAsync());
    }

    // GET: Tests/Details/5
    public async Task<IActionResult> Details(int? id)
    {
        if (id == null)
        {
            return NotFound();
        }
        var test = await _context.Test
            .FirstOrDefaultAsync(m => m.Id == id);
        if (test == null)
        {
            return NotFound();
        }

        return View(test);
    }

    // GET: Tests/Create
    public IActionResult Create()
    {
        return View();
    }
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create([Bind("Id,Name")] Test test)
    {
        if (ModelState.IsValid)
        {
            _context.Add(test);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return View(test);
    }

    // GET: Tests/Edit/5
    public async Task<IActionResult> Edit(int? id)
    {
        if (id == null)
        {
            return NotFound();
        }

        var test = await _context.Test.FindAsync(id);
        if (test == null)
        {
            return NotFound();
        }
        return View(test);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Edit(int id, [Bind("Id,Name")] Test test)
    {
        if (id != test.Id)
        {
            return NotFound();
        }

        if (ModelState.IsValid)
        {
            try
            {
                _context.Update(test);
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!TestExists(test.Id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }
            return RedirectToAction(nameof(Index));
        }
        return View(test);
    }

    [HttpPost]
    public async Task<IActionResult> Delete(string slug)
    {
        var data = HttpContext.Request.Form["id"].First();
        var id = int.Parse(data);
        var test = await _context.Test
            .FirstOrDefaultAsync(m => m.Id == id);
        if (test == null)
        {
            return NotFound();
        }

        return View(test);
    }
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> DeleteConfirmed(int id)
    {
        var test = await _context.Test.FindAsync(id);
        _context.Test.Remove(test);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }

    private bool TestExists(int id)
    {
        return _context.Test.Any(e => e.Id == id);
    }
}

Whole Startup.cs:

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
    services.AddDbContext<MyDbContext>(options =>              options.UseSqlServer(Configuration.GetConnectionString("MyDbContext")));
}

// 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();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }
    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseAuthorization();

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