C# & ASP.NET Core MVC: web scraper ajax sends null to controller

Question

我正在嘗試在 C# 中實現一個簡單的屏幕抓取程序。 When I run the application, and type in a url into the input box and click on the submit button, I execute some jQuery to use Ajax to send the url entered to the controller. 出於某種原因，controller 總是收到 null。

這是我認為的代碼：

 <div id="message"></div>
 <input id="urlInput" type="text" placeholder="Enter URL" />
 <button id="submit">Submit</button> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <script>
    $(document).ready(function () {

    $("#submit").click(function (e) {
        var urlValue = $("#urlInput").val();
        console.log(urlValue);
        $.ajax({
                type: "POST",
                url: "/Home/GetUrlSource",
                contentType: "application/json; charset=utf-8",
                data: '{"url":"' + urlValue + '"}',
                dataType: "html",
                success: function (result, status, xhr) {
                    ExtractData(result);
                    //GetUrlTelePhone(result);
                },
                error: function (xhr, status, error) {
                    $("#message").html("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
                }
            });
    });
 </script>

當我運行應用程序時，會顯示視圖。 在輸入框中，我輸入以下內容：

https://www.zillow.com/homes/90-westwood-circle-roslyn-heights-ny-11577

當我單擊提交按鈕並查看瀏覽器控制台時，我看到 url 所以我知道 url 值在執行console.log指令時是有效的。

這是 controller 中的代碼：

[HttpPost]
public string GetUrlSource(string url)
{
    url = url.Substring(0, 4) != "http" ? "http://" + url : url;
    string htmlCode = "";

    using (WebClient client = new WebClient())
    {
        try
        {
            htmlCode = client.DownloadString(url);
        }
        catch (Exception ex)
        {
        }
    }

    return htmlCode;
}

我在GetUrlSource的第一行代碼設置了一個斷點，當我觀察變量 url 時，它有一個 null 值。

任何想法為什么會發生這種情況？ 我在 Mac 上運行 Visual Studio 2019。 該應用程序是 .NET 核心應用程序。

提前致謝。

Answer 1

嘗試以下操作：

 $("#submit").click(function (e) {
            var urlValue = $("#urlInput").val();
            console.log(urlValue);

            $.ajax({
                type: "POST",
                url: "/Home/GetUrlSource",
                data: { url: urlValue },
                dataType: "html",
                success: function (result, status, xhr) {
                    ExtractData(result);
                    //GetUrlTelePhone(result);
                },
                error: function (xhr, status, error) {
                    $("#message").html("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
                }
            });
        });

上面的代碼中有兩個修復：

1. data: { url: urlValue },
2. 移除contentType: "application/json; charset=utf-8",使用默認值。 默認為： application/x-www-form-urlencoded; charset=UTF-8 application/x-www-form-urlencoded; charset=UTF-8

這對我有用。 如果不起作用，請嘗試清理瀏覽器緩存。