Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Asp.Net Core: ajax zu Web-Api Beispiel

30.07.2018 (👁9946)

Asp.Net Core:

Das folgende Code-Beispiel zeigt ein einfaches Beispiel einer Web-Api in Asp.Net Core MVC. In der Frontend Razor-View Views/Shared/_layout.cshtml wird beim onClick auf den Link mit dem Stern ein

Javascript function ausgeführt, welche mit ajax zu eine Anfrage zu der passenden WebApi des gleichen Controllers ausführt.

Save Favourite Searchagent

MVC Json WebApi

 

Frontend View->oben die Menüleiste _Layout

->beim click auf Stern folgt die script function in projects/s=asp core->$.ajax

Razor HTML-View

Views/Shared/_layout.cshtml

 

<div style="color:white;display:flex;flex-direction:row;">

              <a href="/📜" title="Freiberufler Projekte" class="mynavnavbar-brand" style="font-size:22px;">

                  <img src="~/_images/ico/icoLogo.png" style="margin-right:2px;vertical-align:text-bottom;" />

                  <span style="color:white;margin-right:4px;">Projektsuche für Freiberufler: </span>

              </a>

              <form id="frmList" style="display:inline-block" onsubmit="return send_Search()">

                  <input id="tbxSearch_Text" name="tbxSearch_Text" value="@sSearch" style="width:200px;color:black">

                  Ort:

                  <input id="tbxSearch_Ort" name="tbxSearch_Ort" value="@sOrt" style="width:80px;color:black " />

                  <button type="submit" style="background-color:black;border:0px;padding:0px"><img src="~/_images/Ico/icoSearch.png" style="height:30px" /></button>

              </form>

 

 

              @{

                  if (sSearch != null)

                  {

 

                      string sURL_SearchAgent = "";

                      if (SignInManager.IsSignedIn(User))

                      {

                          sURL_SearchAgent = "return post_SearchAgent();";

                      }

                      else

                      { sURL_SearchAgent = "/Account/Login"; }

 

                      <a onclick="@sURL_SearchAgent"><div id="lnkSearchAgent" style="color:white;font-size:36px;margin-top:-10px;margin-left:4px">&star;</div></a>

 

 

                      <script>

 

                          function post_SearchAgent() {

                                //--------< post_SearchAgent() >--------

                                //--< local >--

                                var sURL_SearchAgent = "";

                              var tbxSearch_Text = document.getElementById("tbxSearch_Text");

                              var tbxSearch_Ort = document.getElementById("tbxSearch_Ort");

 

                              var lnkSearchAgent = document.getElementById("lnkSearchAgent");

                              if (lnkSearchAgent.innerHTML == "") {

                                  var sSearch = tbxSearch_Text.value;

                                  sSearch = encodeURIComponent(sSearch).replace(/'/g"%27").replace(/"/g"%22");

                                  sURL_SearchAgent = "/SearchAgents/Add?s=" + sSearch  ;

                              }

                              else {

                                  sURL_SearchAgent = "/SearchAgents/Delete?s=xxx";

                              }

                                //--</ local >--

                                //--< ajax upload >--

                                $.ajax({

                                  type: "POST",

                                  url: sURL_SearchAgent,

                                  contentType: false,

                                  processData: false,

                                    //nodata

                                    data: "-no-data-",    //Type: PlainObject or String or Array

                                  error: function (request, status, error) {

                                      alert("Errortext:\n" + request.responseText);

                                  }

                              });

                                //--</ ajax upload >--

                                //--------</ post_SearchAgent() >--------

                            }

 

                      </script>

 

                  }

              }

          </div>

Controller->Web Api

Nach dem Aufruf der ajax function wird auf dem Controller der Server-Code durchlaufen add(..).

Hierbei werden in diesem Fall die Query-Paramerter s und o übernommen. Man könnte auch aus dem Formular Daten übernehmen.

In Json  

[HttpPost]

[Authorize]

public async Task<IActionResult> add()

{

    // -------------< add() > -------------

    //< get ID  >

    //*from Querysting like Notes/Edit_Upload_Images?IDSearchAgent=1

    string sText_Search = Request.Query["s"];

    string sText_Ort = Request.Query["o"];

    //</ get ID  >

 

    //--< Get User ID >--

    //internal referenz-Number for tracking in tables

    long IDCurrent_User = await UserInfo_Methods.getIDUser_as_Number(this.User, _dbContext);

    //--</ Get User ID >--

 

    //< get_database >

    SearchAgentsModel searchAgent = new SearchAgentsModel(); ;

    searchAgent.IDOwner = IDCurrent_User;

    searchAgent.DtCreated = DateTime.Now;

    searchAgent.Text_Search = sText_Search;

    searchAgent.Text_Ort = sText_Ort;

    //< save >

    await _dbContext.tbl_SearchAgents.AddAsync(searchAgent); //IDNote: 0->-99999

    await _dbContext.SaveChangesAsync(true);                 //IDNote: -99999->16            

    //----</ Save Data >----

 

    //< response >

    return Json(true);

    //</ response >

    // -------------</ Edit_Upload_Images() > -------------

}