[Solved] Call ASP.Net Web API using jQuery Error: 404

I am getting an error 404 and click event is not working

I am trying with different way to insert but getting an error.

Please help me out this.

HomeController

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        LocalDBEntities localDBEntities = new LocalDBEntities();  
        List<AGENT> agents=localDBEntities.AGENTS.ToList();
        if (agents.Count == 0)
        {
            agents.Add(new AGENT());
        }
        return View(agents);
    }
}

CrudApiController

public class CrudAPIController : ApiController
{
    [Route("Home/api/CrudAPI/InsertAgents")]
    [HttpPost]
    public AGENT InsertAgents(AGENT agent)
    {
        using (LocalDBEntities localDBEntities = new LocalDBEntities())
        {
            localDBEntities.AGENTS.Add(agent);
            localDBEntities.SaveChanges();
        }
        return agent;
    }
}

Index.cshtml

<table id="tblAgents" class="table" border="1" cellpadding="4" cellspacing="0">
    <tr>
        <th>AGENTS_CODE</th>
        <th>AGENTS_NAME</th>
        <th>WORKING_AREA</th>
        <th>COMMISSON</th>
        <th>CONTACNO</th>
        <th>COUNTRY</th>
        <th>ACTION</th>
    </tr>
    @foreach (AGENT agent in Model)
    {
        <tr>
            <td class="AgentCode"><span>@agent.AGENT_CODE</span></td>
            <td class="AgentName">
                <span>@agent.AGENT_NAME</span>
                <input type="text" value="@agent.AGENT_NAME" style="display:none" />
            </td>
            <td class="Working_Area">
                <span>@agent.WORKING_AREA</span>
                <input type="text" value="@agent.WORKING_AREA" style="display:none" />
            </td>
            <td class="Commission">
                <span>@agent.COMMISSION</span>
                <input type="text" value="@agent.COMMISSION" style="display:none" />
            </td>
            <td class="Phone_No">
                <span>@agent.PHONE_NO</span>
                <input type="text" value="@agent.PHONE_NO" style="display:none" />
            </td>
            <td class="Country">
                <span>@agent.COUNTRY</span>
                <input type="text" value="@agent.COUNTRY" style="display:none" />
            </td>
            <td class="Action">
                <a class="Edit" href="javascript:;">Edit</a> |
                <a class="Update" href="javascript:;" style="display:none">Update</a>
                <a class="Cancel" href="javascript:;" style="display:none">Cancel</a>
                <a class="Delete" href="javascript:;">Delete</a>
            </td>
        </tr>
    }
</table>
<br />
<hr />
<br />
<table id="tblAgent">
    <tr>
        <td>Name:</td>
        <td><input type="text" id="txtAgentName" /></td>
    </tr>
    <tr>
        <td>Work Area:</td>
        <td><input type="text" id="txtWorkArea" /></td>
    </tr>
    <tr>
        <td>Commission:</td>
        <td><input type="text" id="txtCommission" /></td>
    </tr>
    <tr>
        <td>Contact No:</td>
        <td><input type="text" id="txtContactNo" /></td>
    </tr>
    <tr>
        <td>Country:</td>
        <td><input type="text" id="txtCountry" /></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="button" id="btnAdd" value="Add" /></td>
    </tr>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript">
    //Bind Function
    function AppendRow(row, agentCode, agentName, workArea, commission, contactNo, country) {
        $(".AgentCode", row).find("span").html(agentCode);
 
        $(".AgentName", row).find("span").html(agentName);
        $(".AgentName", row).find("input").val(agentName);
 
        $(".Working_Area", row).find("span").html(workArea);
        $(".Working_Area", row).find("input").val(workArea);
 
        $(".Commission", row).find("span").html(commission);
        $(".Commission", row).find("input").val(commission);
 
        $(".Phone_No", row).find("span").html(contactNo);
        $(".Phone_No", row).find("input").val(contactNo);
 
        $(".Country", row).find("span").html(country);
        $(".Country", row).find("input").val(country);
        row.find(".Edit").show();
        row.find(".Delete").show();
 
        $("#tblCustomers").append(row);
        $("#tblCustomers").append(row);
    };
    
    //Add Function
    $("body").on("click", "#btnAdd", function () {
        var txtAgentName = $("#txtAgentName");
        var txtWorkArea = $("#txtWorkArea");
        var txtContactNo = $("#txtContactNo");
        var txtCountry = $("#txtCountry");
        var _agents = {};
        _agents.AgentName = txtAgentName.val();
        _agents.WorkArea = txtWorkArea.val();
        _agents.ContactNo = txtContactNo.val();
        _agents.Country = txtCountry.val();
        $.ajax({
            type: "POST",
            url: "api/CrudAPI/InsertAgents",
            data: JSON.stringify(_agents),
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (r) {
                var row = $("#tblAgents tr:last-child");
                if ($("#tblAgents tr:last-child span").eq(0).html() != "&nbsp;") {
                    row = row.clone();
                }
                AppendRow(row,r.AgentCode,r.AgentName,r.WorkArea,r.ContactNo,r.Country)
                txtAgentName.val("");
                txtWorkArea.val("");
                txtContactNo.val("");
                txtCountry.val("");
            }
        })
    });
</script>