1. Razor
1. HtmlHelper
1.1 input
- 表单
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
#username {
outline:none;
height:100px;
width:100px;
}
</style>
</head>
<body>
<div>
<h1>欢迎FXX!</h1>
@using (Html.BeginForm("Login", "UserLogin", FormMethod.Post))
{
@Html.TextBox("username")
}
</div>
</body>
</html>
-
生成的页面是
image.png
1.2下拉菜单
- 控制器
public ActionResult Index()
{
List<SelectListItem> listPerson = new List<SelectListItem>();
listPerson.Add(new SelectListItem()
{
Selected = false,
Text = "fxx",
Value = "1",
});
listPerson.Add(new SelectListItem()
{
Selected = false,
Text = "gjj",
Value = "1",
});
listPerson.Add(new SelectListItem()
{
Selected = true,
Text = "hjj",
Value = "1",
});
ViewBag.listPerson = listPerson;
return View();
}
-
View
image.png
1.3 链接
<a href = @Url.Action("Index","Home")>首页</a>
@Html.ActionLink("首页","Index","Home")
2. Action
2.1 行为的四种返回
- 返回视图，传参返回指定的视图，不则是与ACTION同名的视图
View()
- 返回视图，传参返回指定的视图，不则是与ACTION同名的视图
public ActionResult AddPerson()
{
return View();
}
- 返回一个原始的字符串
Content()
- 返回一个原始的字符串
public ActionResult Say()
{
return Content("abc");
}
- 将结果转到其他ACTION
Redirect()
- 将结果转到其他ACTION
public ActionResult RedirectTest()
{
return Redirect(Url.Action("Index", "Home"));
}
- 使用Json(object data)将data序列化为json数据并返回，推荐加上JsonRequestBehavior.AllowGet可以处理Get请求，一般结合客户端的ajax请求进行返回
Json()
- 使用Json(object data)将data序列化为json数据并返回，推荐加上JsonRequestBehavior.AllowGet可以处理Get请求，一般结合客户端的ajax请求进行返回
public ActionResult JsonTest()
{
Person p = new Person()
{
Age = 10,
QQ = "123"
};
return Json(p, JsonRequestBehavior.AllowGet);
}
2.2传值和获取值
index.cshtml
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h1>Hello</h1>
<hr/>
<a href="@Url.Action("Add","Hello")?id=1">添加1</a>
<hr/>
</div>
</body>
</html>
- 方法一：Request[键] 的方式接受
//[HttpGet]
public ActionResult Add()
{
string id = Request["id"];
ViewBag.Id = id;
return View();
}
- 方法二：自动装配（支持重载）
[HttpPost]
public ActionResult Add(int id)
{
ViewBag.Id2 = id;
return View();
}
- VIEW
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h1>Hello</h1>
@using (Html.BeginForm("Add", "Hello", FormMethod.Post))
{
@Html.TextBox("id")
<br/>
<input type="submit"/>
}
</div>
</body>
</html>
注意：
要实现重载（方法名相同），需要满足1.参数不同2.谓词不同
3.Route
3.1 常用路由总结
-
规则.1
image.png
-
可访问url.1
image.png
-
规则.2
image.png
-
可访问url.2
image.png
-
规定访问的片段
image.png
4. AJAX补充
4.1 get请求
- 语法
$.get("请求地址","请求值key:value",function(形参){ 方法})
dataType:"json", //预期返回数据类型，会自动封装为json对象
$.get(
'@Url.Action("Index","Home")', //请求的地址url
{ uname: "ff" },//get请求的数据，没有可以不写
function (msg) { //请求成功调用的回调函数，msg代表返回的数据
var ul = $("<ul><ul>"); //处理数据的各种方法
for (var i = 0; i < msg.length; i++) {
var user = msg[i];
var li = "<li>" + user.userName + "<li>";
ul.append(li);
}
}
)
4.2 post
- 语法
$.post("请求地址","请求值key:value",function(形参){ 方法})
$.post(
'@Url.Action("CalAdd","Home")',
$('#form1').serialize(),
function (msg){
$('#sum').val(msg)
}
)
5. 普通方法提交表单
image.png
HomeController.cs
namespace MVCSecond.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public ActionResult CalAdd(int num1, int num2)
{
int sum = num1 + num2;
return Content(sum.ToString());
}
}
}
Index.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-3.4.1.min.js"> </script>
<script>
$(function () {
$('#btnAdd').click(function () {
$.post(
'@Url.Action("CalAdd","Home")',
$('#form1').serialize(),
function (msg){
$('#sum').val(msg)
}
)
})
})
</script>
</head>
<body>
<div>
<form action="/" method="post" id="form1">
<input type="text" name="num1" value="" />+
<input type="text" name="num2" value="" />
<input type="button" id="btnAdd" value="加" />
<input type="text" value="" id="sum"/>
</form>
</div>
</body>
</html>
网友评论