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 — user11431955
– user11431955, Commented Sep 9, 2019 at 6:30

ArulPrasath A M · Accepted Answer · 2019-09-09 09:11:01Z

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 9, 2019 at 9:11

answered Sep 9, 2019 at 7:35

ArulPrasath A M

516 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user11431955 Over a year ago

I get error Uncaught SyntaxError: Unexpected end of input Uncaught ReferenceError: aKontoSubmit is not defined at HTMLAnchorElement.onclick (Index:43)

user11431955 Over a year ago

@ArualPrasth I get error when press Check button Failed to load resource: the server responded

ArulPrasath A M Over a year ago

@Xerror - try changing the ajax URL as Updated above. and also can you post entire code what you tried ?

user11431955 Over a year ago

Doesnt work. It seem like url needs to be /api/Akontas/{id} for example like this: localhost:57285/api/Akontas/516005

user11431955 Over a year ago

There is problem with routing I belive

|

user11431955 · Accepted Answer · 2019-09-12 13:03:47Z

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");
            }
        });
    }

Collectives™ on Stack Overflow

Call Action Method on button click ASP.NET MVC

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related