MVC之AJAX異步提交表單


第一種用法:

在MVC中,依然可以使用ajax校驗,跟在WebForm中的使用時一樣的,唯一的區別就是將以前的URL路勁改為訪問控制器下的行為

前台
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                $.post("/Home/ShowUserName", {}, function (data) {
                    var data = $.parseJSON(data);
                    for (var i = 0; i < data.length; i++) {
                        $("#div").append(data[i]);
                    }
                })
            })
        });
    </script>
</head>
<body>
    <div>
       <input type="button" id="btn" value="加載"/>
        <div id="div"></div>
    </div>
</body>
</html>

后台
  public ActionResult ShowUserName()
        {
           IQueryable<string> teacherNameList= dbContext.Teacher.Select(u => u.TeacherName);
           JavaScriptSerializer js = new JavaScriptSerializer();
            string nameList=  js.Serialize(teacherNameList);
            return Content(nameList);
        }

 其實對於MVC中已經對json做了更好的封裝,就后台代碼而言,可以返回JsonResult,所以可以省掉自己手寫JavaScriptSerializer類

 

第二種用法:

MVC中已經對ajax校驗進行了很好的封裝,可以使用相關的類庫直接點出來。

Ajax.BeginForm(...)

首先因為即使微軟的MVC進行封裝了,它依然依賴於ajax,所以需要添加相應的j文件

 <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script type="text/javascript">
        function Hello(data)
        {
            alert("hello"+data);

        }
    </script>
   
</head>
<body>
    <div>
        @using (Ajax.BeginForm("Index1", "ajax", new AjaxOptions() { Confirm = "確定要刪除嗎", HttpMethod = "post", OnSuccess = "Hello" }))
        {
            <input type="submit"  value="提交" />
        } 
    
    </div>
</body>
</html>

上面的代碼實現了異步提交的操作,當然Ajax.BeginForm有很多的重載,可以實現基本所有的手寫的功能,同時發現其中的提交按鈕的類型是submit類型,但是依然是走的異步調用的流程,具體的原因是,隱式JS文件中,首先會找到這個打了標記的Form表單,然后將表單中的數據進行異步傳輸,而不會受到后面這個提交按鈕的影響。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM