ASP.NET-按钮不起作用

Question

I am working wiht OutBrain API and i am trying to get some data from the server.

I made a simple HTML page that just take marketer ID and return his name.

When i click the button- nothing happen. Can someone tell me what my problem is ?

I am using visual studio 2013 and working with MVC ASP.NET.

Thanks !

Code :

index.cshtml

 @{ ViewBag.Title = "Home Page"; } <br /> <div class="details"> <label>Enter Marketer ID</label> <input type="text" class="form-control" id="marketerID"> <button type="button" class="btn btn-default" id="buttonB">OK</button> <section class="details"> <div class="name"> <label>Name</label> <label id="nameMarketer"></label> </div> </section> </div> <script src="~/Scripts/outBrain.js"></script> 

outBrain.js

$("#buttonB").on('click', function () {

function getMarketer ()
{
    $.ajax(
        {
            url: "/home/GetOutBrainMarketers",
            data: { id: $("marketerID").val() },
            success: function (result) {
                var marketer = JSON.parse(result);
                document.getElementById("nameMarketer").innerHTML = (marketer.name);
            }
        }
        )
   }
});

HomeController.cs

namespace OutBrain_test.Controllers
{
    public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult About()
    {
        ViewBag.Message = "Your application description page.";

        return View();
    }

    public ActionResult Contact()
    {
        ViewBag.Message = "Your contact page.";

        return View();
    }

    public async Task<string> GetOutBrainMarketers(string ID)
    {
        var baseAddress = new Uri("https://api.outbrain.com/amplify/v0.1/marketers/" + ID);

        using (var httpClient = new HttpClient { BaseAddress = baseAddress })
        {

            httpClient.DefaultRequestHeaders.TryAddWithoutValidation("OB-TOKEN-V1", AuthorizeOutBrain().Result);

            using (var response = await httpClient.GetAsync("marketers/"+ ID))
            {

                string responseData = await response.Content.ReadAsStringAsync();

                return responseData;
            }

        }

    }

    public async Task<string> AuthorizeOutBrain()
    {

        var baseAddress = new Uri("https://api.outbrain.com/amplify/v0.1/login");

        using (var httpClient = new HttpClient { BaseAddress = baseAddress })
        {

            httpClient.DefaultRequestHeaders.TryAddWithoutValidation("authorization", "BASIC BASE-64-ENC(my-username:my-pass)");

            using (var response = await httpClient.GetAsync("login"))
            {

                string responseData = await response.Content.ReadAsStringAsync();

                return responseData;
            }
        }
    }
}

}

Answer 1

Your button JavaScript click handler doesn't do anything except for defining a function. You need to do this:

$("#buttonB").on('click', function () {
    $.ajax({            {
            url: "/home/GetOutBrainMarketers",
            data: { id: $("marketerID").val() },
            success: function (result) {
                var marketer = JSON.parse(result);
                document.getElementById("nameMarketer").innerHTML = (marketer.name);
            }
    });
});

Answer 2

you have used button html control replace it with following

<input type="button" class="btn btn-default" value="OK" id="buttonB" />

make following changes in outBrain.js file

function pageLoad()
{
    $("#buttonB").on('click', function () {
              getMarketer();
    });
}

function getMarketer()
{
$.ajax({
        url: "/home/GetOutBrainMarketers",
        data: "{ id:'" + $("marketerID").val() +"'}",
        success: function (result) {
            var marketer = JSON.parse(result);
            document.getElementById("nameMarketer").innerHTML = (marketer.name);
        }
      });
}

Answer 3

case sensitive problem . home controller api parameter name is "ID" and your ajax calling you give "id" in small case please change it in uppercase and try

 $(function () 
   {
$("#buttonB").click(function () {
    $.ajax({  
        url: "/home/GetOutBrainMarketers",
        data: { ID: $("marketerID").val() },
        success: function (result) {
            var marketer = JSON.parse(result);
            document.getElementById("nameMarketer").innerHTML =       (marketer.name);
        }
    });
});
});