ASP.NET MVC AJAX表单提交实例

1.首先,新建一个controller。

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

namespace MvcApplication1.Controllers
{
    public class AJAXController : Controller
    {
        //
        // GET: /AJAX/

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

    }
}

2.在index方法下,右键,添加视图

ASP.NET MVC AJAX表单提交实例_第1张图片


3.在Index.cshtml,创建一个ajax的表单。

@{
    ViewBag.Title = "Index";
}



Index

@using (Ajax.BeginForm("hello", "AJAX", new AjaxOptions() { HttpMethod = "post",UpdateTargetId = "information",InsertionMode = InsertionMode.Replace })) { }


这是cshtml的内容,这里有几个要注意的地方。

1.一定要注意jquery.js一定要放在最前面,不然的话,将会出现不能异步的情况。

2.说明一下ajax.beginform中的参数的意义:

1.“hello”指的是controller中的方法。

2.“AJAX”指的是我们刚才创建的controller。

3.HttpMethod = "post"指的是用post传输。

4.UpdateTargetId = "information"指的是传来的内容在哪里显示,我们上面的代码中最下面有一个div,id=“information”,值得就是他。

5.InsertionMode = InsertionMode.Replace指的是替换。


4.完成hello方法

        [HttpPost]
        public ActionResult GetTime(string cal) 
        {
            //return Content(DateTime.Now.ToString("F"));

            string x2 = "的预警信息暂无";
            string x3 = cal + x2;
            return Content(x3);
        }


这样整个的代码就写好了。

ASP.NET MVC AJAX表单提交实例_第2张图片


ASP.NET MVC AJAX表单提交实例_第3张图片


我们来看一下效果:


ASP.NET MVC AJAX表单提交实例_第4张图片


输入名字,点击提交,页面不会跳转


ASP.NET MVC AJAX表单提交实例_第5张图片


这样一个简单的表单提交就完成了。

你可能感兴趣的:(ASP.NET MVC AJAX表单提交实例)