13-Ajax链接与Ajax表单的快速对比Demo

最新推荐文章于 2024-06-11 07:30:00 发布

gCodeTop 格码拓普老师

最新推荐文章于 2024-06-11 07:30:00 发布

阅读量558

点赞数

分类专栏： 2016-AspNet-MVC教学案例文章标签： mvc4 asp.net ajax

本文链接：https://blog.csdn.net/vinglemar/article/details/51495542

版权

2016-AspNet-MVC教学案例专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1.创建mvc4 basic类型项目

2.创建Home控制器:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcAjaxP158.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetData()
        {
            return PartialView("PartialOne");
        }
        public ActionResult GetData2()
        {
            return Content("<i>bbbb</i>");
        }
        public string LeaveMessage(FormCollection collection)
        {
            string k_Message = "标题:" + collection["yTitle"] + " Email:" + collection["yEmail"] +
                " QQ:" + collection["yQQ"] + " 内容:" + collection["yContent"];
            return k_Message;
        }      
    }
}

3.创建View,Index.cshtml内容如下:

@{
    ViewBag.Title = "Index";
}

<h2>1.Ajax链接测试</h2>
<div id="cs1"></div>
@Ajax.ActionLink("GetData","GetData",new AjaxOptions(){
    UpdateTargetId="cs1",InsertionMode=InsertionMode.InsertAfter,HttpMethod="get"})
@Ajax.ActionLink("GetData2","GetData2",new AjaxOptions(){
    UpdateTargetId="cs1",InsertionMode=InsertionMode.Replace,HttpMethod="post"})
<hr />
<h2>2.Ajax表单测试</h2>
<div id="cs2"></div>
@using (Ajax.BeginForm("LeaveMessage", new AjaxOptions() {
    HttpMethod="post",UpdateTargetId="cs2" }))
{
    <p>@Html.Label("yTitle","标题")  @Html.TextBox("yTitle") </p>
    <p>@Html.Label("yEmail", "电子邮件") @Html.TextBox("yEmail")</p>
    <p>@Html.Label("yQQ", "QQ") @Html.TextBox("yQQ")</p>
    <p>@Html.Label("yContent", "内容") @Html.TextBox("yContent")</p>
    <p><input type="submit" value="提交留言"  /></p>
    
}

@using (Ajax.BeginForm("GetData", new AjaxOptions() {
    HttpMethod="get",UpdateTargetId="cs2" }))
{   
    <p><input type="submit" value="提交"  /></p>    
}

4.在View/Home下面创建一个PartialOne局部视图,内容如下:

5.在_Layout中添加一行代码: @Scripts.Render("~/bundles/jqueryval").文件内容如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @RenderSection("scripts", required: false)
</body>
</html>

最终界面效果: