interact between MVC and HTML page. AJAX

Question

I created web application. I think that all parts are done, but I don't know how is it connect. Html page - here one field: user will add word and after that my program will parse top 5 results in google. Several questions:

I created html page but know I didn't apply bootstrap and css, but I added file for that. Why it doesn't work My html page

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

My CSS file (it doesn't work)

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

and second question: added controller but now when user click on a button nothing happened. I tried to connect my controller and HTML page using AJAX. But I have no experience with it. Where did I mistake? My controller

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

Try adding styles in _Layout.
In your controller you have not got an action. Instead you are returning ILIST and that is your problem. You need an action so ajax will work properly.

interact between MVC and HTML page. AJAX

Question

1 answers

solution1
0 2020-09-18 06:46:19

interact between MVC and HTML page. AJAX

Question

1 answers

solution1 0 2020-09-18 06:46:19

solution1
0 2020-09-18 06:46:19