Question

11

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

rated 0 times [ 16] [ 5] / answers: 1 / hits: 34547 / 11 Years ago, mon, september 23, 2013, 12:00:00

I need some help. I write little app using ASP.NET MVC4 with JavaScript and Knockout and I can't send data from javascript to MVC Controller and conversely. For example, the part of JS looks like that:

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'm getting employer by ID and return it as Json:

C#

public JsonResult GetEmployer(int id)

    {

        var employer = unit.Repository<Employer>().GetByID(id);

        return Json(employer, JsonRequestBehavior.AllowGet);

    }

My View return another Controller (Home/KnockOutView). My View also gets another objects and depending what recieve, has different look:

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 great, I receive Vacancy and Employer objects in JS and show it in HTML using Knockout, but my URL all time still the same!!! But I want to change URL all time, when i'm getting Vacancy or Employer.
For example, if I want to get Employer, using method GetEmployer, URL should looks like that: ~/Home/GetEmployer?id=3
If I change this string of Code
Url.Action(GetEmployer, Home) at url: window.location.href = /home/GetEmployer?id= + id URL will be changed, but Controller returns me an Json object and shows it in window in Json format.
Help me, please, to change URL and get information in Controller from URL.
Thanks.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ravenl

Add To Favorites

Follow

Total Points: 338

Total Questions: 107

Total Answers: 112

Location: Belize

Member since Mon, Jun 20, 2022

2 Years ago

ravenl questions

1 TypeError: e.preventDefault is not a function on React Hook Form using EmailJs

Wed, Sep 1, 21, 00:00, 3 Years ago

1 Vue @change event not working in < b-form-datepicker/>

Thu, Feb 18, 21, 00:00, 3 Years ago

1 Image type in typescript

Tue, Jan 12, 21, 00:00, 3 Years ago

1 How can I append HTML code using JavaScript?

Tue, Mar 17, 20, 00:00, 4 Years ago

1 make the first tab the active tab when open a bootstrap modal

Sun, Feb 16, 20, 00:00, 4 Years ago

View All

answered 11 Years ago ciarajourneyv · Accepted Answer

Try below code, hope helps you

This code works %100 , please change below textbox 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);

}