如何使用URL將數據從javascript發送到ASP.NET MVC控制器

Question

我需要一些幫助。 我使用帶有JavaScript和Knockout的ASP.NET MVC4編寫小應用程序，我無法將數據從javascript發送到MVC Controller，反之亦然。 例如，JS的一部分看起來像這樣：

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

在ASP.NET MVC Home Controller中，我通過ID獲得雇主並將其作為Json返回：

C＃

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

我的視圖返回另一個Controller（Home / KnockOutView）。 我的視圖也獲得了另一個對象，根據收到的內容，它們具有不同的外觀：

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>

一切都很好，我在JS中收到Vacancy和Employer對象並使用Knockout以HTML格式顯示它，但我的URL始終保持不變！ 但是，當我獲得空缺或雇主時，我想一直更改URL。 例如，如果我想使用方法GetEmployer獲取Employer，則URL應如下所示：〜/ Home / GetEmployer？id = 3如果我在url: window.location.href = "/home/GetEmployer?id=" + id處更改此代碼字符串Url.Action("GetEmployer", "Home")字符串url: window.location.href = "/home/GetEmployer?id=" + id URL將被更改，但Controller會返回一個Json對象並以Json格式在窗口中顯示它。 請幫助我更改URL並從URL獲取Controller中的信息。 謝謝。

Answer 1

試試下面的代碼，希望能幫到你

此代碼工作％100，請根據您的方案在文本框下方更改

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

控制器：

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

Answer 2

使用像這樣的數據參數{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)
     }
 });

Answer 3

這是我的控制器動作。

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

    }

我的帖子就在這里。

<script type="text/javascript">
        function BayiyeCariEkle(){

           var sth= $(#itemID).text();

           var sth2= $(#itemID2).text();

           $.post("/ControllerName/ActionName", { x: sth, y: sth2});

         }
</script>

Answer 4

由於MVC在處理到同一視圖的路由時有點煩人，我已經成功地做到了這一點：

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

您可以使用標准url: "@Url.Action("GetEmployer", "Home")/" + id ，但在刷新時，具有現有ID的路由會保留在后續調用中，因此它開始附加id，這顯然不會不行。 通過在調用中指定ID，該行為不再存在。

Answer 5

我認為導航的最佳方式是使用sammy.js。 這是關於kazimanzurrashid.com的帖子