0

I am following this tutorial: https://www.codeproject.com/Articles/424461/Implementing-Consuming-ASP-NET-WEB-API-from-JQuery

to help me implement my web API. But I have something different. This is my index:

@model IEnumerable<dsr_vaja1.Models.Kosarica.Kosarica>
@{
    ViewBag.Title = "kosarica";
    Layout = "~/Views/Shared/MasterStran.cshtml";
}


<div id="accordion">
    <h3>Igre</h3>
    <div>
        <table class="table table-hover ">
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.ime_igre)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.cena_igre)
                </th>

            </tr>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.ime_igre)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.cena_igre)
                    </td>
                </tr>
            }
        </table>
        <button onclick="AddEmployee();return false;">Add Employee</button>


    </div>
</div>

As you can see, here I have a LIST of items named Kosarica. This is my web api:

public void Post(Nakup nakup)
    {
        nakup.Id = 1;
        nc.Nakupi.Add(nakup);
        nc.SaveChanges();
    }

My web api and everything works completely fine, now I would just like to know how I would use this function:

 function AddGame() {
        jQuery.support.cors = true;
        var game = {
            ID: model.id,
            ime_igre: model.ime_igre,
        };

        $.ajax({
            url: 'http://localhost:8080/API_SVC/api/EmployeeAPI',
            type: 'POST',
            data:JSON.stringify(employee),
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                WriteResponse(data);
            },
            error: function (x, y, z) {
                alert(x + '\n' + y + '\n' + z);
            }
        });
    }

FOR ALL of the items in the list after the user clicks a button.

**edit

Isn't there a simpler way to do this? I just realized that the first line of code is a list @model IEnumerable

model is a list of objects. As you can see below in the foreach loop, I loop through the items in model. So can I just pass the model to the jquery function somehow?

1 Answers1

0

Create a javascript function, eg :
function AddGamesForAllItems(){

// Select the table through JQuery Selector Here

//loop through the elements of the table Here

//Call the AddGame function passing by paremeters the needed elements from the table... You have to declare parameters inside you AddGame function

}

Call the AddGamesForAllItems function when you need it eg: Button click event.

Hope it could help !

Community
  • 1
  • 1
  • Isn't there a simpler way to do this? I just realized that the first line of code is a list @model IEnumerable model is a list of objects. As you can see below in the foreach loop, I loop through the items in model. So can I just pass the model to the jquery function somehow? – averagejoex May 04 '17 at 09:34
  • Don't forget that all the code prefixed with the @ prefix, is code that is executed and rendered on the server side before the page (html) is sended to the client. So, you can't use your model simply like this with Javascript... – Jon Lopez Garcia May 04 '17 at 09:48