Delete from multiple checkbox (MVC C# Telerik)

Question

I'm currently a complete newbie in ASP.NET MVC development. I want to ask about how to do a delete function based on selected checkbox. here is my codes :

Model (I named it JobProvider) - Logic for delete function

private readonly EntitiesModel context;
public JobProvider(EntitiesModel context)
{
    this.context = context;
}

public Job GetJob(int id)
{
    return context.Jobs.SingleOrDefault(Job => Job.JobID == id);
}

public void Delete(int id)
{
    var job = GetJob(id);
    if (job != null)
    {
        context.Delete(job);
        context.SaveChanges();
    }
}

Controller for delete:

private readonly JobProvider jobProvider;

public JobController(JobProvider jobProvider)
{
    this.jobProvider = jobProvider;
}

public ActionResult Delete(int id)
{
    try
    {
        jobProvider.Delete(id);
    }
    catch (Exception ex)
    {
        throw ex;
    }
    return RedirectToAction("Index");
}

My view markup:

@model List<JobSeeker.ViewModel.JobProperty.JobViewModel>
<link href="~/Content/Site.css" rel="stylesheet" />
@using (Html.BeginForm("Filter", "Job", FormMethod.Post, new { id = "filterform" }))
{
    <table>
        <tr>             
            <td>@Html.Label("Cari Nama Pekerjaan")</td>
            <td>@Html.TextBox("jobName")</td>
        </tr>
        <tr>
            <td><input type="submit" class="btnCreate" value="Search" /></td>
        </tr>
    </table>
}
<a href='@Url.Action("Create", "Job")'>
    <img class="add-global" id="btnAddNew" src='@Url.Content("/../Images/logo-add.png")' />
</a>
<a href='@Url.Action("Delete", "Job")'>
    <img class="delete-global-checklist" src="@Url.Content("/../Images/delete-checklist-logo.png")" />
</a>
@foreach (var item in Model.ToList())
{
    <div class="job-body-container">
        <div class="logo-global">
            <img class="global-image-company" src="~/Images/logo-job.png" />
        </div>
        <div class="detail-global-container">
            <div class="detail-global"><b class="job">@item.jobName</b></div>
            <div class="detail-global"><b class="job-company">@item.jobCompany</b></div>          
            <div class="detail-global">Requirement : @item.jobRequirement</div>
            <div class="detail-global">Deskripsi Pekerjaan : @item.jobDescription</div>
        </div>
        <div class="global-menu-job">
            <div class="total-person">
                <div class="textview-total-person">Total Pelamar : <b>@item.jobTotalPerson</b> orang</div>
            </div>
            <a href='@Url.Action("DetailIndex", "Job", new { id = @item.jobID })'>
                <img class="edit-global" src='@Url.Content("/../Images/logo-detail.png")' />
            </a>
            <a href='@Url.Action("Edit", "Job", new { id = @item.jobID })'>
                <img class="edit-global" src='@Url.Content("/../Images/logo-edit.png")' />
            </a>
            <a class="delete" href='@Url.Action("Delete", "Job", new { id = @item.jobID })' onclick="return confirm('are you sure you want to delete?')">
                <img class="delete-global" src='@Url.Content("/../Images/logo-delete.png")' />
            </a>
            <input class="checklist" type="checkbox" value="@item.jobID"/>
        </div>
    </div>
}

The code currently using delete function per item like this. It will delete item when X logo is clicked. However, I want to delete each selected item in checkbox by clicking trash icon on top right (sorry for bad design). How should I modify my code?

Thanks in advance :)

Dims · Accepted Answer · 2017-05-17 06:50:25Z

[Solved]

Controller:

[HttpPost]
    public ActionResult Delete(int[] id)
    {

        foreach (var item in id)
        {
            try
            {
                jobProvider.Delete(item);                 
            }
            catch (Exception ex)
            {
                throw ex;
            }

        }

        return RedirectToAction("Index");
    }

View

<a class="btnDelete" href='javascript:;'>
<img class="delete-global-checklist" src="@Url.Content("/../Images/delete-checklist-logo.png")" /> </a>

 <input class="chkDelete" name="chkDeleteName" type="checkbox" value="@item.jobID"/>

View Ajax Script

<script>
$(".btnDelete").on("click", function (e) {
    var confirmation = confirm("Are you sure?")
    if (confirmation) {

        e.preventDefault();
        var data = [];
        $("input[name='chkDeleteName']:checked").each(function () {
            data.push($(this).val());         
        });

        $.ajax({
            type: "POST",
            url: "@Url.Action("Delete")",
            data: { id: data },
        traditional:true,
        success: function (result) {
            //alert("done");
            alert("Delete Success")
            location.reload();
        }
    })
    }
    else
        alert("Delete Canceled")
    })

Collectives™ on Stack Overflow

Delete from multiple checkbox (MVC C# Telerik)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related