1. 程式人生 > >ASP.NET MVC AJAX表單提交例項

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方法下,右鍵,新增檢視

3.在Index.cshtml,建立一個ajax的表單。

@{
    ViewBag.Title = "Index";
}

<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<h2>Index</h2>


    @using (Ajax.BeginForm("hello", "AJAX", new AjaxOptions() {
            HttpMethod = "post",UpdateTargetId = "information",InsertionMode = InsertionMode.Replace
            }))
            {
            
            <input type="text"  name="name">
            <input type="submit" id="btnAjax" name="btnAjax" value="提交" />
    } 



    <div id="information"></div>
這是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);
        }


這樣整個的程式碼就寫好了。



我們來看一下效果:


輸入名字,點選提交,頁面不會跳轉


這樣一個簡單的表單提交就完成了。