如何使用URL将数据从javascript发送到ASP.NET MVC控制器 [英] How to send data from javascript to ASP.NET MVC controller using URL

查看:67
本文介绍了如何使用URL将数据从javascript发送到ASP.NET MVC控制器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我需要一些帮助.我使用带有JavaScript和Knockout的ASP.NET MVC4编写了小应用程序,但无法将数据从javascript发送到MVC Controller,反之亦然.例如,JS的部分如下所示:

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:

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");
                });
         };

在ASP.NET MVC Home Controller中,我通过ID获取雇主并将其返回为Json:

In ASP.NET MVC Home Controller I'm getting employer by ID and return it as Json:

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

我的视图返回另一个控制器(Home/KnockOutView).我的视图"还获得了另一个对象,并且根据接收到的内容,其外观也有所不同:

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

...
<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>

一切正常,我收到了JS中的Vacancy和Employer对象,并使用Knockout在HTML中显示了它,但我的URL一直都一样!!!但是我想在获得空缺或雇主时始终更改URL.例如,如果我想使用方法GetEmployer来获得Employer,则URL应该如下所示:〜/Home/GetEmployer?id = 3如果我更改此代码字符串 Url.Action("GetEmployer","Home")位于 url:window.location.href ="/home/GetEmployer?id =" + id URL将被更改,但Controller向我返回一个Json对象,并以Json格式在窗口中显示它.请帮助我,更改URL并从URL获取Controller中的信息.谢谢.

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.

推荐答案

尝试以下代码,希望对您有帮助

Try below code, hope helps you

此代码适用于%100,请根据您的情况在下面的文本框中进行更改

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:

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;
    }
}

控制器:

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

这篇关于如何使用URL将数据从javascript发送到ASP.NET MVC控制器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆