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

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>

运行结果如图:

这里写图片描述

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值