Geek Answers Handbook

How to send data from javascript to ASP.NET MVC controller using url

I need help. I am writing a small application using ASP.NET MVC4 with JavaScript and a knockout, and I cannot send data from javascript to MVC Controller and vice versa. For example, part of JS looks like this:

Javascript

self.Employer = ko.observable(); self.AboutEmployer = function (id) { $.ajax({ Url.Action("GetEmployer", "Home") cache: false, type: 'GET', data: "{id:" + id + "}", contentType: 'application/json; charset=utf-8', dataType: "json", success: function (data) { self.Employer(data); } }).fail( function () { alert("Fail"); }); };

In ASP.NET MVC Home Controller, I get the employer by ID and return it as Json:

FROM#

 public JsonResult GetEmployer(int id) { var employer = unit.Repository<Employer>().GetByID(id); return Json(employer, JsonRequestBehavior.AllowGet); }

My View returns another controller (Home / KnockOutView). My view also receives other objects and, depending on what it receives, has a different view:

HTML

 ... <b>About Company: </b><a href="#" data-bind="click: $root.AboutEmployer.bind($data, Vacancy().EmployerID)"> <span data-bind=" text: Vacancy().Employer"></span></a> <div data-bind="if: Vacancy"> <div id="VacancyDescription"><span data-bind="text:DescriptionShort"></span> </div> </div> <div data-bind="if: Employer"> <div data-bind="text: Employer().EmployerDescription"></div> </div>

Everything works fine, I get job and employer objects in JS and display them in HTML using Knockout, but my URL stays the same all the time !!! But I want to change the URL all the time when I get a Job or Employer. For example, if I want to get Employer using the GetEmployer method, the URL should look like this: ~ / Home / GetEmployer? Id = 3 If I change this line of code Url.Action("GetEmployer", "Home") at url: window.location.href = "/home/GetEmployer?id=" + id URL will be changed, but Controller will return an object to me Json and show it in a window in Json format. Please help me change the URL and get the information in the controller at the URL. Thanks.

+4
source share
5 answers

Try it under the code, I hope it helps you

This code works% 100, please change the below text box according to your scenario

HTML

 <input type="text" id="UserName" name="UserName" /> <input type="button" onclick="MyFunction()"value="Send" /> <div id="UpdateDiv"></div>

JavaScript:

 function MyFunction() { var data= { UserName: $('#UserName').val(), }; $.ajax({ url: "/Home/GetEmployer", type: "POST", dataType: "json", data: JSON.stringify(data), success: function (mydata) { $("#UpdateDiv").html(mydata); history.pushState('', 'New URL: '+href, href); // This Code lets you to change url howyouwant }); return false; } }

Controller:

 public JsonResult GetEmployer(string UserName) { var employer = unit.Repository<Employer>().GetByID(id); return Json(employer, JsonRequestBehavior.AllowGet); }
+3
source

Due to the fact that MVC is a little annoying in handling routes to the same view, I was successful:

 self.Employer = ko.observable(); self.AboutEmployer = function (id) { $.ajax({ url: "@Url.Action("GetEmployer", "Home", new { id = "PLACEHOLDER"})".replace("PLACEHOLDER", id), cache: false, type: 'GET', contentType: 'application/json; charset=utf-8', dataType: "json", success: function (data) { self.Employer(data); } }).fail( function () { alert("Fail"); }); };

You can use the standard url: "@Url.Action("GetEmployer", "Home")/" + id , but when updating, the route with the existing identifier remains in subsequent calls, so it starts adding id, which obviously does not work. By specifying an identifier in a call, this behavior is no longer present.

0
source

use data parameters like this {id:id, otherPara:otherParaValue}

  $.ajax({ url:Url.Action("GetEmployer", "Home") type: 'GET', data: {id:id}, contentType: 'application/json; charset=utf-8', dataType: "json", success: function (data) { alert(data) } });
0
source

The best way to navigate in my opinion is to use sammy.js. Here is the message that kazimanzurrashid.com

0
source

Here is my action with the controller.

 [HttpPost] public ActionResult ActionName(string x, string y) { //do whatever //return sth :) }

and my action to post here.

 <script type="text/javascript"> function BayiyeCariEkle(){ var sth= $(#itemID).text(); var sth2= $(#itemID2).text(); $.post("/ControllerName/ActionName", { x: sth, y: sth2}); } </script>
0
source

More articles:


All Articles