ASP.NET MVC中使用Ajax.BeginForm()的例子

最新推荐文章于 2024-08-09 17:33:04 发布

.NET跨平台

最新推荐文章于 2024-08-09 17:33:04 发布

阅读量1w

点赞数 1

分类专栏： ASP.NET MVC4|MVC5 文章标签： asp.net mvc

本文链接：https://blog.csdn.net/WuLex/article/details/79008512

版权

ASP.NET MVC4|MVC5 专栏收录该内容

122 篇文章 11 订阅

订阅专栏

AjaxController.cs

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

namespace AjaxMvcExample.Controllers
{
    public class AjaxController : Controller
    {
        // GET: Ajax
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult AjaxTest(string message)
        {
            return PartialView((object)message);
        }
    }
}

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax Example</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    <script src="~/Scripts/jquery-1.8.0.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Ajax Example", "Index", "Ajax", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>

Index.cshtml

<section>
    <h3>使用AJAX ASP.NET MVC的示例</h3>
</section>
<section>
    <div id="messages">

    </div>

    @using (Ajax.BeginForm("AjaxTest",
    new AjaxOptions
    {
        Confirm = "你真的想发一个消息吗?",
        HttpMethod = "Post",
        InsertionMode = InsertionMode.InsertAfter,
        UpdateTargetId = "messages",
        OnComplete = "ajaxComplete"
    }))
    {
        @Html.Label("message", "信息")<br />
        @Html.TextArea("message")<br />
        <button type="submit">发送</button>
    }

    <script>
        function ajaxComplete() {
            alert("完成");
        }
    </script>
</section>

AjaxTest.cshtml

@model string

<div>
    @Model
</div>

运行结果

这里写图片描述

Ajax在ASP.NET MVC中上传

HomeController.cs

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

namespace ajaxUpload.Controllers
{
    public class HomeController : Controller
    {
        [HttpPost]
        public JsonResult Upload()
        {
            var uploadedFile = Request.Files[0] as HttpPostedFileBase;
            return Json(uploadedFile.FileName);
        }

        public ActionResult Index()
        {
            return View();
        }

    }
}

Index.cshtml

@{
    ViewBag.Title = "Home Page";
}
<div class="jumbotron">
    <h1>Ajax在ASP.NET MVC中上传</h1>
</div>
<div class="row">
    <div id="main">
        <h1>上传您的图片</h1>
        <form id="uploadfrm" method="post" enctype="multipart/form-data" action="/home/upload">
            <input type="file" name="images" id="images" />
        </form>
        <div id="response"></div>
        <ul id="image-list"></ul>
    </div>
    <button onclick="Upload();">上传</button>
</div>

<script>
    function Upload() {
        var form = document.getElementById('uploadfrm');
        var formData = new FormData(form);
        $.ajax({
            url: "/home/upload",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (res) {
                document.getElementById("response").innerHTML = res;
            }
        });
    }
</script>