MVC 和 HTML 页面之间的交互。阿贾克斯

Question

我创建了 Web 应用程序。我认为所有部分都已完成，但我不知道它是如何连接的。 Html 页面 - 这里有一个字段：用户将添加单词，然后我的程序将解析 google 中的前 5 个结果。 几个问题：

1. 我创建了 html 页面，但知道我没有应用 bootstrap 和 css，但我为此添加了文件。为什么它不起作用 我的html页面

@page
@model SearchDemos.Controllers.SearchInfo
@{
    //ViewData["Title"] = "Get Data";
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Web Application</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="~/css/Style.css" rel="stylesheet" />
</head>
<body>
    <section class="main">
        <!-- Another variation with a button -->
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search Google & Bing">
            <div class="input-group-append">
                <button class="btn btn-secondary" type="button">
                    <i class="fa fa-search">Search</i>
                </button>
            </div>
        </div>
    </section>
</body>
</html>

<script>
    var name =
        $.ajax({
            type: "POST",
            url: '@Url.Action("DoGoogleSearch", "SearchController")',
            context: document.body,
            success: function () { alert('Success'); },
            error: function () { alert('error'); }
        });</script>

我的 CSS 文件（它不起作用）

.main_class {
    max-width: 800px;
    margin: 50px auto;
    position: relative;
    box-shadow: 0 10px 30px 0px rgba(0,0,0, 0.1);
    padding 30px;
}

    .main_class.title {
        text-transform: uppercase;
        text-align: center;
        letter-spacing: 3px;
        font-size: 3em;
        line-height: 48px;
        padding-bottom: 20px;
        color: #5543ca;
        background: linear-gradient(to right, #f4524d 0%, #5543ca);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.contact-form.form-field {
    position: relative;
    margin: 32px 0;
}

.contact-form.input-text {
    display: block;
    width: 100%;
    height: 36px;
    border-width: 0 0 2px 0;
    border-color: #5543ca;
    font-size: 18px;
    line-height:26px;
    font-weight: 400;
}

.contact-form.submit-btn {
    display: inline-block;
    background-image: linear-gradient(125deg, #a72879, #064497);
    color: #fff;
    text-transform:uppercase;
    letter-spacing: 2px;
    font-size:16px;
    padding: 8px  16px;
    border: none;
    cursor: pointer;
}

第二个问题：添加了控制器，但现在当用户单击按钮时什么也没发生。我尝试使用 AJAX 连接我的控制器和 HTML 页面。但我没有这方面的经验。我哪里错了？ 我的控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using HtmlAgilityPack;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;

namespace SearchDemos.Controllers
{
    public class SearchInfo
    {
        public string Title { get; set; }
        public string Link { get; set; }
    }

    [ApiController]
    [Route("[controller]")]
    public class SearchController : ControllerBase
    {
        [HttpGet("Google")]
        static IList<SearchInfo> DoGoogleSearch(string q, int limit = 5)
        {
            var html = @"https://www.google.com/search?q=" + q;

            HtmlWeb web = new HtmlWeb();
            //  accept-language : RU or EN 
            var htmlDoc = web.Load(html);


            var rows = htmlDoc.DocumentNode.SelectNodes("//*[@class='r']").Take(limit);

            var result = new List<SearchInfo>();
            foreach (HtmlNode row in rows)
            {
                var nodeRef = row.SelectSingleNode("./a");

                var si = new SearchInfo
                {

                    Link = nodeRef.GetAttributeValue("href", string.Empty),
                    Title = nodeRef.InnerText.Trim()
                };

                result.Add(si);
            }

            return result;
        }
    }
}

Answer 1

1. 尝试在 _Layout 中添加样式。
2. 在您的控制器中，您没有执行任何操作。相反，您正在返回 ILIST，这就是您的问题。您需要一个操作，这样 ajax 才能正常工作。