Call Action Method on button click ASP.NET MVC

Question

I am trying to get user input in button click. When user insert number and press Check, it needs to return xml data type. So in my controller I create function which will return a data for passing ID

[ResponseType(typeof(AKONTA))]
        public IHttpActionResult GetAKONTA(string id)
        {
            AKONTA aKONTA = db.AKONTAS.Find(id);
            if (aKONTA == null)
            {
                return BadRequest("Ne postoji A_KONTO pod tim rednim brojem");
            }

            return Ok(aKONTA);
        }

And In my View I have following

<br /><br />
<form>
    <div class="form-group">
        <label>A_KONTO</label>
        <input type="text" class="form-control" aria-describedby="AKONTO BROJ" placeholder="Unesite broj AKONOTO">
    </div>

    <div class="form-group">
        <a asp-action="Index" class="btn btn-primary" id="aKonto" action="@Url.Action("GetAKONTA", "Akontas")">Provjeri</a>
    </div>
</form>

And I want to create in btn click when user pass ID it needs to return XML data format.

SO far I create a JS function, but I don't know JavaScript and don't know the logic how to pass Controller Action Result to JS.

  <script>
        $(document).ready(function () {
            $('#aKonto').click(function () {
                document.getElementById("aKonto").onclick = function () {GetAKONTA()};;
            });
        });
    </script>

If someone can help me I would be very thankful. Cheers !

UPDATE

function aKontoSubmit() {
            $.ajax({
                type: "GET",
                url: 'api/Akontas',
                //data: { id: id },
                dataType: "xml",
                success: function (result) {
                    // action to do after form submit
                },
                error: function () {
                    alert("Ne postoji AKONTO pod tim rednim brojem");
                }

            });
        }

**routeConfig**

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace AkontasWebApi
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");


            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
}

No, because I need to call function in JS which is in my controller. It needs to work on btn click method. If you have any suggestion I would be very thankful — , Sep 09 '19 at 06:30

ArulPrasath A M · Accepted Answer · 2019-09-09T09:11:01.457

1

Add Reference of Jquery, to try the ajax call method.

function aKontoSubmit() {
$.ajax({
    type: "POST",
    url: '/Akontas/GetAKONTA',
    data: $('form').serialize(),
    dataType: "json",
    success: function (result) {
        // action to do after form submit
    },
    error: function () {
        alert("Error while inserting data");
    }
});

}

Change you Link Code as Below

 <a asp-action="Index" class="btn btn-primary" id="aKonto"  onClick='return aKontoSubmit() '>Provjeri</a>

Or Else You Can try if you are using ASP.Net MVC Core Development

<form asp-action="GetAKONTA" asp-controller="Akontas" method="post"> 
    <div class="form-group">
        <label>A_KONTO</label>
        <input type="text" class="form-control" aria-describedby="AKONTO BROJ" placeholder="Unesite broj AKONOTO">
    </div>

    <div class="form-group">        
         <input class="btn btn-primary" id="aKonto"  type = "submit" value = "Provjeri" /> 
    </div>
</form>

edited Sep 09 '19 at 09:11

answered Sep 09 '19 at 07:35

ArulPrasath A M

51
5

I get error Uncaught SyntaxError: Unexpected end of input Uncaught ReferenceError: aKontoSubmit is not defined at HTMLAnchorElement.onclick (Index:43) – Sep 09 '19 at 07:42
@ArualPrasth I get error when press Check button Failed to load resource: the server responded – Sep 09 '19 at 08:17
@Xerror - try changing the ajax URL as Updated above. and also can you post entire code what you tried ? – ArulPrasath A M Sep 09 '19 at 09:03
Doesnt work. It seem like url needs to be /api/Akontas/{id} for example like this: http://localhost:57285/api/Akontas/516005 – Sep 09 '19 at 09:05
There is problem with routing I belive – Sep 09 '19 at 09:05
Failed to load resource: the server responded with a status of 404 (Not Found) – Sep 09 '19 at 09:14
Update your Jquery Ajax URL as like 'url:api/Akontas/GetAKONTA' and try it – ArulPrasath A M Sep 09 '19 at 09:18
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/199171/discussion-between-arulprasath-a-m-and-xerror). – ArulPrasath A M Sep 09 '19 at 09:24

score 0 · Answer 2 · answered Sep 12 '19 at 13:03

After a couple hours of debugging and searching I found that I forget to put

window.location.href = "http://localhost:57285/api/Akontas/" + $('#AkontasId').val();

This is location where should redirect if item exsist in database

And URL call need to be modified as well

URL: "/api/Akontas/GetAKONTA",


 function aKontoSubmit() {

        $.ajax({          
            type: "GET",            
            URL: "/api/Akontas/GetAKONTA",
            data: { id: $('#AkontasId').val() },
            contentType: "data/xml; charset=utf-8",  
            success: function (result) {
                window.location.href = "http://localhost:57285/api/Akontas/" + $('#AkontasId').val();
            },
            error: function () {
                alert("Ne postoji AKONTO pod tim rednim brojem");
            }
        });
    }

Call Action Method on button click ASP.NET MVC

2 Answers2

Linked