c# - MVC 和 HTML 页面之间的交互。AJAX
问题描述
我创建了 Web 应用程序。我认为所有部分都已完成,但我不知道它是如何连接的。Html 页面 - 这里有一个字段:用户将添加单词,然后我的程序将解析 google 中的前 5 个结果。几个问题:
- 我创建了 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;
}
}
}
解决方案
- 尝试在 _Layout 中添加样式。
- 在您的控制器中,您没有执行任何操作。相反,您正在返回 ILIST,这就是您的问题。你需要一个动作,这样 ajax 才能正常工作。
推荐阅读
- amazon-eks - AWS EKS 自定义 AMI 托管节点组引导文件不存在
- sql - 为什么在 URL 中间使用 :id 时,带有 pool.query 的 POST 请求只能间歇性地工作?
- windows - 没有在此处打开 cmd 或右键单击此处打开 Powershell 窗口的选项
- python - Spark df没有选择嵌套字段作为列名
- java - 空对象引用上的 RecyclerView
- sql - 为两个不同的类别优化 SQL - Postgres
- python - python sqlite3 hypen字符读取问题
- sendmail - 以 smtp_username@example.com 形式接收 Sendmail 邮件的 Amazon SES
- javascript - Evergreen 倒数计时器在移动 HTML 中不起作用
- php - 尽管路由正确,Laravel 资源控制器仍产生 404